"use client";

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

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

function BenchmarkRow({ canvasId, rowNumber, pageIndex = 1 }: { canvasId: string; rowNumber: number; pageIndex?: number }) {
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  return (
    <div className="grid grid-cols-5 gap-0 border-b border-[#d1d5dc]">
      {/* Moment du parcours */}
      <div className="bg-[#faf5ff] border-r border-[#d1d5dc] p-2 min-h-[90px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}moment-${rowNumber}`,
            type: "textarea",
            label: "",
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Solutions / Acteurs existants */}
      <div className="bg-white border-r border-[#d1d5dc] p-2 min-h-[90px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}solutions-${rowNumber}`,
            type: "textarea",
            label: "",
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Ce qui fonctionne bien */}
      <div className="bg-[#f0fdf4] border-r border-[#d1d5dc] p-2 min-h-[90px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}works-${rowNumber}`,
            type: "textarea",
            label: "",
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Ce qui est frustrant ou manquant */}
      <div className="bg-[#fef2f2] border-r border-[#d1d5dc] p-2 min-h-[90px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}frustrating-${rowNumber}`,
            type: "textarea",
            label: "",
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Opportunités */}
      <div className="bg-[#fefce8] p-2 min-h-[90px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}opportunities-${rowNumber}`,
            type: "textarea",
            label: "",
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[10px] h-full resize-none !rounded-none"
        />
      </div>
    </div>
  );
}

export function BenchmarkJourneyCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: BenchmarkJourneyCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  return (
    <DesktopOnlyGuard>
      <div className={`bg-white flex flex-col h-full ${className}`}>
        {/* Main Content - Benchmark Table */}
        <div className="flex-1 px-8 py-4 flex flex-col min-h-0 overflow-hidden">
          {/* Concept/Competitor Subject Section */}
          <div className="mb-4 bg-[#f9fafb] border-2 border-[#d1d5dc] p-3 shrink-0">
            <label className="text-[11px] font-bold text-[#4a5565] uppercase block mb-1">
              Concept Analysé :
            </label>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}benchmark-subject`,
                type: "text",
                label: "",
                placeholder: "Ex: Application Uber Eats (parcours de commande)...",
              }}
              hideLabel
              className=""
              inputClassName="bg-transparent border-0 !p-0 text-[12px] h-auto !rounded-none font-medium"
            />
          </div>

          {/* Table Header */}
          <div className="grid grid-cols-5 gap-0 bg-[#f9fafb] border-2 border-[#d1d5dc] shrink-0">
            <div className="border-r border-[#d1d5dc] p-2 text-center">
              <span className="text-[10px] font-bold text-[#4a5565] uppercase">Moment du Parcours</span>
            </div>
            <div className="border-r border-[#d1d5dc] p-2 text-center">
              <span className="text-[10px] font-bold text-[#4a5565] uppercase">Solutions / Acteurs Existants</span>
            </div>
            <div className="border-r border-[#d1d5dc] p-2 text-center">
              <span className="text-[10px] font-bold text-[#4a5565] uppercase">Ce qui fonctionne bien</span>
            </div>
            <div className="border-r border-[#d1d5dc] p-2 text-center">
              <span className="text-[10px] font-bold text-[#4a5565] uppercase">Ce qui est frustrant ou manquant</span>
            </div>
            <div className="p-2 text-center">
              <span className="text-[10px] font-bold text-[#4a5565] uppercase">Opportunités</span>
            </div>
          </div>

          {/* Table Body */}
          <div className="flex-1 border-x-2 border-b-2 border-[#d1d5dc] overflow-auto min-h-0">
            {[1, 2, 3, 4, 5].map((num) => (
              <BenchmarkRow key={num} canvasId={canvas.id} rowNumber={num} pageIndex={pageIndex} />
            ))}
          </div>

          {/* Info Banner */}
          <div className="bg-[#f9fafb] border-2 border-[#d1d5dc] py-2 px-4 text-center shrink-0 mt-4">
            <p className="text-[11px] text-[#6a7282] italic">
              Comparaison orientée expérience, pas fonctionnalités — privilégier la synthèse à l'exhaustivité
            </p>
          </div>
        </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>
  );
}