"use client";

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

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

/**
 * Scenario Impact Canvas Template (Template #15)
 * Comprenez ce que chaque scénario change pour l'entreprise partenaire
 * 
 * Design: 2x2 grid (Obsolète, Critique, Risques, Opportunités)
 */

export function ScenarioImpactCanvas({ canvas, className, teamName, pageIndex = 1, isMultiPage = false }: ScenarioImpactCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  // 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]">
          Comprenez ce que chaque scénario change pour l'entreprise partenaire
        </p>
      </div>

      {/* Scenario Title - Black Background */}
      <div className="mx-3 md:mx-6 bg-black p-2 md:p-3 mb-3 shrink-0">
        <div className="flex justify-between items-start">
          <label className="text-[11px] text-white uppercase block mb-1">
            Scénario analysé :
          </label>
          {isMultiPage && pageIndex > 1 && (
            <span className="text-[11px] font-bold text-white uppercase">Page {pageIndex}</span>
          )}
        </div>
        <CanvasField
          canvasId={canvas.id}
          field={{ id: `${fieldPrefix}scenario-name`, type: "text", label: "" }}
          hideLabel
          className="h-[24px]"
          inputClassName="bg-white border-0 !p-2 text-[12px] h-full !rounded-none"
        />
      </div>

      {/* 2x2 Grid - stacks on mobile */}
      <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">
        {/* 1. Ce qui devient obsolète */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[32px] h-[32px] shrink-0 flex items-center justify-center">
              <span className="text-[14px] font-bold text-white">1</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Ce qui devient obsolète</h3>
              <p className="text-[10px] text-[#4a5565]">Actifs, pratiques, hypothèses qui ne fonctionnent plus</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}obsolete`,
              type: "textarea",
              label: "",
              placeholder: "• Quels actifs perdent leur valeur ?\n• Quelles pratiques ne sont plus adaptées ?\n• Quelles croyances deviennent fausses ?",
              rows: 4,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* 2. Ce qui devient critique */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[32px] h-[32px] shrink-0 flex items-center justify-center">
              <span className="text-[14px] font-bold text-white">2</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Ce qui devient critique</h3>
              <p className="text-[10px] text-[#4a5565]">Capacités, compétences, ressources essentielles</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}critical`,
              type: "textarea",
              label: "",
              placeholder: "• Quelles nouvelles compétences sont requises ?\n• Quelles capacités deviennent stratégiques ?\n• Quelles ressources sont indispensables ?",
              rows: 4,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* 3. Nouveaux risques */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[32px] h-[32px] shrink-0 flex items-center justify-center">
              <span className="text-[14px] font-bold text-white">3</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Nouveaux risques</h3>
              <p className="text-[10px] text-[#4a5565]">Menaces émergentes dans ce futur</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}risks`,
              type: "textarea",
              label: "",
              placeholder: "• Quelles nouvelles menaces apparaissent ?\n• Qu'est-ce qui pourrait mal tourner ?\n• Quelles vulnérabilités émergent ?",
              rows: 4,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* 4. Nouvelles opportunités */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[32px] h-[32px] shrink-0 flex items-center justify-center">
              <span className="text-[14px] font-bold text-white">4</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Nouvelles opportunités</h3>
              <p className="text-[10px] text-[#4a5565]">Zones de potentiel et d'innovation</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}opportunities`,
              type: "textarea",
              label: "",
              placeholder: "• Quels nouveaux espaces s'ouvrent ?\n• Quelles innovations deviennent possibles ?\n• Quelles nouvelles positions créer de la valeur ?",
              rows: 4,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] 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>Date :</span>
        </div>
      </div>
    </div>
  );
}