"use client";

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

interface ScenarioCardCanvasProps {
  canvas: CanvasTemplate;
  teamName?: string;
  className?: string;
  pageIndex?: number;
  isMultiPage?: boolean;
}

/**
 * Scenario Card / Final Scenario Writing Canvas Template (Template #14)
 * Créez un récit en 3 temps pour rendre le scénario vivant et appropriable
 * 
 * Design: Title input + 3 story sections (Accroche, Explication, Question)
 * Supports multi-page: each page uses page-prefixed field IDs.
 */

export function ScenarioCardCanvas({ canvas, className, teamName, pageIndex = 1, isMultiPage = false }: ScenarioCardCanvasProps) {
  // Use page-indexed field IDs to keep data separate per page
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : '';

  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 un récit en 3 temps pour rendre le scénario vivant et appropriable
        </p>
      </div>

      {/* Info Banner — only show on page 1 */}
      {pageIndex === 1 && (
        <div className="mx-3 md:mx-6 mb-3 bg-[#cbfbf1] border-2 border-[#009689] px-3 md:px-4 py-2 shrink-0">
          <p className="text-[11px] md:text-[13px] font-bold text-[#0b4f4a] text-center uppercase">
            📋 Créez 1 page par scénario sélectionné
          </p>
        </div>
      )}

      {/* Page indicator for multi-page */}
      {isMultiPage && (
        <div className="px-3 md:px-6 pb-1 shrink-0">
          <span className="inline-block px-2 py-0.5 bg-gray-100 text-[10px] text-gray-500 font-medium rounded">
            Scénario {pageIndex}
          </span>
        </div>
      )}

      {/* Title Section - Black Background */}
      <div className="mx-3 md:mx-6 bg-black border-4 border-black p-2 md:p-3 shrink-0">
        <label className="text-[11px] text-white uppercase block mb-1">
          Titre du scénario
        </label>
        <CanvasField
          canvasId={canvas.id}
          field={{
            id: `${fieldPrefix}scenario-title`,
            type: "text",
            label: "",
          }}
          hideLabel
          className="h-[28px]"
          inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[12px] h-full !rounded-none"
        />
      </div>

      {/* Main Content - 3 Story Sections */}
      <div className="flex-1 flex flex-col gap-3 px-6 py-3 min-h-0">
        {/* Section 1: Accroche - Gray Background */}
        <div className="flex-1 bg-[#f9fafb] border-4 border-black p-4 min-h-0 flex flex-col">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[16px] font-bold text-white">1</span>
            </div>
            <div>
              <h3 className="text-[16px] font-bold text-[#0a0a0a] uppercase">
                Accroche — L'événement déclencheur
              </h3>
              <p className="text-[11px] text-[#4a5565] italic">
                Un événement qui paraît très réel, avec des références au présent (marques, personnages, lieux connus)
              </p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}scenario-hook`,
              type: "textarea",
              label: "",
              placeholder: 'Ex: "Carrefour annonce la fermeture de tous ses rayons fromage..."',
              rows: 3,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#99a1af] !p-3 text-[11px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Section 2: Explication - White Background */}
        <div className="flex-1 bg-white border-4 border-black p-4 min-h-0 flex flex-col">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[16px] font-bold text-white">2</span>
            </div>
            <div>
              <h3 className="text-[16px] font-bold text-[#0a0a0a] uppercase">
                Explication — Le nouveau monde
              </h3>
              <p className="text-[11px] text-[#4a5565] italic">
                En quoi ce monde est-il différent d'aujourd'hui ? Qu'est-ce qui a changé dans les pratiques, valeurs, règles ?
              </p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}scenario-explanation`,
              type: "textarea",
              label: "",
              placeholder: 'Ex: "Les consommateurs privilégient désormais des circuits ultra-locaux..."',
              rows: 3,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#99a1af] !p-3 text-[11px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Section 3: Question de débat - Gray Background */}
        <div className="flex-1 bg-[#f9fafb] border-4 border-black p-4 min-h-0 flex flex-col">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[16px] font-bold text-white">3</span>
            </div>
            <div>
              <h3 className="text-[16px] font-bold text-[#0a0a0a] uppercase">
                Question de débat
              </h3>
              <p className="text-[11px] text-[#4a5565] italic">
                Une question ouverte pour s'approprier le scénario et imaginer les implications
              </p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}scenario-debate-question`,
              type: "textarea",
              label: "",
              placeholder: 'Ex: "Comment votre organisation pourrait-elle créer de la valeur dans ce contexte ?"',
              rows: 3,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#99a1af] !p-3 text-[11px] h-full resize-none !rounded-none"
          />
        </div>
      </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>
            {isMultiPage && pageIndex > 1 ? `Scénario ${pageIndex}` : "Date :"}
          </span>
        </div>
      </div>
    </div>
  );
}