"use client";

import { cn } from "@/lib/utils";
import { CanvasField } from "../CanvasField";
import { DesktopOnlyGuard } from "@/components/ui";
import type { CanvasTemplate, FieldDefinition } from "@/lib/types";

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

/**
 * Scenario Generation Canvas Template (Template #11)
 * Générateur de Scénarios — Design Fiction
 * 5 scénarios rapides : Persona + Situation + Règle du monde → Scène concrète
 * 
 * Design: 5 horizontal scenario rows with columns:
 * - Number (black bg)
 * - Persona
 * - Situation
 * - Dans un monde où... (with yellow icon)
 * - Scène concrète : Que vit la persona ? (large)
 */

interface ScenarioRowProps {
  canvasId: string;
  scenarioNumber: number;
  fieldPrefix: string;
  fields: FieldDefinition[];
}

function ScenarioRow({ canvasId, scenarioNumber, fieldPrefix, fields }: ScenarioRowProps) {
  // Helper to find placeholder from canvas definitions
  const getPlaceholder = (suffix: string) => {
    // Look up the base field ID (e.g., "scenario-1-persona") from canvas-data
    // This allows us to reuse the placeholders defined there
    const baseId = `scenario-${scenarioNumber}-${suffix}`;
    return fields.find(f => f.id === baseId)?.placeholder;
  };

  return (
    <div className="bg-white border-[3px] border-black flex h-full min-h-0">
      {/* Number Column - Black */}
      <div className="bg-black w-[70px] shrink-0 flex items-center justify-center">
        <span className="text-[28px] font-bold text-white">{scenarioNumber}</span>
      </div>

      {/* Persona Column */}
      <div className="border-r-2 border-black flex flex-col gap-1 p-2 w-[120px] shrink-0">
        <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
          Persona
        </label>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}scenario-${scenarioNumber}-persona`,
            type: "textarea",
            label: "",
            rows: 2,
            placeholder: getPlaceholder("persona"),
          }}
          hideLabel
          className="flex-1 min-h-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Situation Column */}
      <div className="border-r-2 border-black flex flex-col gap-1 p-2 w-[120px] shrink-0">
        <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
          Situation
        </label>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}scenario-${scenarioNumber}-situation`,
            type: "textarea",
            label: "",
            rows: 2,
            placeholder: getPlaceholder("situation"),
          }}
          hideLabel
          className="flex-1 min-h-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Dans un monde où... Column */}
      <div className="border-r-2 border-black flex flex-col gap-1 p-2 w-[220px] shrink-0">
        <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
          Dans un monde où...
        </label>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}scenario-${scenarioNumber}-world-rule`,
            type: "textarea",
            label: "",
            rows: 2,
            placeholder: getPlaceholder("world-rule"),
          }}
          hideLabel
          className="flex-1 min-h-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Scène concrète Column - Large */}
      <div className="flex flex-col gap-1 p-2 flex-[2] min-w-0">
        <label className="text-[11px] font-bold text-[#0a0a0a] uppercase shrink-0">
          Scène concrète : que vit la persona ?
        </label>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}scenario-${scenarioNumber}-scene`,
            type: "textarea",
            label: "",
            rows: 2,
            placeholder: getPlaceholder("scene"),
          }}
          hideLabel
          className="flex-1 min-h-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full resize-none !rounded-none"
        />
      </div>
    </div>
  );
}

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

  return (
    <DesktopOnlyGuard>
      <div className={cn("h-full flex flex-col overflow-hidden", className)}>
        {/* Subtitle */}
        <div className="px-6 pb-2 shrink-0">
          <p className="text-[14px] text-[#364153] leading-[20px]">
            5 scénarios rapides : Persona + Situation + Règle du monde → Scène concrète
          </p>
        </div>

        {/* Main Content - 5 Scenario Rows */}
        <div className="flex-1 flex flex-col gap-2 px-6 pb-2 min-h-0">
          <ScenarioRow canvasId={canvas.id} scenarioNumber={1} fieldPrefix={fieldPrefix} fields={canvas.inputFields} />
          <ScenarioRow canvasId={canvas.id} scenarioNumber={2} fieldPrefix={fieldPrefix} fields={canvas.inputFields} />
          <ScenarioRow canvasId={canvas.id} scenarioNumber={3} fieldPrefix={fieldPrefix} fields={canvas.inputFields} />
          <ScenarioRow canvasId={canvas.id} scenarioNumber={4} fieldPrefix={fieldPrefix} fields={canvas.inputFields} />
          <ScenarioRow canvasId={canvas.id} scenarioNumber={5} fieldPrefix={fieldPrefix} fields={canvas.inputFields} />
        </div>

        {/* Italic quote */}
        <div className="px-6 pb-1 shrink-0">
          <p className="text-[11px] text-[#6a7282] italic text-center">
            Ce scénario n'est pas une solution. C'est une histoire crédible qui sert à faire émerger des idées.
          </p>
        </div>

        {/* Footer */}
        <div className="border-t-2 border-[#d1d5dc] mx-6 pt-2 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 ? `Page ${pageIndex}` : "Date :"}
            </span>
          </div>
        </div>
      </div>
    </DesktopOnlyGuard>
  );
}