"use client";

import { useEffect, useState, useCallback, use, useMemo } from "react";
import { useRouter } from "next/navigation";
import { allCanvases } from "@/lib/canvas-data";
import { CanvasViewer } from "@/components/canvas/CanvasViewer";
import { useAuth } from "@/components/auth";
import { canvasDB } from "@/lib/db";
import { Loader2, ArrowLeft, Printer } from "lucide-react";
import type { DraggableElement, CanvasTemplate } from "@/lib/types";

// Type for the page params
interface PageProps {
    params: Promise<{
        canvasId: string;
    }>;
}

interface TeamCanvasData {
    teamId: string;
    teamName: string;
    data: {
        fields: Record<string, string | string[] | null>;
        elements: DraggableElement[];
        metadata: any;
    } | null;
}

export default function ExportCanvasPage({ params }: PageProps) {
    // Unwrap params using React.use()
    const resolvedParams = use(params);
    const router = useRouter();
    const { isAdmin, isLoading: authLoading, allTeams } = useAuth();

    const [loadingState, setLoadingState] = useState<"loading" | "ready" | "error">("loading");
    const [teamCanvases, setTeamCanvases] = useState<TeamCanvasData[]>([]);
    const [targetCanvas, setTargetCanvas] = useState<CanvasTemplate | undefined>(undefined);
    const [loadingProgress, setLoadingProgress] = useState(0);

    // Filter out admin team
    const teamsList = useMemo(() => allTeams.filter(team =>
        !team.name.toLowerCase().includes('admin') &&
        !team.name.toLowerCase().includes('administrateur')
    ), [allTeams]);

    useEffect(() => {
        const canvas = allCanvases.find(c => c.id === resolvedParams.canvasId);
        setTargetCanvas(canvas);
    }, [resolvedParams.canvasId]);

    const loadAllTeamsData = useCallback(async () => {
        if (!targetCanvas || teamsList.length === 0) return;

        setLoadingState("loading");
        const results: TeamCanvasData[] = [];
        let loadedCount = 0;

        try {
            for (const team of teamsList) {
                // Update progress
                setLoadingProgress(Math.round((loadedCount / teamsList.length) * 100));

                // Fetch specifically this canvas for this team
                const canvasData = await canvasDB.get(team.id, targetCanvas.id);

                results.push({
                    teamId: team.id,
                    teamName: team.name,
                    data: canvasData
                });

                loadedCount++;
            }

            setTeamCanvases(results);
            setLoadingState("ready");
        } catch (error) {
            console.error("Error loading team data:", error);
            setLoadingState("error");
        }
    }, [targetCanvas, teamsList]);

    // Auth check and initial load
    useEffect(() => {
        if (!authLoading) {
            if (!isAdmin) {
                router.push("/");
                return;
            }

            if (targetCanvas) {
                loadAllTeamsData();
            }
        }
    }, [authLoading, isAdmin, router, targetCanvas, loadAllTeamsData]);

    if (!targetCanvas) {
        return (
            <div className="flex items-center justify-center min-h-screen">
                <div className="text-center">
                    <h1 className="text-xl font-bold mb-2">Canevas non trouvé</h1>
                    <button
                        onClick={() => router.back()}
                        className="text-blue-600 hover:underline"
                    >
                        Retour
                    </button>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-white">

            <style jsx global>{`
         @media print {
           @page {
             size: A3 landscape;
             margin: 0;
           }
           body {
             margin: 0;
             padding: 0;
             -webkit-print-color-adjust: exact !important;
             print-color-adjust: exact !important;
           }
           .no-print {
             display: none !important;
           }
           .team-section {
             break-after: page;
             page-break-after: always;
             height: 100vh;
             width: 100vw;
             display: flex;
             align-items: center;
             justify-content: center;
             overflow: hidden;
           }
           /* Scale down canvas to ensure it fits printable area regardless of browser margins */
           .canvas-a3-fixed {
             transform: scale(0.95) !important;
             transform-origin: center center !important;
             box-shadow: none !important;
             margin: 0 !important;
           }
         }
         
         /* Screen Styles */
         @media screen {
           .team-section {
             margin-bottom: 4rem;
             border-bottom: 4px dashed #ccc;
             padding-bottom: 2rem;
           }
         }
       `}</style>

            {/* Control Bar (Hidden on Print) */}
            <div className="no-print sticky top-0 z-50 bg-white border-b border-gray-200 p-4 shadow-sm flex items-center justify-between">
                <div className="flex items-center gap-4">
                    <button
                        onClick={() => router.back()}
                        className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                        title="Retour"
                    >
                        <ArrowLeft className="w-5 h-5" />
                    </button>
                    <div>
                        <h1 className="text-lg font-bold">Export Global : {targetCanvas.title}</h1>
                        <p className="text-xs text-gray-500">
                            {teamsList.length} équipes • {loadingState === 'ready' ? 'Prêt à imprimer' : `Chargement ${loadingProgress}%`}
                        </p>
                    </div>
                </div>

                <div className="flex items-center gap-2">
                    {loadingState === 'loading' ? (
                        <div className="flex items-center gap-2 text-blue-600 px-4 py-2 bg-blue-50 rounded-lg">
                            <Loader2 className="w-4 h-4 animate-spin" />
                            <span className="text-sm font-medium">Chargement des données...</span>
                        </div>
                    ) : (
                        <button
                            onClick={() => window.print()}
                            className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors shadow-sm"
                        >
                            <Printer className="w-4 h-4" />
                            Imprimer / PDF
                        </button>
                    )}
                </div>
            </div>

            {/* Main Content */}
            <div className="bg-gray-50 min-h-screen">
                {loadingState === 'loading' && (
                    <div className="flex flex-col items-center justify-center py-20">
                        <Loader2 className="w-8 h-8 animate-spin text-gray-400 mb-4" />
                        <p className="text-gray-500">Récupération des données pour {teamsList.length} équipes...</p>
                    </div>
                )}

                {loadingState === 'ready' && (
                    <div className="bg-white">
                        {teamCanvases.map((teamCanvas) => (
                            <div key={teamCanvas.teamId} className="team-section">
                                <div className="p-0 flex justify-center bg-white print:p-0">
                                    <div className="w-full max-w-[1587px]">
                                        <IsolatedCanvasViewer
                                            canvas={targetCanvas}
                                            teamData={teamCanvas.data}
                                            uniqueId={`${targetCanvas.id}-${teamCanvas.teamId}`}
                                            teamName={teamCanvas.teamName}
                                        />
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

// Helper wrapper to isolate store state
import { useCanvasStore } from "@/lib/store";

function IsolatedCanvasViewer({
    canvas,
    teamData,
    uniqueId,
    teamName
}: {
    canvas: CanvasTemplate;
    teamData: any;
    uniqueId: string;
    teamName: string;
}) {
    const initializeCanvas = useCanvasStore(state => state.initializeCanvas);
    const updateCanvasField = useCanvasStore(state => state.updateCanvasField);
    const addElement = useCanvasStore(state => state.addElement);

    // Initialize this specific instance in the store
    useEffect(() => {
        // 1. Initialize with unique ID
        initializeCanvas(uniqueId, canvas.templateId, canvas.week, canvas.day, canvas.title);

        // 2. Populate data
        if (teamData) {
            if (teamData.fields) {
                Object.entries(teamData.fields).forEach(([key, value]) => {
                    if (value) updateCanvasField(uniqueId, key, value as string);
                });
            }
            if (teamData.elements) {
                teamData.elements.forEach((element: any) => {
                    addElement(uniqueId, element);
                });
            }
        }
    }, [uniqueId, canvas, teamData, initializeCanvas, updateCanvasField, addElement]);

    // Create a modified canvas object with the unique ID
    const uniqueCanvas = {
        ...canvas,
        id: uniqueId // Important: override ID so Viewer reads correct store entry
    };

    return <CanvasViewer canvas={uniqueCanvas} teamName={teamName} />;
}