"use client";

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

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

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

  return (
    <div className="grid grid-cols-[1fr_1fr_1fr_160px] gap-0 border-b border-[#d1d5dc]">
      <div className="border-r border-[#d1d5dc] p-2 min-h-[80px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}hypothesis-${rowNumber}`,
            type: "textarea",
            label: "",
            placeholder: rowNumber === 1 ? 'Ex: Les consommateurs veulent vraiment du zéro déchet au quotidien (Lasaga)' : '',
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[11px] h-full resize-none !rounded-none"
        />
      </div>
      <div className="border-r border-[#d1d5dc] p-2 min-h-[80px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}why-believe-${rowNumber}`,
            type: "textarea",
            label: "",
            placeholder: rowNumber === 1 ? 'Tendance médiatique forte • Nos amis en parlent • Enquête en ligne' : '',
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[11px] h-full resize-none !rounded-none"
        />
      </div>
      <div className="border-r border-[#d1d5dc] p-2 min-h-[80px]">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: `${fieldPrefix}how-test-${rowNumber}`,
            type: "textarea",
            label: "",
            placeholder: rowNumber === 1 ? 'Observer le comportement en magasin • Analyser les abandons de panier' : '',
            rows: 3,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-transparent border-0 !p-0 text-[11px] h-full resize-none !rounded-none"
        />
      </div>
      <div className="p-2 flex flex-col justify-center gap-1">
        <label className="flex items-center gap-2 text-[11px] text-[#6a7282]">
          <input type="checkbox" className="w-3 h-3" />
          Non vérifié
        </label>
        <label className="flex items-center gap-2 text-[11px] text-[#6a7282]">
          <input type="checkbox" className="w-3 h-3" />
          Confirmé
        </label>
        <label className="flex items-center gap-2 text-[11px] text-[#6a7282]">
          <input type="checkbox" className="w-3 h-3" />
          Invalidé
        </label>
      </div>
    </div>
  );
}

export function AssumptionsTrackerCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: AssumptionsTrackerCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  return (
    <DesktopOnlyGuard>
      <div className={`bg-white flex flex-col h-full ${className}`}>
        {/* Main Content - Table */}
        <div className="flex-1 px-8 py-4 flex flex-col min-h-0 overflow-hidden">
          {/* Table Header */}
          <div className="grid grid-cols-[1fr_1fr_1fr_160px] gap-0 bg-[#f9fafb] border-2 border-[#d1d5dc] shrink-0">
            <div className="border-r border-[#d1d5dc] p-3 text-center">
              <span className="text-[12px] font-bold text-[#4a5565] uppercase">Hypothèse</span>
            </div>
            <div className="border-r border-[#d1d5dc] p-3 text-center">
              <span className="text-[12px] font-bold text-[#4a5565] uppercase">Pourquoi on y croit</span>
            </div>
            <div className="border-r border-[#d1d5dc] p-3 text-center">
              <span className="text-[12px] font-bold text-[#4a5565] uppercase">Comment la tester</span>
            </div>
            <div className="p-3 text-center">
              <span className="text-[12px] font-bold text-[#4a5565] uppercase">Statut</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, 6, 7].map((num) => (
              <HypothesisRow key={num} canvasId={canvas.id} rowNumber={num} pageIndex={pageIndex} />
            ))}
          </div>

          {/* Yellow Info Banner */}
          <div className="bg-[#fef3c7] border-2 border-[#f59e0b] py-2 px-4 text-center shrink-0 mt-4">
            <p className="text-[12px] text-[#92400e] italic">
              Ce canevas est conçu pour être itéré et mis à jour régulièrement au fil des découvertes terrain
            </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>
  );
}