"use client";

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

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

interface SectionProps {
  canvasId: string;
  number: number;
  title: string;
  subtitle: string;
  placeholder: string;
  fieldId: string;
}

function Section({ canvasId, number, title, subtitle, placeholder, fieldId }: SectionProps) {
  return (
    <div className="border-2 border-black flex flex-col min-h-0 overflow-hidden">
      <div className="p-4 flex flex-col gap-2 h-full">
        {/* Header */}
        <div className="border-b-2 border-black pb-2 shrink-0">
          <h3 className="text-[18px] uppercase tracking-wide">{number}. {title}</h3>
        </div>

        {/* Subtitle */}
        <p className="text-[12px] text-[#4a5565] shrink-0">{subtitle}</p>

        {/* Placeholder text */}
        <p className="text-[12px] text-[#99a1af] italic shrink-0">{placeholder}</p>

        {/* Input area */}
        <div className="flex-1 min-h-0">
          <CanvasField
            canvasId={canvasId}
            field={{
              id: fieldId,
              type: "textarea",
              label: "",
              rows: 8,
            }}
            hideLabel
            className="h-full"
            inputClassName="bg-white border-0 !p-0 text-[12px] h-full resize-none !rounded-none"
          />
        </div>
      </div>
    </div>
  );
}

export function ConceptHypothesesCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: ConceptHypothesesCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  return (
    <div className={`bg-white flex flex-col h-full overflow-auto md:overflow-hidden ${className}`}>
      {/* Concept Description */}
      <div className="mx-4 md:mx-8 mt-4 bg-[#f9fafb] border-2 border-[#d1d5dc] p-3 md:p-4 shrink-0">
        <label className="text-[11px] md:text-[12px] font-bold text-[#4a5565] uppercase block mb-2">
          Description du concept :
        </label>
        <CanvasField
          canvasId={canvas.id}
          field={{
            id: `${fieldPrefix}concept-description`,
            type: "textarea",
            label: "",
            placeholder: 'Ex: "Combinaison modulaire avec système de fermeture simplifié et capteurs sensoriels pour rendre le surf accessible aux personnes en situation de handicap" (Boardriders)',
            rows: 2,
          }}
          hideLabel
          className="border-b-2 border-[#d1d5dc] pb-2"
          inputClassName="bg-transparent border-0 !p-0 text-[12px] resize-none !rounded-none"
        />
      </div>

      {/* Main Content - 2x2 Grid, single column on mobile */}
      <div className="flex-1 px-4 md:px-8 py-4 grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 md:min-h-0 md:overflow-hidden">
        <Section
          canvasId={canvas.id}
          number={1}
          title="Promesse Centrale"
          subtitle="Ce que ce concept prétend changer ou améliorer"
          placeholder={`Ex: "Permettre à toute personne en situation de handicap de vivre l'expérience sensorielle du surf en toute sécurité et confort"`}
          fieldId={`${fieldPrefix}promise`}
        />

        <Section
          canvasId={canvas.id}
          number={2}
          title="Hypothèses Clés"
          subtitle="Ce qui doit être vrai pour que ce concept fonctionne"
          placeholder={`Ex: "Les accompagnants sont prêts à aider à l'habillage • Le confort prime sur la performance • Les textures sensorielles aident à rassurer"`}
          fieldId={`${fieldPrefix}key-hypotheses`}
        />

        <Section
          canvasId={canvas.id}
          number={3}
          title="Qu'est-ce qui pourrait échouer ?"
          subtitle="Risques, doutes, raisons pour lesquelles cela pourrait ne pas marcher dans la réalité"
          placeholder={`Ex: "Trop complexe à enfiler • Sensations sensorielles désagréables • Prix trop élevé pour les familles"`}
          fieldId={`${fieldPrefix}failure-risks`}
        />

        <Section
          canvasId={canvas.id}
          number={4}
          title="Comment le tester"
          subtitle="À qui parler, où observer, quoi demander"
          placeholder={`Ex: "Éducateurs spécialisés, familles, associations handisport • Observer l'habillage actuel • Tester le prototype avec 3 profils"`}
          fieldId={`${fieldPrefix}how-to-test`}
        />
      </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>
  );
}