"use client";

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

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

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

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

export function PrototypeReadinessCanvas({ canvas, className = "", teamName }: PrototypeReadinessCanvasProps) {
  return (
    <div className={`bg-white flex flex-col h-full overflow-auto md:overflow-hidden ${className}`}>


      {/* Main Content - 2x2 Grid stacks 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}
          title="Ce que nous allons prototyper"
          subtitle="Quels aspects du concept, quels moments de l'expérience"
          placeholder="Ex: L'expérience d'ouverture de compte en 3 min via l'app • Le parcours d'onboarding gamifié (CASA)"
          fieldId="will-prototype"
          borderColor="border-[#86efac]"
          bgColor="bg-[#f0fdf4]"
        />

        <Section
          canvasId={canvas.id}
          title="Ce que nous ne prototypons pas"
          subtitle="Ce qui reste hors périmètre pour l'instant"
          placeholder="Ex: Le système de paiement réel • L'intégration bancaire • Les fonctionnalités avancées"
          fieldId="wont-prototype"
          borderColor="border-[#fca5a5]"
          bgColor="bg-[#fef2f2]"
        />

        <Section
          canvasId={canvas.id}
          title="Ce qu'on ne sait pas encore"
          subtitle="Inconnues, questions ouvertes, hypothèses à tester"
          placeholder="Ex: Le ton exact à adopter • Le niveau de gamification optimal • Partage de données"
          fieldId="unknowns"
          borderColor="border-[#fcd34d]"
          bgColor="bg-[#fefce8]"
        />

        <Section
          canvasId={canvas.id}
          title="À quoi ressemble le succès"
          subtitle="Critères de réussite, résultats attendus du prototype"
          placeholder="Ex: 8/10 jeunes complètent l'onboarding • Comprennent la valeur • Recommanderaient"
          fieldId="success-criteria"
          borderColor="border-[#93c5fd]"
          bgColor="bg-[#eff6ff]"
        />
      </div>

      {/* Info Banner */}
      <div className="mx-8 mb-4 bg-[#f9fafb] border-2 border-[#d1d5dc] py-2 px-4 text-center shrink-0">
        <p className="text-[11px] text-[#6a7282] italic">
          Canvas orienté action — clarifier le périmètre avant de se lancer dans le prototypage
        </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>
  );
}