"use client";

import { CanvasTemplate } from "@/lib/canvas-data";
import { CanvasField } from "../CanvasField";

interface ConceptRecapCanvasProps {
  canvas: CanvasTemplate;
  teamName?: string;
  className?: string;
}

interface ConceptSectionProps {
  canvasId: string;
  number: number;
  titleFieldId: string;
  problemFieldId: string;
  descriptionFieldId: string;
  whyFieldId: string;
  titlePlaceholder: string;
  problemPlaceholder: string;
  descriptionPlaceholder: string;
  whyPlaceholder: string;
}

function ConceptSection({
  canvasId,
  number,
  titleFieldId,
  problemFieldId,
  descriptionFieldId,
  whyFieldId,
  titlePlaceholder,
  problemPlaceholder,
  descriptionPlaceholder,
  whyPlaceholder,
}: ConceptSectionProps) {
  return (
    <div className="flex-1 border-2 border-black flex flex-col min-h-0 overflow-hidden">
      <div className="px-[18px] pt-[18px] pb-[2px] flex flex-col gap-4 h-full">
        {/* Header */}
        <div className="flex items-center gap-3 border-b-2 border-black pb-2 shrink-0">
          <div className="bg-black w-8 h-8 flex items-center justify-center">
            <span className="text-white text-[14px] font-bold">{number}</span>
          </div>
          <h3 className="text-[20px] uppercase tracking-wide">CONCEPT {number}</h3>
        </div>

        {/* Fields Grid */}
        <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-4 min-h-0">
          {/* Titre du concept */}
          <div className="flex flex-col gap-2 min-h-0">
            <label className="text-[12px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
              Titre du concept
            </label>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvasId}
                field={{
                  id: titleFieldId,
                  type: "textarea",
                  label: "",
                  placeholder: titlePlaceholder,
                  rows: 4,
                }}
                hideLabel
                className="h-full"
                inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-3 text-[12px] h-full resize-none !rounded-none"
              />
            </div>
          </div>

          {/* Problème adressé */}
          <div className="flex flex-col gap-2 min-h-0">
            <label className="text-[12px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
              Problème adressé
            </label>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvasId}
                field={{
                  id: problemFieldId,
                  type: "textarea",
                  label: "",
                  placeholder: problemPlaceholder,
                  rows: 4,
                }}
                hideLabel
                className="h-full"
                inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-3 text-[12px] h-full resize-none !rounded-none"
              />
            </div>
          </div>

          {/* Description courte */}
          <div className="flex flex-col gap-2 min-h-0">
            <label className="text-[12px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
              Description courte
            </label>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvasId}
                field={{
                  id: descriptionFieldId,
                  type: "textarea",
                  label: "",
                  placeholder: descriptionPlaceholder,
                  rows: 4,
                }}
                hideLabel
                className="h-full"
                inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-3 text-[12px] h-full resize-none !rounded-none"
              />
            </div>
          </div>

          {/* Pourquoi ce concept */}
          <div className="flex flex-col gap-2 min-h-0">
            <label className="text-[12px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
              Pourquoi ce concept
            </label>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvasId}
                field={{
                  id: whyFieldId,
                  type: "textarea",
                  label: "",
                  placeholder: whyPlaceholder,
                  rows: 4,
                }}
                hideLabel
                className="h-full"
                inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-3 text-[12px] h-full resize-none !rounded-none"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function ConceptRecapCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: ConceptRecapCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  // Field ID prefix for multi-page support
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  // Calculate concept numbers based on page index
  // Page 1: Concepts 1 & 2
  // Page 2: Concepts 3 & 4
  // etc.
  const concept1Number = (pageIndex - 1) * 2 + 1;
  const concept2Number = (pageIndex - 1) * 2 + 2;

  return (
    <div className={`bg-white flex flex-col h-full overflow-auto md:overflow-hidden ${className}`}>
      {/* Main Content - Two Concept Sections */}
      <div className="flex-1 px-4 md:px-8 py-4 flex flex-col gap-4 md:min-h-0 md:overflow-hidden">
        <ConceptSection
          canvasId={canvas.id}
          number={concept1Number}
          titleFieldId={`${fieldPrefix}concept1-title`}
          problemFieldId={`${fieldPrefix}concept1-problem`}
          descriptionFieldId={`${fieldPrefix}concept1-description`}
          whyFieldId={`${fieldPrefix}concept1-why`}
          titlePlaceholder={pageIndex === 1 ? 'Ex: "Surf Inclusif Sensoriel" (Boardriders)' : 'Titre du concept'}
          problemPlaceholder={pageIndex === 1 ? "Ex: Les personnes en situation de handicap ne peuvent pas pratiquer le surf en toute sécurité et confort" : "Quel problème essayez-vous de résoudre ?"}
          descriptionPlaceholder={pageIndex === 1 ? "Ex: Combinaison modulaire avec fermeture simplifiée et capteurs sensoriels intégrés" : "Description courte du concept"}
          whyPlaceholder={pageIndex === 1 ? "Ex: Rend l'expérience du surf accessible tout en créant une connexion émotionnelle avec l'océan" : "Pourquoi ce concept est-il pertinent ?"}
        />

        <ConceptSection
          canvasId={canvas.id}
          number={concept2Number}
          titleFieldId={`${fieldPrefix}concept2-title`}
          problemFieldId={`${fieldPrefix}concept2-problem`}
          descriptionFieldId={`${fieldPrefix}concept2-description`}
          whyFieldId={`${fieldPrefix}concept2-why`}
          titlePlaceholder={pageIndex === 1 ? 'Ex: "Apprentissage Micro-Moments" (TotalEnergies)' : 'Titre du concept'}
          problemPlaceholder={pageIndex === 1 ? "Ex: Les salariés n'ont pas le temps pour des formations longues et contraignantes" : "Quel problème essayez-vous de résoudre ?"}
          descriptionPlaceholder={pageIndex === 1 ? "Ex: Capsules d'apprentissage de 5-10 min accessibles pendant les pauses" : "Description courte du concept"}
          whyPlaceholder={pageIndex === 1 ? "Ex: S'intègre naturellement dans le quotidien sans créer de contrainte supplémentaire" : "Pourquoi ce concept est-il pertinent ?"}
        />

        {/* Info Banner */}
        <div className="bg-[#dcfce7] border-2 border-[#00c950] py-3 px-4 text-center shrink-0">
          <p className="text-[12px] italic text-[#0a0a0a]">
            Ces concepts ont été identifiés en Semaine 1 et seront testés tout au long de la Semaine 3
          </p>
        </div>
      </div>

      {/* Footer */}
      <div className="px-8 py-3 border-t-2 border-[#d1d5dc] flex justify-between items-center shrink-0">
        <span className="text-[12px] text-[#6a7282]">Équipe : {teamName || ''}</span>
        <span className="text-[12px] text-[#6a7282]">© Mathieu Aguesse 2026</span>
        <span className="text-[12px] text-[#6a7282]">
          {isMultiPage && pageIndex > 1 ? `Page ${pageIndex}` : "Date :"}
        </span>
      </div>
    </div>
  );
}