"use client";

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

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

/**
 * Situations Canvas Template (Template #10)
 * Créez 4 situations concrètes liées au défi
 * 
 * Design: 4 situation cards in 2x2 grid
 * Each card has: header + 3 sections (Le Décor, L'Objectif, Les Ressources & Contraintes)
 */

interface SituationCardProps {
  canvasId: string;
  situationNumber: number;
}

function SituationCard({ canvasId, situationNumber }: SituationCardProps) {
  return (
    <div className="bg-white border-4 border-black flex flex-col h-full">
      {/* Card Header - Black background */}
      <div className="bg-black px-3 py-2 shrink-0">
        <p className="text-[13px] font-bold text-white uppercase tracking-tight">
          Situation #{situationNumber}
        </p>
      </div>

      {/* Card Content - 3 Sections */}
      <div className="flex-1 flex flex-col gap-2 p-4 min-h-0">
        {/* Le Décor */}
        <div className="flex flex-col gap-[2px] flex-1 min-h-0">
          <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
            Le Décor
          </label>
          <p className="text-[10px] text-[#4a5565] italic shrink-0">
            Où ? Quand ? Quel est le contexte général de cette scène ?
          </p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `situation-${situationNumber}-setting`,
              type: "textarea",
              label: "",
              placeholder: situationNumber === 1
                ? "Ex : Dans un centre de formation d'entreprise, un mardi matin de janvier 2026, une salle équipée de 15 ordinateurs"
                : "",
              rows: 2,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-[#f9fafb] border-2 border-[#99a1af] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* L'Objectif de la situation */}
        <div className="flex flex-col gap-[2px] flex-1 min-h-0">
          <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
            L'Objectif de la situation
          </label>
          <p className="text-[10px] text-[#4a5565] italic shrink-0">
            Que cherche-t-on à accomplir dans cette situation ? Quel est l'enjeu ?
          </p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `situation-${situationNumber}-objective`,
              type: "textarea",
              label: "",
              placeholder: situationNumber === 1
                ? "Ex : Former 15 employés à de nouvelles compétences numériques pour un projet de transformation digitale"
                : "",
              rows: 2,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-[#f9fafb] border-2 border-[#99a1af] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Les Ressources & Contraintes */}
        <div className="flex flex-col gap-[2px] flex-1 min-h-0">
          <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
            Les Ressources & Contraintes
          </label>
          <p className="text-[10px] text-[#4a5565] italic shrink-0">
            Quels moyens sont disponibles ? Quelles limitations existent ?
          </p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `situation-${situationNumber}-resources`,
              type: "textarea",
              label: "",
              placeholder: situationNumber === 1
                ? "Ex : Budget limité, plateforme e-learning existante, 3 heures disponibles, niveaux hétérogènes"
                : "",
              rows: 2,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-[#f9fafb] border-2 border-[#99a1af] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>
      </div>
    </div>
  );
}

export function SituationsCanvas({ canvas, className, teamName }: SituationsCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      {/* Subtitle */}
      <div className="px-3 md:px-6 pb-2 shrink-0">
        <p className="text-[12px] md:text-[14px] text-[#364153] leading-[18px] md:leading-[20px]">
          Créez 4 situations concrètes liées au défi — Ces décors serviront de contexte pour vos personas
        </p>
      </div>

      {/* Main Content - 4 Situation Cards in responsive grid */}
      <div className="flex-1 grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-3 px-3 md:px-6 pb-2 md:min-h-0">
        <SituationCard canvasId={canvas.id} situationNumber={1} />
        <SituationCard canvasId={canvas.id} situationNumber={2} />
        <SituationCard canvasId={canvas.id} situationNumber={3} />
        <SituationCard canvasId={canvas.id} situationNumber={4} />
      </div>

      {/* Footer */}
      <div className="border-t-2 border-[#d1d5dc] mx-6 pt-3 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>
  );
}