"use client";

import { CanvasTemplate } from "@/lib/canvas-data";
import { DesktopOnlyGuard } from "@/components/ui";
import { useCanvasStore } from "@/lib/store";
import { cn } from "@/lib/utils";

const DEFAULT_PAGE_COUNT = 1;
const MIN_PAGE_COUNT = 1;
const MAX_PAGE_COUNT = 10; // Safety limit

interface MultiPageBenchmarkWrapperProps {
    canvas: CanvasTemplate;
    className?: string;
    teamName?: string;
    /** The benchmark component to render for each page */
    BenchmarkComponent: React.ComponentType<{
        canvas: CanvasTemplate;
        className?: string;
        teamName?: string;
        pageIndex: number;
        isMultiPage?: boolean;
    }>;
}

/**
 * Wrapper component that handles multi-page functionality for benchmark canvases.
 * Renders multiple instances of the benchmark component, each wrapped in a complete A3 canvas.
 * Each page is a complete A3 canvas with its own data.
 */
export function MultiPageBenchmarkWrapper({
    canvas,
    className = "",
    teamName,
    BenchmarkComponent,
}: MultiPageBenchmarkWrapperProps) {
    const { getCanvas, updateCanvasMetadata } = useCanvasStore();
    const canvasData = getCanvas(canvas.id);

    // Get page count from metadata, default to 1
    const pageCount = Math.min(
        Math.max((canvasData?.metadata?.pageCount as number) || DEFAULT_PAGE_COUNT, MIN_PAGE_COUNT),
        MAX_PAGE_COUNT
    );
    const pages = Array.from({ length: pageCount }, (_, i) => i + 1);

    const addPage = () => {
        if (pageCount >= MAX_PAGE_COUNT) return;
        updateCanvasMetadata(canvas.id, { pageCount: pageCount + 1 });
    };

    const removePage = () => {
        if (pageCount <= MIN_PAGE_COUNT) return;
        // Always remove the last page
        // The fields for that page will remain in the store but won't be rendered
        if (window.confirm(`Êtes-vous sûr de vouloir supprimer la page ${pageCount} ? Le contenu sera perdu.`)) {
            updateCanvasMetadata(canvas.id, { pageCount: pageCount - 1 });
        }
    };

    return (
        <DesktopOnlyGuard>
            <div className={cn("flex flex-col", className)}>
                {pages.map((pageIndex) => (
                    <div key={pageIndex} className="relative">
                        {/* Page separator - only show for pages > 1 */}
                        {pageIndex > 1 && (
                            <div className="flex items-center justify-center py-4 bg-gray-100 border-t-4 border-dashed border-gray-300 print:hidden">
                                <span className="text-sm text-gray-600 font-medium">
                                    Page {pageIndex} / {pageCount}
                                </span>
                                <button
                                    onClick={removePage}
                                    className="ml-4 px-3 py-1 bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-100 transition-colors text-xs flex items-center gap-1"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3">
                                        <path fillRule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clipRule="evenodd" />
                                    </svg>
                                    Supprimer
                                </button>
                            </div>
                        )}

                        {/* A3 Canvas Container for this page */}
                        <div className="canvas-a3-viewport">
                            <div
                                className="canvas-a3-fixed"
                                data-canvas-id={canvas.id}
                                data-page-index={pageIndex}
                            >
                                {/* Week Banner - Small text at top */}
                                <div className="text-center py-2 md:py-3 shrink-0">
                                    <span className="inline-block px-3 md:px-4 py-1 border border-black text-[10px] md:text-[12px] font-medium tracking-wide uppercase">
                                        Programme Pionniers — Semaine {canvas.week}
                                        {pageCount > 1 && (
                                            <span className="ml-2 text-[9px] font-normal">
                                                (Page {pageIndex}/{pageCount})
                                            </span>
                                        )}
                                    </span>
                                </div>

                                {/* Canvas Title Header */}
                                <div className="mx-4 md:mx-8 border-2 border-black shrink-0">
                                    <div className="flex flex-col items-center py-3 md:py-5 px-2">
                                        <div className="flex items-center justify-center gap-2 md:gap-4">
                                            {/* Number Badge */}
                                            <div className="w-8 h-8 md:w-10 md:h-10 bg-black text-white flex items-center justify-center font-bold text-[16px] md:text-[20px] shrink-0">
                                                {canvas.exerciseNumber}
                                            </div>
                                            {/* Title */}
                                            <h1 className="text-[18px] md:text-[32px] font-normal tracking-[0.5px] md:tracking-[1px] uppercase text-center">
                                                {canvas.title}
                                            </h1>
                                        </div>
                                        {/* Subtitle - shown directly under title */}
                                        {canvas.subtitle && (
                                            <p className="text-[12px] md:text-[14px] text-[#364153] mt-2 text-center">
                                                {canvas.subtitle}
                                            </p>
                                        )}
                                    </div>
                                </div>

                                {/* Canvas Body - The benchmark template content */}
                                <div className="flex-1 mx-4 md:mx-6 my-2 md:my-3 overflow-hidden">
                                    <BenchmarkComponent
                                        canvas={canvas}
                                        className="h-full border border-gray-200"
                                        teamName={teamName}
                                        pageIndex={pageIndex}
                                        isMultiPage={pageCount > 1}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                ))}

                {/* Add page button - shown below all canvases */}
                <div className="flex justify-center py-6 print:hidden">
                    <button
                        onClick={addPage}
                        disabled={pageCount >= MAX_PAGE_COUNT}
                        className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg shadow-sm hover:shadow transition-all flex items-center justify-center gap-2"
                        title={pageCount >= MAX_PAGE_COUNT ? `Maximum de ${MAX_PAGE_COUNT} pages atteint` : "Ajouter une page"}
                    >
                        <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-sm">Ajouter une page</span>
                    </button>
                </div>
            </div>
        </DesktopOnlyGuard>
    );
}