"use client";

import { useEffect, useState, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { allCanvases, getCanvasesByWeek, getDaysForWeek } from "@/lib/canvas-data";
import { CanvasViewer } from "@/components/canvas/CanvasViewer";
import { useAuth } from "@/components/auth";
import { useCanvasStore } from "@/lib/store";
import { loadTeamCanvasData } from "@/lib/db";
import type { Week } from "@/lib/types";

/**
 * Dedicated print page that renders all canvases with full content
 * This page is opened by the "Imprimer tous les canevas" button
 * It loads all saved canvas data from Supabase before rendering
 * 
 * Supports optional ?teamId= parameter for admins viewing other teams
 */
export default function PrintAllPage() {
    const searchParams = useSearchParams();
    const teamIdOverride = searchParams.get("teamId");

    const [loadingState, setLoadingState] = useState<"auth" | "loading" | "ready" | "error">("auth");
    const [loadingMessage, setLoadingMessage] = useState("Chargement de l'authentification...");
    const [printTriggered, setPrintTriggered] = useState(false);
    const [loadedCanvasCount, setLoadedCanvasCount] = useState(0);

    const { teamId: authTeamId, isLoading: authLoading, user, profile } = useAuth();

    // Use override teamId if provided (for admin viewing other teams), otherwise use auth teamId
    const effectiveTeamId = teamIdOverride || authTeamId;

    // Debug auth state
    useEffect(() => {
        console.log("[PrintAll] Auth state:", {
            authTeamId,
            teamIdOverride,
            effectiveTeamId,
            userId: user?.id,
            userEmail: user?.email,
            profileTeamId: profile?.team_id,
            isLoading: authLoading
        });
    }, [authTeamId, teamIdOverride, effectiveTeamId, user, profile, authLoading]);

    // Get store actions directly
    const initializeCanvas = useCanvasStore(state => state.initializeCanvas);
    const updateCanvasField = useCanvasStore(state => state.updateCanvasField);
    const addElement = useCanvasStore(state => state.addElement);
    const getCanvas = useCanvasStore(state => state.getCanvas);
    const markAsSaved = useCanvasStore(state => state.markAsSaved);

    // Load all canvas data from Supabase
    const loadAllData = useCallback(async () => {
        if (!effectiveTeamId) {
            setLoadingMessage("Erreur: Aucune équipe trouvée. Veuillez vous reconnecter.");
            setLoadingState("error");
            return;
        }

        console.log(`[PrintAll] Starting load for team: ${effectiveTeamId}`);
        setLoadingMessage("Initialisation des canevas...");
        setLoadingState("loading");

        // First, initialize ALL canvases in the store
        for (const canvas of allCanvases) {
            initializeCanvas(canvas.id, canvas.templateId, canvas.week, canvas.day, canvas.title);
        }
        console.log(`[PrintAll] Initialized ${allCanvases.length} canvases in store`);

        setLoadingMessage("Chargement des données depuis la base de données...");

        try {
            // Load all saved data from Supabase
            const savedData = await loadTeamCanvasData(effectiveTeamId);
            const savedCount = Object.keys(savedData).length;

            console.log(`[PrintAll] Loaded ${savedCount} canvases from Supabase:`, Object.keys(savedData));

            if (savedCount === 0) {
                console.warn("[PrintAll] No saved data found in Supabase!");
                setLoadingMessage("Aucune modification trouvée. Affichage des canevas vides...");
            } else {
                setLoadingMessage(`Application des modifications (${savedCount} canevas modifiés)...`);
            }

            // Apply saved data to the store
            let processedCount = 0;
            let totalFieldsSet = 0;
            for (const [canvasId, data] of Object.entries(savedData)) {
                // Update fields
                if (data.fields) {
                    const fieldEntries = Object.entries(data.fields);
                    console.log(`[PrintAll] Canvas ${canvasId}: ${fieldEntries.length} fields`);

                    for (const [fieldId, value] of fieldEntries) {
                        if (value !== null && value !== undefined && value !== "") {
                            updateCanvasField(canvasId, fieldId, value);
                            totalFieldsSet++;
                        }
                    }
                }

                // Add elements (for drag-drop canvases)
                if (data.elements && data.elements.length > 0) {
                    for (const element of data.elements) {
                        addElement(canvasId, element);
                    }
                    console.log(`[PrintAll] Canvas ${canvasId}: ${data.elements.length} elements`);
                }

                processedCount++;
                setLoadedCanvasCount(processedCount);
            }

            // Mark as saved to prevent unsaved changes warnings
            markAsSaved();

            console.log(`[PrintAll] Summary: ${processedCount} canvases, ${totalFieldsSet} total fields set`);

            // Verify store state - check first canvas with data
            if (Object.keys(savedData).length > 0) {
                const firstCanvasId = Object.keys(savedData)[0];
                const storeCanvas = getCanvas(firstCanvasId);
                console.log(`[PrintAll] Verification - store state for ${firstCanvasId}:`, storeCanvas?.fields);
            }

            setLoadingMessage("Préparation de l'impression...");

            // Give React time to re-render with the new data
            await new Promise(resolve => setTimeout(resolve, 1000));

            setLoadingState("ready");

        } catch (error) {
            console.error("[PrintAll] Failed to load canvas data:", error);
            setLoadingMessage("Erreur lors du chargement des données. Veuillez réessayer.");
            setLoadingState("error");
        }
    }, [effectiveTeamId, initializeCanvas, updateCanvasField, addElement, markAsSaved, getCanvas]);

    // Start loading when auth is ready
    useEffect(() => {
        if (!authLoading && effectiveTeamId && loadingState === "auth") {
            loadAllData();
        } else if (!authLoading && !effectiveTeamId) {
            setLoadingMessage("Erreur: Vous devez être connecté pour exporter les canevas.");
            setLoadingState("error");
        }
    }, [authLoading, effectiveTeamId, loadingState, loadAllData]);

    // Auto-trigger print dialog when ready
    useEffect(() => {
        if (loadingState === "ready" && !printTriggered) {
            setPrintTriggered(true);
            // Small delay to ensure rendering is complete
            setTimeout(() => {
                window.print();
            }, 1000);
        }
    }, [loadingState, printTriggered]);

    // Group canvases by week and day
    const weeks: Week[] = [1, 2, 3];

    // Only render canvases when data is ready
    const shouldRenderCanvases = loadingState === "ready";

    return (
        <div className="print-container bg-white min-h-screen">
            {/* Print-specific styles - simplified since global CSS handles A3 sizing */}
            <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;
          }
          
          /* Ensure backgrounds print */
          * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
        }
        
        /* Screen styles for preview - no transform scaling on print page */
        @media screen {
          .canvas-a3-viewport {
            padding: 0.5rem 0;
          }
          .canvas-a3-fixed {
            transform: scale(0.6);
            margin-bottom: calc(var(--a3-height) * -0.4);
          }
        }
      `}</style>

            {/* Loading indicator (hidden during print) */}
            {!shouldRenderCanvases && (
                <div className="no-print fixed inset-0 bg-white flex items-center justify-center z-50">
                    <div className="text-center">
                        {loadingState !== "error" ? (
                            <div className="animate-spin w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
                        ) : (
                            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <span className="text-red-500 text-2xl">!</span>
                            </div>
                        )}
                        <p className="text-lg text-gray-600">{loadingMessage}</p>
                        {loadingState === "loading" && (
                            <p className="text-sm text-gray-400 mt-2">
                                Préparation de {allCanvases.length} canevas pour l'impression
                                {loadedCanvasCount > 0 && ` (${loadedCanvasCount} chargés)`}
                            </p>
                        )}
                        {loadingState === "error" && (
                            <button
                                onClick={() => window.close()}
                                className="mt-4 px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
                            >
                                Fermer
                            </button>
                        )}
                    </div>
                </div>
            )}

            {/* Header info (hidden during print) - only show when ready */}
            {shouldRenderCanvases && (
                <div className="no-print bg-gray-100 p-6 mb-6">
                    <h1 className="text-2xl font-bold text-center mb-2">
                        CANEVAS D'ATELIER
                    </h1>
                    <p className="text-center text-gray-600 mb-4">
                        {allCanvases.length} canevas A3 paysage — Programme Pionniers
                    </p>
                    <div className="flex justify-center gap-4">
                        <button
                            onClick={() => window.print()}
                            className="px-6 py-2 bg-black text-white rounded hover:bg-gray-800 transition-colors"
                        >
                            Imprimer / Exporter PDF
                        </button>
                        <button
                            onClick={() => window.close()}
                            className="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
                        >
                            Fermer
                        </button>
                    </div>
                </div>
            )}

            {/* Render all canvases - ONLY when data is ready */}
            {shouldRenderCanvases && (
                <div className="print-content">
                    {weeks.map((week) => {
                        const days = getDaysForWeek(week);
                        const weekCanvases = getCanvasesByWeek(week);

                        return (
                            <div key={week}>
                                {days.map((day) => {
                                    const dayCanvases = weekCanvases.filter(c => c.day === day);
                                    if (dayCanvases.length === 0) return null;

                                    return (
                                        <div key={`${week}-${day}`}>
                                            {dayCanvases.map((canvas) => (
                                                <CanvasViewer key={canvas.id} canvas={canvas} />
                                            ))}
                                        </div>
                                    );
                                })}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}