"use client";

import { CanvasTemplate } from "@/lib/canvas-data";
import { CanvasField } from "../CanvasField";
import { useCanvasStore } from "@/lib/store";

interface BenchmarkCrosssectorielCanvasProps {
    canvas: CanvasTemplate;
    className?: string;
    teamName?: string;
    /** Page index for multi-page support (1-indexed), defaults to 1 */
    pageIndex?: number;
    /** Whether this canvas is part of a multi-page set */
    isMultiPage?: boolean;
}

const DEFAULT_ROW_COUNT = 5;
const MIN_ROW_COUNT = 1;

function BenchmarkRow({
    canvasId,
    rowNumber,
    pageIndex,
    onDelete,
    canDelete
}: {
    canvasId: string;
    rowNumber: number;
    pageIndex: number;
    onDelete: () => void;
    canDelete: boolean;
}) {
    // Use page-indexed field IDs to keep data separate per page
    const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : '';

    return (
        <div className="grid grid-cols-[1fr_1fr_1fr_1fr_auto] gap-0 border-b border-[#d1d5dc] group">
            {/* Solutions / Acteurs existants */}
            <div className="bg-white border-r border-[#d1d5dc] px-2 py-1">
                <CanvasField
                    canvasId={canvasId}
                    field={{
                        id: `${fieldPrefix}solutions-${rowNumber}`,
                        type: "textarea",
                        label: "",
                        rows: 1,
                    }}
                    hideLabel
                    autoResize
                    className="h-full"
                    inputClassName="bg-transparent border-0 !p-0 text-[10px] leading-tight min-h-full resize-none !rounded-none block"
                />
            </div>

            {/* Bénéfices / Avantages */}
            <div className="bg-[#f0fdf4] border-r border-[#d1d5dc] px-2 py-1">
                <CanvasField
                    canvasId={canvasId}
                    field={{
                        id: `${fieldPrefix}benefits-${rowNumber}`,
                        type: "textarea",
                        label: "",
                        rows: 1,
                    }}
                    hideLabel
                    autoResize
                    className="h-full"
                    inputClassName="bg-transparent border-0 !p-0 text-[10px] leading-tight min-h-full resize-none !rounded-none block"
                />
            </div>

            {/* Points de douleur */}
            <div className="bg-[#fef2f2] border-r border-[#d1d5dc] px-2 py-1">
                <CanvasField
                    canvasId={canvasId}
                    field={{
                        id: `${fieldPrefix}painpoints-${rowNumber}`,
                        type: "textarea",
                        label: "",
                        rows: 1,
                    }}
                    hideLabel
                    autoResize
                    className="h-full"
                    inputClassName="bg-transparent border-0 !p-0 text-[10px] leading-tight min-h-full resize-none !rounded-none block"
                />
            </div>

            {/* Sources */}
            <div className="bg-[#f3f4f6] border-r border-[#d1d5dc] px-2 py-1">
                <CanvasField
                    canvasId={canvasId}
                    field={{
                        id: `${fieldPrefix}sources-${rowNumber}`,
                        type: "textarea",
                        label: "",
                        rows: 1,
                    }}
                    hideLabel
                    autoResize
                    className="h-full"
                    inputClassName="bg-transparent border-0 !p-0 text-[10px] leading-tight min-h-full resize-none !rounded-none block"
                />
            </div>

            {/* Delete button */}
            <div className="bg-white flex items-center justify-center w-8 print:hidden">
                {canDelete && (
                    <button
                        onClick={onDelete}
                        className="w-6 h-6 flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 rounded transition-colors"
                        title="Supprimer cette ligne"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
                            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                        </svg>
                    </button>
                )}
            </div>
        </div>
    );
}

export function BenchmarkCrosssectorielCanvas({
    canvas,
    className = "",
    teamName,
    pageIndex = 1,
    isMultiPage = false
}: BenchmarkCrosssectorielCanvasProps) {
    const { getCanvas, updateCanvasMetadata } = useCanvasStore();
    const canvasData = getCanvas(canvas.id);

    // Use page-specific row count key for multi-page support
    const rowCountKey = pageIndex > 1 ? `rowCount-page${pageIndex}` : 'rowCount';
    const rowCount = (canvasData?.metadata?.[rowCountKey] as number) || DEFAULT_ROW_COUNT;
    const rows = Array.from({ length: rowCount }, (_, i) => i + 1);

    const addRow = () => {
        updateCanvasMetadata(canvas.id, { [rowCountKey]: rowCount + 1 });
    };

    const removeRow = (rowNumber: number) => {
        if (rowCount <= MIN_ROW_COUNT) return;
        updateCanvasMetadata(canvas.id, { [rowCountKey]: rowCount - 1 });
    };

    return (
        <div className={`bg-white flex flex-col h-full ${className}`}>
            {/* Orange Info Banner - specific content for this canvas */}
            <div className="mx-6 mt-3 bg-[#ffedd4] border-2 border-[#f97316] py-2 px-3 text-center shrink-0">
                <span className="text-[#9a3412] text-[13px] font-bold uppercase tracking-wider">
                    💡 Secteurs différents, moments similaires — S'inspirer de solutions innovantes d'autres secteurs
                    {isMultiPage && pageIndex > 1 && (
                        <span className="ml-2 text-[11px] font-normal">(Page {pageIndex})</span>
                    )}
                </span>
            </div>

            {/* Main Content - Benchmark Table */}
            <div className="flex-1 px-6 py-3 flex flex-col min-h-0 overflow-hidden">
                {/* Table Header */}
                <div className="grid grid-cols-[1fr_1fr_1fr_1fr_auto] 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">Solutions / Acteurs Existants</span>
                    </div>
                    <div className="border-r border-[#d1d5dc] p-2 text-center">
                        <span className="text-[10px] font-bold text-[#4a5565] uppercase">Bénéfices / Avantages</span>
                        <p className="text-[8px] text-[#6b7280] italic mt-0.5">Ce qui fonctionne bien, ce qui ajoute de la valeur...</p>
                    </div>
                    <div className="border-r border-[#d1d5dc] p-2 text-center">
                        <span className="text-[10px] font-bold text-[#4a5565] uppercase">Points de douleur</span>
                        <p className="text-[8px] text-[#6b7280] italic mt-0.5">Ce qui est frustrant, manquant ou limitant...</p>
                    </div>
                    <div className="border-r border-[#d1d5dc] p-2 text-center">
                        <span className="text-[10px] font-bold text-[#4a5565] uppercase">Sources</span>
                    </div>
                    <div className="w-8 print:hidden"></div>
                </div>

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

                {/* Add Row Button */}
                <div className="flex justify-center mt-2 print:hidden">
                    <button
                        onClick={addRow}
                        className="px-6 py-2 bg-[#f97316] hover:bg-[#ea580c] text-white font-medium rounded-lg shadow-sm hover:shadow transition-all flex items-center justify-center gap-2"
                        title="Ajouter une ligne"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
                            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
                        </svg>
                        <span className="text-[12px]">Ajouter une ligne</span>
                    </button>
                </div>

                <div className="bg-[#f9fafb] border-2 border-[#d1d5dc] py-1 px-4 text-center shrink-0 mt-2">
                    <p className="text-[11px] text-[#6a7282] italic">
                        Explorer d'autres industries pour trouver des approches transférables à votre contexte
                    </p>
                </div>
            </div>

            {/* Footer */}
            <div className="px-6 py-2 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 ? `Page ${pageIndex}` : 'Date :'}
                </span>
            </div>
        </div>
    );
}