"use client";

import { cn } from "@/lib/utils";
import { CanvasField } from "../CanvasField";
import type { CanvasTemplate } from "@/lib/types";

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

/**
 * System Learning Canvas Template (Template #6)
 * Capturer les apprentissages sur le fonctionnement du système partenaire
 * 
 * Design: 4 vertical sections with different backgrounds
 * - Section 1: Gray background - Key System Learnings
 * - Section 2: White background - Surprises
 * - Section 3: BLACK background - Paradox Challenge (white text)
 * - Section 4: Gray background - 3 theme columns
 */
export function SystemLearningCanvas({ canvas, className, teamName }: SystemLearningCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-hidden", className)}>
      {/* Subtitle */}
      <div className="px-6 pb-2 shrink-0">
        <p className="text-[14px] text-[#364153] leading-[20px]">
          Capturer les apprentissages sur le fonctionnement du système partenaire
        </p>
      </div>

      {/* Main Content - 4 Vertical Sections */}
      <div className="flex-1 flex flex-col gap-2 px-3 md:px-6 pb-2 min-h-0 overflow-auto md:overflow-hidden">

        {/* Section 1: Apprentissages Clés du Système - Gray Background */}
        <div className="bg-[#f9fafb] border-4 border-black flex-shrink-0 md:flex-[1.2] min-h-[160px] md:min-h-0">
          <div className="flex flex-col gap-1 p-3 md:p-4 h-full">
            <h3 className="font-bold text-[14px] md:text-[16px] text-[#0a0a0a] uppercase tracking-tight leading-[20px] md:leading-[24px] shrink-0">
              1. Apprentissages Clés du Système
            </h3>
            <p className="text-[10px] md:text-[11px] text-[#4a5565] italic leading-[14px] shrink-0">
              Qu'avez-vous vraiment compris sur le système ? Quelles sont les dynamiques cachées ?
            </p>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "key-learnings",
                  type: "textarea",
                  label: "",
                  placeholder: "Ex : \"Les jeunes ne rejettent pas la charcuterie, mais ils ne savent pas comment l'intégrer dans leur quotidien. La distribution impose des formats qui ne correspondent plus aux modes de vie actuels.\"",
                  rows: 4,
                }}
                className="h-full"
                inputClassName="border-2 border-[#99a1af] bg-white h-full resize-none !p-3 text-[12px]"
              />
            </div>
          </div>
        </div>

        {/* Section 2: Ce qui nous a Surpris - White Background */}
        <div className="bg-white border-4 border-black flex-shrink-0 md:flex-[1.2] min-h-[160px] md:min-h-0">
          <div className="flex flex-col gap-1 p-3 md:p-4 h-full">
            <h3 className="font-bold text-[14px] md:text-[16px] text-[#0a0a0a] uppercase tracking-tight leading-[20px] md:leading-[24px] shrink-0">
              2. Ce qui nous a Surpris
            </h3>
            <p className="text-[10px] md:text-[11px] text-[#4a5565] italic leading-[14px] shrink-0">
              Quelles découvertes inattendues ? Qu'est-ce qui a changé votre vision initiale ?
            </p>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "surprises",
                  type: "textarea",
                  label: "",
                  placeholder: "Ex : \"Les consommateurs veulent connaître l'origine précise mais trouvent les labels trop complexes. Le problème n'est pas le produit, c'est le moment et le contexte de consommation.\"",
                  rows: 4,
                }}
                className="h-full"
                inputClassName="border-2 border-[#99a1af] bg-white h-full resize-none !p-3 text-[12px]"
              />
            </div>
          </div>
        </div>

        {/* Section 3: Défi Reformulé en Paradoxe - BLACK Background */}
        <div className="bg-black border-4 border-black flex-shrink-0 md:flex-[0.8] min-h-[120px] md:min-h-0">
          <div className="flex flex-col gap-1 p-3 md:p-4 h-full">
            <h3 className="font-bold text-[14px] md:text-[16px] text-white uppercase tracking-tight leading-[20px] md:leading-[24px] shrink-0">
              3. Défi Reformulé en Paradoxe
            </h3>
            <p className="text-[10px] md:text-[11px] text-white/80 italic leading-[14px] shrink-0">
              Exprimez le défi comme une tension entre deux forces opposées (sans mentionner le partenaire)
            </p>
            <div className="flex-1 min-h-0">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "paradox-challenge",
                  type: "textarea",
                  label: "",
                  placeholder: "Ex : \"Comment préserver l'authenticité du savoir-faire artisanal tout en réinventant complètement l'expérience de consommation ?\"",
                  rows: 2,
                }}
                className="h-full"
                inputClassName="border-2 border-[#d1d5dc] bg-white h-full resize-none !p-3 text-[12px]"
              />
            </div>
          </div>
        </div>

        {/* Section 4: Thèmes Majeurs à Explorer - Gray Background with 3 Columns */}
        <div className="bg-[#f9fafb] border-4 border-black flex-shrink-0 md:flex-[0.9] min-h-[140px] md:min-h-0">
          <div className="flex flex-col gap-1 p-3 md:p-4 h-full">
            <h3 className="font-bold text-[14px] md:text-[16px] text-[#0a0a0a] uppercase tracking-tight leading-[20px] md:leading-[24px] shrink-0">
              4. Thèmes Majeurs à Explorer dans le Futur (2-3 thèmes)
            </h3>
            <p className="text-[10px] md:text-[11px] text-[#4a5565] italic leading-[14px] shrink-0">
              Quels territoires méritent d'être explorés pour répondre à ce paradoxe ?
            </p>
            {/* 3 Theme Columns - stack on mobile? No, keeping grid but smaller or responsive grid */}
            <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-2 min-h-0">
              <div className="bg-white border-2 border-[#99a1af] flex items-center justify-center p-2">
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "theme-1",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex : \"Nouveaux moments de consommation\"",
                    rows: 2,
                  }}
                  className="w-full h-full"
                  inputClassName="border-0 bg-transparent text-center text-[11px] h-full resize-none placeholder:text-[#99a1af] !p-1"
                />
              </div>
              <div className="bg-white border-2 border-[#99a1af] flex items-center justify-center p-2">
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "theme-2",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex : \"Transparence radicale de la production\"",
                    rows: 2,
                  }}
                  className="w-full h-full"
                  inputClassName="border-0 bg-transparent text-center text-[11px] h-full resize-none placeholder:text-[#99a1af] !p-1"
                />
              </div>
              <div className="bg-white border-2 border-[#99a1af] flex items-center justify-center p-2">
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "theme-3",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex : \"Formats adaptés aux modes de vie urbains\"",
                    rows: 2,
                  }}
                  className="w-full h-full"
                  inputClassName="border-0 bg-transparent text-center text-[11px] h-full resize-none placeholder:text-[#99a1af] !p-1"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="border-t-2 border-[#d1d5dc] mx-6 pt-2 pb-1 shrink-0">
        <div className="flex items-center justify-between text-[12px] text-[#6a7282]">
          <span>Équipe : {teamName || ''}</span>
          <span>© Mathieu Aguesse 2026</span>
          <span>Date :</span>
        </div>
      </div>
    </div>
  );
}