"use client";

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

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

interface PitchSectionProps {
  number: string;
  title: string;
  description: string;
  canvasId: string;
  fieldId: string;
}

function PitchSection({ number, title, description, canvasId, fieldId }: PitchSectionProps) {
  return (
    <div className="border-l-[3px] border-black pl-2 flex flex-col h-full min-h-0">
      <h3 className="text-[10px] font-bold text-[#0a0a0a] leading-[13px] tracking-[0.05px] uppercase flex-shrink-0">
        {number}. {title}
      </h3>
      <p className="text-[8px] text-[#6a7282] italic leading-[10px] tracking-[-0.1px] flex-shrink-0">
        {description}
      </p>
      <CanvasField
        canvasId={canvasId}
        field={{
          id: fieldId,
          type: "textarea",
          label: "",
          placeholder: "Vos notes ici...",
          rows: 2,
        }}
        className="flex-1 min-h-0"
      />
    </div>
  );
}

/**
 * Pitch Canvas Template
 * Structured layout for preparing inter-team pitch presentations
 */
export function PitchCanvas({ canvas, className, teamName }: PitchCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      {/* Subtitle description */}
      <div className="px-2 md:px-3 pt-2 pb-1.5 border-b-4 border-black flex-shrink-0">
        <p className="text-[9px] md:text-[10px] text-[#364153] leading-[12px] md:leading-[13px] tracking-[-0.1px]">
          Préparer un pitch structuré pour présenter vos concepts aux autres équipes
        </p>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col gap-1.5 p-2 min-h-0 overflow-hidden">
        {/* Contexte du Pitch */}
        <div className="bg-white border-[3px] border-black px-3 py-1.5 flex-shrink-0">
          <div className="flex items-center gap-2 mb-0.5">
            <span className="text-[11px]">📋</span>
            <h2 className="text-[12px] font-bold text-[#0a0a0a] leading-[16px] tracking-[-0.3px] uppercase">
              Contexte du Pitch
            </h2>
          </div>
          <div className="text-[10px] text-[#364153] leading-[13px] tracking-[-0.1px]">
            <p>Durée : <span className="font-bold">2 minutes maximum</span></p>
            <p>Objectif : Présenter le défi et le partenaire, puis articuler la tension identifiée et son importance.</p>
          </div>
        </div>

        {/* Structure du Pitch */}
        <div className="bg-white border-[3px] border-black px-2 py-1 flex-1 flex flex-col min-h-0">
          <h2 className="text-[11px] font-bold text-[#0a0a0a] leading-[14px] tracking-[-0.3px] uppercase mb-1 flex-shrink-0">
            Structure du Pitch (2 minutes)
          </h2>

          <div className="flex-1 grid grid-rows-4 gap-1">
            <PitchSection
              number="0"
              title="Présentation du défi et du partenaire (20 sec)"
              description="Quel est le défi ? Qui est le partenaire et quel est son contexte ?"
              canvasId={canvas.id}
              fieldId="presentation-defi"
            />

            <PitchSection
              number="1"
              title="La tension ou le paradoxe identifié (30 sec)"
              description="Quelle contradiction ou tension avez-vous découverte dans le système ?"
              canvasId={canvas.id}
              fieldId="tension-paradoxe"
            />

            <PitchSection
              number="2"
              title="Pourquoi c'est important (30 sec)"
              description="En quoi cette tension est-elle significative pour le défi ? Quels enjeux révèle-t-elle ?"
              canvasId={canvas.id}
              fieldId="pourquoi-important"
            />

            <PitchSection
              number="3"
              title="Ce que vous allez explorer (40 sec)"
              description="Quelle direction allez-vous prendre pour explorer cette tension dans la suite de l'atelier ?"
              canvasId={canvas.id}
              fieldId="exploration"
            />
          </div>
        </div>

        {/* Notes & Retours des Autres Équipes */}
        <div className="bg-black px-2 py-1 flex-shrink-0">
          <h2 className="text-[10px] font-bold text-white leading-[13px] tracking-[0.05px] uppercase mb-0.5">
            Notes & Retours des Autres Équipes
          </h2>
          <div className="bg-[#1a1a1a] border border-[#333]">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "notes-retours",
                type: "textarea",
                label: "",
                placeholder: "Notez ici les retours des autres équipes...",
                rows: 2,
              }}
              className="h-[35px] [&_textarea]:bg-[#1a1a1a] [&_textarea]:text-white [&_textarea]:placeholder-gray-500 [&_textarea]:border-0"
            />
          </div>
        </div>
      </div>

      {/* Canvas-specific Footer */}
      <div className="border-t-2 border-[#d1d5dc] px-3 py-1.5 flex-shrink-0">
        <div className="flex justify-between items-center text-[10px] text-[#6a7282] leading-[13px]">
          <div className="flex items-center gap-1">
            <span>Équipe : {teamName || ''}</span>
          </div>
          <span>© Mathieu Aguesse 2026</span>
          <div className="flex items-center gap-1">
            <span>Date :</span>
            <span className="border-b border-gray-300 min-w-[50px] inline-block">&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  );
}