"use client";

import { CanvasTemplate } from "@/lib/canvas-data";
import { CanvasField } from "../CanvasField";
import { DesktopOnlyGuard } from "@/components/ui";

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

interface TouchpointColumnProps {
  canvasId: string;
  number: number;
  momentPlaceholder: string;
  criticalPlaceholder: string;
  toTestPlaceholder: string;
  outOfScopePlaceholder: string;
}

function TouchpointColumn({
  canvasId,
  number,
  momentPlaceholder,
  criticalPlaceholder,
  toTestPlaceholder,
  outOfScopePlaceholder,
}: TouchpointColumnProps) {
  return (
    <div className="flex-1 border-2 border-[#d1d5dc] flex flex-col min-h-0">
      {/* Black Header */}
      <div className="bg-black py-3 text-center shrink-0">
        <span className="text-white text-[14px] font-bold uppercase">Touchpoint {number}</span>
      </div>

      {/* Content */}
      <div className="flex-1 p-4 flex flex-col gap-4 min-h-0">
        {/* Moment du parcours */}
        <div className="flex flex-col gap-1 shrink-0">
          <label className="text-[11px] font-bold text-[#4a5565] uppercase">Moment du parcours</label>
          <p className="text-[9px] text-[#99a1af] italic mb-1">{momentPlaceholder}</p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `touchpoint-${number}-moment`,
              type: "textarea",
              label: "",
              rows: 2,
            }}
            hideLabel
            className=""
            inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-2 text-[10px] resize-none !rounded-none"
          />
        </div>

        {/* Pourquoi critique */}
        <div className="flex flex-col gap-1 shrink-0">
          <label className="text-[11px] font-bold text-[#4a5565] uppercase">Pourquoi critique ?</label>
          <p className="text-[9px] text-[#99a1af] italic mb-1">{criticalPlaceholder}</p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `touchpoint-${number}-critical`,
              type: "textarea",
              label: "",
              rows: 2,
            }}
            hideLabel
            className=""
            inputClassName="bg-[#f9fafb] border-2 border-[#d1d5dc] !p-2 text-[10px] resize-none !rounded-none"
          />
        </div>

        {/* À tester */}
        <div className="flex-1 flex flex-col gap-1 min-h-0">
          <div className="bg-[#00a63e] px-2 py-1 text-center shrink-0">
            <span className="text-white text-[10px] font-bold uppercase">À tester ✓</span>
          </div>
          <p className="text-[9px] text-[#99a1af] italic mb-1">{toTestPlaceholder}</p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `touchpoint-${number}-to-test`,
              type: "textarea",
              label: "",
              rows: 4,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-[#f0fdf4] border-2 border-[#86efac] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Hors périmètre */}
        <div className="flex flex-col gap-1 shrink-0">
          <div className="bg-[#dc2626] px-2 py-1 text-center">
            <span className="text-white text-[10px] font-bold uppercase">Hors périmètre ✗</span>
          </div>
          <p className="text-[9px] text-[#99a1af] italic mb-1">{outOfScopePlaceholder}</p>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `touchpoint-${number}-out-of-scope`,
              type: "textarea",
              label: "",
              rows: 2,
            }}
            hideLabel
            className=""
            inputClassName="bg-[#fef2f2] border-2 border-[#fca5a5] !p-2 text-[10px] resize-none !rounded-none"
          />
        </div>
      </div>
    </div>
  );
}

export function TouchpointSelectionCanvas({
  canvas,
  className = "",
  teamName,
  pageIndex = 1,
  isMultiPage = false
}: TouchpointSelectionCanvasProps) {
  // Field ID prefix for multi-page support
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  // Calculate touchpoint numbers based on page index
  // Page 1: 1, 2, 3
  // Page 2: 4, 5, 6
  // etc.
  const startNumber = (pageIndex - 1) * 3 + 1;

  return (
    <DesktopOnlyGuard>
      <div className={`bg-white flex flex-col h-full ${className}`}>


        {/* Main Content - 3 Touchpoint Columns */}
        <div className="flex-1 px-8 py-4 flex gap-4 min-h-0 overflow-hidden">
          <TouchpointColumn
            canvasId={canvas.id}
            number={startNumber}
            momentPlaceholder={pageIndex === 1 ? "Ex: Découverte du challenge pendant la pause café (TotalEnergies)" : "Moment du parcours"}
            criticalPlaceholder={pageIndex === 1 ? "Ex: Moment de décision d'engagement" : "Pourquoi critique ?"}
            toTestPlaceholder={pageIndex === 1 ? "Ex: Notification • Format • Clarté" : "À tester"}
            outOfScopePlaceholder={pageIndex === 1 ? "Ex: Système de points complet" : "Hors périmètre"}
          />
          <TouchpointColumn
            canvasId={canvas.id}
            number={startNumber + 1}
            momentPlaceholder={pageIndex === 1 ? "Ex: Premier achat en magasin vrac (Lasaosa)" : "Moment du parcours"}
            criticalPlaceholder={pageIndex === 1 ? "Ex: Expérience fondatrice pour la fidélisation" : "Pourquoi critique ?"}
            toTestPlaceholder={pageIndex === 1 ? "Ex: Signalétique • Accompagnement • Contenants" : "À tester"}
            outOfScopePlaceholder={pageIndex === 1 ? "Ex: Programme fidélité • Livraison" : "Hors périmètre"}
          />
          <TouchpointColumn
            canvasId={canvas.id}
            number={startNumber + 2}
            momentPlaceholder={pageIndex === 1 ? "Ex: Ouverture de compte bancaire (CASA)" : "Moment du parcours"}
            criticalPlaceholder={pageIndex === 1 ? "Ex: Première impression qui crée confiance" : "Pourquoi critique ?"}
            toTestPlaceholder={pageIndex === 1 ? "Ex: Parcours 3 min • Clarté • Ton" : "À tester"}
            outOfScopePlaceholder={pageIndex === 1 ? "Ex: Système de paiement réel • KYC complet" : "Hors périmètre"}
          />
        </div>

        {/* Info Banner */}
        <div className="mx-8 mb-4 bg-[#fef3c7] border-2 border-[#f59e0b] py-2 px-4 text-center shrink-0">
          <p className="text-[11px] text-[#92400e]">
            <strong>Note :</strong> Sélectionner 2-4 touchpoints prioritaires qui révèlent le mieux la valeur du concept
          </p>
        </div>

        {/* Footer */}
        <div className="px-8 py-3 border-t-2 border-[#d1d5dc] flex justify-between items-center shrink-0">
          <span className="text-[12px] text-[#6a7282]">Équipe : {teamName || ''}</span>
          <span className="text-[12px] text-[#6a7282]">© Mathieu Aguesse 2026</span>
          <span className="text-[12px] text-[#6a7282]">
            {isMultiPage && pageIndex > 1 ? `Page ${pageIndex}` : "Date :"}
          </span>
        </div>
      </div>
    </DesktopOnlyGuard>
  );
}