"use client";

import { useState, useCallback, useEffect, useRef } from "react";
import { CanvasTemplate } from "@/lib/canvas-data";
import { useCanvasStore } from "@/lib/store";

interface MindmapSignauxFaiblesCanvasProps {
    canvas: CanvasTemplate;
    className?: string;
    teamName?: string;
    pageIndex?: number;
    isMultiPage?: boolean;
}

// Theme labels for each page (linked to canvas 6 - System Learning: "Thèmes Majeurs à Explorer")
const THEME_LABELS: Record<number, string> = {
    1: "Thème 1",
    2: "Thème 2",
    3: "Thème 3",
    4: "Thème 4",
    5: "Thème 5",
};

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

    // Use page-indexed field IDs to keep data separate per page
    const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : '';
    const imageFieldId = `${fieldPrefix}mindmap-signaux-faibles-image`;
    const themeFieldId = `${fieldPrefix}theme-label`;

    const savedImage = canvasData?.fields[imageFieldId] ?? "";
    const savedThemeLabel = canvasData?.fields[themeFieldId] ?? "";

    const [imageData, setImageData] = useState<string>(
        typeof savedImage === "string" ? savedImage : ""
    );
    const [themeLabel, setThemeLabel] = useState<string>(
        typeof savedThemeLabel === "string" ? savedThemeLabel : ""
    );
    const [isDragging, setIsDragging] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Sync with store when it changes externally
    useEffect(() => {
        const newValue = typeof savedImage === "string" ? savedImage : "";
        setImageData(newValue);
    }, [savedImage]);

    useEffect(() => {
        const newValue = typeof savedThemeLabel === "string" ? savedThemeLabel : "";
        setThemeLabel(newValue);
    }, [savedThemeLabel]);

    const handleFile = useCallback((file: File) => {
        setError(null);

        // Validate file type
        if (!file.type.startsWith("image/")) {
            setError("Veuillez sélectionner un fichier image (PNG, JPEG, etc.)");
            return;
        }

        // Validate file size (max 5MB)
        if (file.size > 5 * 1024 * 1024) {
            setError("L'image est trop volumineuse (max 5 Mo)");
            return;
        }

        // Convert to base64
        const reader = new FileReader();
        reader.onload = (e) => {
            const result = e.target?.result as string;
            setImageData(result);
            updateCanvasField(canvas.id, imageFieldId, result);
        };
        reader.onerror = () => {
            setError("Erreur lors de la lecture du fichier");
        };
        reader.readAsDataURL(file);
    }, [canvas.id, imageFieldId, updateCanvasField]);

    const handleDrop = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        setIsDragging(false);

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    }, [handleFile]);

    const handleDragOver = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        setIsDragging(true);
    }, []);

    const handleDragLeave = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        setIsDragging(false);
    }, []);

    const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        const files = e.target.files;
        if (files && files.length > 0) {
            handleFile(files[0]);
        }
    }, [handleFile]);

    const handleRemoveImage = useCallback(() => {
        setImageData("");
        updateCanvasField(canvas.id, imageFieldId, "");
        if (fileInputRef.current) {
            fileInputRef.current.value = "";
        }
    }, [canvas.id, imageFieldId, updateCanvasField]);

    const handleBrowseClick = useCallback(() => {
        fileInputRef.current?.click();
    }, []);

    const handleThemeLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setThemeLabel(value);
        updateCanvasField(canvas.id, themeFieldId, value);
    }, [canvas.id, themeFieldId, updateCanvasField]);

    const defaultThemeLabel = THEME_LABELS[pageIndex] || `Thème ${pageIndex}`;

    return (
        <div className={`bg-white flex flex-col h-full ${className}`}>
            {/* Theme Label Header */}
            <div className="px-8 pt-4 pb-2 border-b border-gray-200 flex-shrink-0">
                <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-[#f97316] text-white flex items-center justify-center font-bold text-[14px] rounded">
                        {pageIndex}
                    </div>
                    <div className="flex-1">
                        <label className="text-[10px] text-gray-500 uppercase tracking-wide block mb-1">
                            Nom du thème (issu du Canvas 6 - Apprentissage Système)
                        </label>
                        <input
                            type="text"
                            value={themeLabel}
                            onChange={handleThemeLabelChange}
                            placeholder={defaultThemeLabel}
                            className="w-full text-[16px] font-medium text-[#0a0a0a] border-b-2 border-gray-300 focus:border-[#f97316] outline-none py-1 bg-transparent transition-colors"
                        />
                    </div>
                </div>
            </div>

            {/* Main Content - Drop Zone / Image Display */}
            <div className="flex-1 px-8 py-4 flex flex-col min-h-0 overflow-hidden">
                <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    onChange={handleFileSelect}
                    className="hidden"
                />

                {imageData ? (
                    /* Image Preview */
                    <div className="flex-1 relative border-2 border-[#d1d5dc] rounded-lg overflow-hidden min-h-0">
                        <img
                            src={imageData}
                            alt={`Mindmap Signaux Faibles - ${themeLabel || defaultThemeLabel}`}
                            className="w-full h-full object-contain bg-gray-50"
                        />
                        <button
                            onClick={handleRemoveImage}
                            className="absolute top-3 right-3 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors shadow-lg"
                        >
                            ✕ Supprimer l'image
                        </button>
                    </div>
                ) : (
                    /* Drop Zone */
                    <div
                        onDrop={handleDrop}
                        onDragOver={handleDragOver}
                        onDragLeave={handleDragLeave}
                        className={`flex-1 border-3 border-dashed rounded-xl flex flex-col items-center justify-center cursor-pointer transition-all duration-200 min-h-[300px] ${isDragging
                            ? "border-[#f97316] bg-orange-50"
                            : "border-[#d1d5dc] hover:border-[#f97316] hover:bg-orange-50/30"
                            }`}
                        onClick={handleBrowseClick}
                    >
                        {/* Upload Icon */}
                        <div className={`w-20 h-20 mb-4 rounded-full flex items-center justify-center transition-colors ${isDragging ? "bg-[#f97316]" : "bg-gray-100"
                            }`}>
                            <svg
                                className={`w-10 h-10 ${isDragging ? "text-white" : "text-gray-400"}`}
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                                />
                            </svg>
                        </div>

                        <p className={`text-lg font-medium mb-2 ${isDragging ? "text-[#f97316]" : "text-gray-600"}`}>
                            {isDragging ? "Déposez votre fichier ici" : "Glissez-déposez votre mindmap ici"}
                        </p>
                        <p className="text-sm text-gray-400 mb-1">
                            Signaux faibles pour : <span className="font-medium text-gray-600">{themeLabel || defaultThemeLabel}</span>
                        </p>
                        <p className="text-gray-400 mb-3">ou</p>
                        <button
                            type="button"
                            onClick={(e) => {
                                e.stopPropagation();
                                handleBrowseClick();
                            }}
                            className="bg-[#f97316] hover:bg-[#ea580c] text-white px-5 py-2.5 rounded-lg font-medium transition-colors text-sm"
                        >
                            Parcourir les fichiers
                        </button>
                        <p className="text-xs text-gray-400 mt-3">
                            PNG, JPEG • Max 5 Mo
                        </p>
                    </div>
                )}

                {error && (
                    <div className="mt-4 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
                        ⚠️ {error}
                    </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 && pageIndex > 1 ? `Page ${pageIndex}` : "Date :"}
                </span>
            </div>
        </div>
    );
}