"use client";

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

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

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

function Section({ canvasId, number, title, subtitle, placeholder, fieldId, className = "" }: SectionProps) {
  return (
    <div className={`border-2 border-[#d1d5dc] rounded-lg p-4 flex flex-col min-h-0 ${className}`}>
      <h3 className="text-[14px] font-bold uppercase mb-2 shrink-0">{number}. {title}</h3>
      <p className="text-[12px] text-[#4a5565] mb-1 shrink-0">{subtitle}</p>
      <div className="flex-1 min-h-0">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: fieldId,
            type: "textarea",
            label: "",
            placeholder: placeholder,
            rows: 4,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[11px] h-full resize-none !rounded-none italic text-[#99a1af]"
        />
      </div>
    </div>
  );
}

export function InterviewGuideCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: InterviewGuideCanvasProps & { 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}`}>
      {/* Main Content */}
      <div className="flex-1 px-4 md:px-8 py-4 flex flex-col gap-3 md:gap-4 md:min-h-0 md:overflow-hidden">
        {/* Section 1 - Objectif */}
        <Section
          canvasId={canvas.id}
          number={1}
          title="Objectif de l'entretien"
          subtitle="Ce que nous cherchons à comprendre"
          placeholder="Ex: Comprendre les rituels d'achat de charcuterie et les critères de qualité pour les consommateurs urbains (Ferme de l'Enclave)"
          fieldId={`${fieldPrefix}objective`}
        />

        {/* Section 2 - Qui interviewer */}
        <Section
          canvasId={canvas.id}
          number={2}
          title="Qui nous interviewons"
          subtitle="Profil, contexte, critères de sélection"
          placeholder="Ex: Familles urbaines 30-45 ans, achetant de la charcuterie au moins 2x/mois, sensibles à la qualité"
          fieldId={`${fieldPrefix}who`}
        />

        {/* Section 3 - Questions ouvertes */}
        <Section
          canvasId={canvas.id}
          number={3}
          title="Questions ouvertes"
          subtitle='Commencer par "Pourquoi", "Comment", "Parlez-moi de...", "Pouvez-vous me décrire..."'
          placeholder='Ex: "Parlez-moi de la dernière fois que vous avez acheté de la charcuterie" • "Comment choisissez-vous ?"'
          fieldId={`${fieldPrefix}questions`}
          className="flex-1"
        />

        {/* Sections 4 & 5 - Grid */}
        <div className="grid grid-cols-2 gap-4 shrink-0">
          <div className="border-2 border-[#d1d5dc] rounded-lg p-4 bg-[#fef2f2]">
            <h3 className="text-[14px] font-bold uppercase mb-2">4. À éviter</h3>
            <p className="text-[12px] text-[#4a5565] mb-1">
              Questions biaisées, orientées, hypothétiques ("Et si...", "Aimeriez-vous...")
            </p>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}avoid`,
                type: "textarea",
                label: "",
                placeholder: 'Ex: "Aimeriez-vous un magasin zéro déchet ?" • « Seriez-vous prêt à payer plus cher ? » •',
                rows: 3,
              }}
              hideLabel
              className=""
              inputClassName="bg-transparent border-0 !p-0 text-[11px] resize-none !rounded-none italic text-[#99a1af]"
            />
          </div>

          <div className="border-2 border-[#d1d5dc] rounded-lg p-4 bg-[#f0fdf4]">
            <h3 className="text-[14px] font-bold uppercase mb-2">5. Ce qu'on veut apprendre</h3>
            <p className="text-[12px] text-[#4a5565] mb-1">(pas prouver)</p>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}learn`,
                type: "textarea",
                label: "",
                placeholder: "Ex: Rituels d'achat • Critères de choix réels • Freins à l'achat • Alternatives utilisées",
                rows: 3,
              }}
              hideLabel
              className=""
              inputClassName="bg-transparent border-0 !p-0 text-[11px] resize-none !rounded-none italic text-[#99a1af]"
            />
          </div>
        </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>
  );
}