"use client";

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

interface MindmapHackathonCanvasProps {
    canvas: CanvasTemplate;
    className?: string;
    teamName?: string;
}

export function MindmapHackathonCanvas({ canvas, className = "", teamName }: MindmapHackathonCanvasProps) {
    const { getCanvas, updateCanvasField } = useCanvasStore();
    const canvasData = getCanvas(canvas.id);
    const savedImage = canvasData?.fields["mindmap-image"] ?? "";

    const [imageData, setImageData] = useState<string>(
        typeof savedImage === "string" ? savedImage : ""
    );
    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]);

    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, "mindmap-image", result);
        };
        reader.onerror = () => {
            setError("Erreur lors de la lecture du fichier");
        };
        reader.readAsDataURL(file);
    }, [canvas.id, 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, "mindmap-image", "");
        if (fileInputRef.current) {
            fileInputRef.current.value = "";
        }
    }, [canvas.id, updateCanvasField]);

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

    return (
        <div className={`bg-white flex flex-col h-full ${className}`}>
            {/* 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"
                            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-24 h-24 mb-6 rounded-full flex items-center justify-center transition-colors ${isDragging ? "bg-[#f97316]" : "bg-gray-100"
                            }`}>
                            <svg
                                className={`w-12 h-12 ${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-xl 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-gray-400 mb-4">ou</p>
                        <button
                            type="button"
                            onClick={(e) => {
                                e.stopPropagation();
                                handleBrowseClick();
                            }}
                            className="bg-[#f97316] hover:bg-[#ea580c] text-white px-6 py-3 rounded-lg font-medium transition-colors"
                        >
                            Parcourir les fichiers
                        </button>
                        <p className="text-sm text-gray-400 mt-4">
                            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]">Date :</span>
            </div>
        </div>
    );
}