"use client";

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

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

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

function Section({ canvasId, number, title, subtitle, placeholder, fieldId, bgColor = "bg-white" }: SectionProps) {
  return (
    <div className={`border-2 border-[#d1d5dc] rounded-lg p-4 flex flex-col min-h-0 ${bgColor}`}>
      <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: 6,
          }}
          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 KeyInsightsCanvas({ canvas, className = "", teamName }: KeyInsightsCanvasProps) {
  return (
    <div className={`bg-white flex flex-col h-full overflow-auto md:overflow-hidden ${className}`}>


      {/* Orange Warning Banner */}
      <div className="mx-4 md:mx-8 mt-4 bg-[#ffedd4] border-2 border-[#ff6900] py-2 px-3 text-center shrink-0">
        <span className="text-[#9f2d00] text-[12px] md:text-[14px] font-bold uppercase tracking-wider">
          ⚠️ 3 À 4 COPIES NÉCESSAIRES — Une pour chaque concept
        </span>
      </div>



      {/* Main Content - 2x2 Grid on desktop, 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="Motifs récurrents"
          subtitle="Ce qu'on observe chez plusieurs utilisateurs, tendances, patterns"
          placeholder="Ex: Les salariés veulent apprendre pendant les pauses, pas après le travail • Format court 5-10 min maximum (TotalEnergies)"
          fieldId="patterns"
        />

        <Section
          canvasId={canvas.id}
          number={2}
          title="Citations ou moments forts"
          subtitle="Verbatims marquants, scènes révélatrices"
          placeholder={`Ex: "J'ai pas envie qu'on me fasse la morale, je veux juste comprendre pourquoi c'est important pour moi"`}
          fieldId="quotes"
        />

        <Section
          canvasId={canvas.id}
          number={3}
          title="Ce qui contredit nos hypothèses"
          subtitle="Surprises, éléments qui remettent en question nos croyances initiales"
          placeholder="Ex: La gamification n'est pas motivante pour tous • Certains préfèrent un ton sérieux • Le collectif est + important que les points"
          fieldId="contradictions"
          bgColor="bg-[#fef2f2]"
        />

        <Section
          canvasId={canvas.id}
          number={4}
          title="Ce qui compte vraiment pour les utilisateurs"
          subtitle="Valeurs profondes, critères de décision, priorités réelles"
          placeholder="Ex: Sentir qu'ils progressent concrètement • Être reconnus par leurs pairs • Avoir du temps pour apprendre"
          fieldId="values"
        />
      </div>

      {/* Yellow Info Banner */}
      <div className="mx-8 mb-4 bg-[#fef3c7] border-2 border-[#f59e0b] py-2 px-4 text-center shrink-0">
        <p className="text-[12px] text-[#92400e] italic">
          Privilégier la clarté et la synthèse — phrases courtes, pas de longs textes
        </p>
      </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]">Date :</span>
      </div>
    </div>
  );
}