"use client";

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

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

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

function Section({ canvasId, number, title, subtitle, placeholder, fieldId, weekLabel }: SectionProps) {
  return (
    <div className="border-2 border-[#d1d5dc] rounded-lg p-4 flex flex-col min-h-0">
      <div className="flex items-start gap-2 mb-2 shrink-0">
        <div className="bg-black w-6 h-6 flex items-center justify-center shrink-0">
          <span className="text-white text-[12px] font-bold">{number}</span>
        </div>
        <div className="flex-1">
          <h3 className="text-[14px] font-bold uppercase">{title}</h3>
          {weekLabel && (
            <span className="text-[10px] text-[#00a63e] font-bold">{weekLabel}</span>
          )}
        </div>
      </div>
      <p className="text-[11px] 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-[#f9fafb] border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none italic text-[#99a1af]"
        />
      </div>
    </div>
  );
}

export function ConceptNarrativeCanvas({ canvas, className = "", teamName }: ConceptNarrativeCanvasProps) {
  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">
        {/* Top Row - 2 columns, stacks on mobile */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 md:flex-1 md:min-h-0">
          <Section
            canvasId={canvas.id}
            number={1}
            title="Défi Initial"
            subtitle="Quel était le problème de départ, le terrain d'exploration ?"
            placeholder="Ex: Comment donner envie à un jeune de devenir client sociétaire d'une mutuelle ? (CAPG)"
            fieldId="initial-challenge"
          />
          <Section
            canvasId={canvas.id}
            number={2}
            title="Insights Système & Futur"
            subtitle="Ce que nous avons compris de l'écosystème, des tensions, des futurs possibles"
            placeholder="Ex: Jeunes cherchent sens + transparence • Méfiance institutions • Futur collaboratif"
            fieldId="system-insights"
            weekLabel="Semaine 2"
          />
        </div>

        {/* Middle Row - 2 columns */}
        <div className="grid grid-cols-2 gap-4 flex-1 min-h-0">
          <Section
            canvasId={canvas.id}
            number={3}
            title="Concepts Explorés"
            subtitle="Quelles pistes de concept avons-nous générées ?"
            placeholder="Ex: App micro-assurance peer-to-peer • Programme fidélité valeurs • Mutuelle gamifiée"
            fieldId="explored-concepts"
          />
          <Section
            canvasId={canvas.id}
            number={4}
            title="Apprentissages Terrain"
            subtitle="Ce que les utilisateurs nous ont appris, validations et pivots"
            placeholder={`Ex: l'"Mutuelle" rebute • Veulent savoir où va l'argent • Dimension collective plaît`}
            fieldId="field-learnings"
            weekLabel="Semaine 3"
          />
        </div>

        {/* Bottom Section - Full Width */}
        <div className="border-2 border-black rounded-lg p-4 shrink-0">
          <div className="flex items-start gap-2 mb-2">
            <div className="bg-black w-6 h-6 flex items-center justify-center shrink-0">
              <span className="text-white text-[12px] font-bold">5</span>
            </div>
            <h3 className="text-[14px] font-bold uppercase">Concept Final & Expérience à Prototyper</h3>
          </div>
          <p className="text-[11px] text-[#4a5565] mb-1">
            Le concept retenu et l'expérience clé que nous allons prototyper
          </p>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "final-concept",
              type: "textarea",
              label: "",
              placeholder: 'Ex: "Collectif Santé" - App collaborative où les jeunes co-créent leur protection sociale • Prototyper l\'onboarding et le premier challenge collectif',
              rows: 3,
            }}
            hideLabel
            className=""
            inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-2 text-[10px] resize-none !rounded-none italic text-[#99a1af]"
          />
        </div>

        {/* Info Banner */}
        <div className="bg-[#f9fafb] border-2 border-[#d1d5dc] py-2 px-4 text-center shrink-0">
          <p className="text-[11px] text-[#6a7282] italic">
            Ce canevas soutient la préparation d'un pitch ou d'une présentation de projet
          </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]">Date :</span>
      </div>
    </div>
  );
}