import React, { useState, useRef, useEffect } from "react";
import {
    IconFile as FileType, IconMap as Map, IconDownload as Download,
    IconAlertCircle as AlertCircle, IconCheck as Check, IconX as X,
    IconSettings as Settings, IconCloudUpload as CloudUpload
} from "@tabler/icons-react";
import { cn } from "../lib/utils";

// --- Types ---
interface FileState {
    file: File | null;
    error: string | null;
}

// --- Components ---

const FileCard = ({
    file,
    onRemove,
    icon: Icon
}: {
    file: File;
    onRemove: () => void;
    icon: React.ElementType
}) => (
    <div className="flex items-center gap-4 p-4 bg-white/5 border border-white/10 rounded-2xl animate-fade-in group hover:bg-white/10 hover:border-white/20 transition-all duration-300 shadow-lg backdrop-blur-sm">
        <div className="p-3 bg-gradient-to-br from-indigo-500/20 to-blue-500/20 rounded-xl text-indigo-300 ring-1 ring-white/10">
            <Icon size={24} />
        </div>
        <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold text-white truncate tracking-wide">{file.name}</p>
            <p className="text-xs text-white/50 font-medium">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
        </div>
        <button
            onClick={(e) => { e.stopPropagation(); onRemove(); }}
            className="p-2 hover:bg-red-500/20 rounded-xl text-white/40 hover:text-red-400 transition-colors"
        >
            <X size={18} />
        </button>
    </div>
);

const Dropzone = ({
    accept,
    label,
    sublabel,
    fileState,
    onFileSelect,
    icon: Icon,
    color = "indigo"
}: {
    accept: string;
    label: string;
    sublabel: string;
    fileState: FileState;
    onFileSelect: (file: File) => void;
    icon: React.ElementType;
    color?: "indigo" | "purple";
}) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const [isDragging, setIsDragging] = useState(false);

    const handleDrag = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.type === "dragenter" || e.type === "dragover") {
            setIsDragging(true);
        } else if (e.type === "dragleave") {
            setIsDragging(false);
        }
    };

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

        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            onFileSelect(e.dataTransfer.files[0]);
        }
    };

    const bgStyles = {
        indigo: "from-indigo-500/5 via-blue-500/5 to-transparent",
        purple: "from-purple-500/5 via-pink-500/5 to-transparent"
    };

    const borderStyles = {
        indigo: "group-hover:border-indigo-500/30",
        purple: "group-hover:border-purple-500/30"
    };

    return (
        <div className="relative group">
            <div
                onClick={() => !fileState.file && inputRef.current?.click()}
                onDragEnter={handleDrag}
                onDragLeave={handleDrag}
                onDragOver={handleDrag}
                onDrop={handleDrop}
                className={cn(
                    "relative h-56 rounded-3xl border-2 border-dashed transition-all duration-500 flex flex-col items-center justify-center p-8 text-center cursor-pointer overflow-hidden",
                    isDragging
                        ? "border-indigo-400 bg-indigo-500/10 scale-[1.02] shadow-2xl"
                        : "border-white/10 hover:bg-white/[0.02]",
                    fileState.file ? "border-solid bg-white/5 cursor-default border-white/5" : bgStyles[color],
                    !fileState.file && borderStyles[color]
                )}
            >
                <input
                    ref={inputRef}
                    type="file"
                    className="hidden"
                    accept={accept}
                    onChange={(e) => e.target.files?.[0] && onFileSelect(e.target.files[0])}
                />

                {fileState.file ? (
                    <div className="w-full relative z-10">
                        <FileCard
                            file={fileState.file}
                            onRemove={() => onFileSelect(null as any)}
                            icon={Icon}
                        />
                        <p className="mt-4 text-xs text-white/30 font-medium uppercase tracking-widest">Archivo cargado</p>
                    </div>
                ) : (
                    <>
                        <div className={cn(
                            "p-5 rounded-2xl bg-white/5 mb-5 group-hover:scale-110 group-hover:-rotate-3 transition-all duration-300 ring-1 ring-white/10",
                            isDragging && "scale-110"
                        )}>
                            <Icon className={cn(
                                "transition-colors duration-300",
                                color === "indigo" ? "text-indigo-400 group-hover:text-indigo-300" : "text-purple-400 group-hover:text-purple-300"
                            )} size={32} />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 group-hover:text-white transition-colors tracking-tight">
                            {label}
                        </h3>
                        <p className="text-sm text-white/40 leading-relaxed max-w-[200px] mx-auto group-hover:text-white/60 transition-colors">
                            {sublabel}
                        </p>
                    </>
                )}
            </div>
        </div>
    );
};

// --- Main App ---

export default function ClimateMapApp() {
    const [pdf, setPdf] = useState<File | null>(null);
    const [shp, setShp] = useState<File | null>(null);
    const [isProcessing, setIsProcessing] = useState(false);
    const [resultImage, setResultImage] = useState<string | null>(null);
    const [errorDetails, setErrorDetails] = useState<string | null>(null);
    const [showConfig, setShowConfig] = useState(false);
    const [backendUrl, setBackendUrl] = useState(import.meta.env.PUBLIC_BACKEND_URL || "");

    const resultRef = useRef<HTMLDivElement>(null);

    // Auto-scroll to results
    useEffect(() => {
        if (resultImage && resultRef.current) {
            resultRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }, [resultImage]);

    const handleProcess = async () => {
        if (!pdf || !shp) return;

        setIsProcessing(true);
        setResultImage(null);
        setErrorDetails(null);

        const formData = new FormData();
        formData.append("pdf", pdf);
        formData.append("shp", shp);

        const baseUrl = backendUrl || (typeof window !== "undefined" ? window.location.origin : "");
        const endpoint = `${baseUrl.replace(/\/$/, "")}/api/procesar/`;

        try {
            const response = await fetch(endpoint, {
                method: "POST",
                body: formData,
            });

            if (!response.ok) {
                const errJson = await response.json().catch(() => ({ detail: response.statusText }));
                throw new Error(errJson.detail || "Error processing files");
            }

            const blob = await response.blob();
            const imageUrl = URL.createObjectURL(blob);

            // Cleanup previous ObjectURL to prevent memory leak
            if (resultImage) {
                URL.revokeObjectURL(resultImage);
            }

            setResultImage(imageUrl);
        } catch (err: any) {
            setErrorDetails(`${err.message} (URL: ${endpoint})`);
        } finally {
            setIsProcessing(false);
        }
    };

    const handleReset = () => {
        // Cleanup ObjectURL when resetting
        if (resultImage) {
            URL.revokeObjectURL(resultImage);
        }
        setPdf(null);
        setShp(null);
        setResultImage(null);
        setErrorDetails(null);
    };

    return (
        <div className="w-full max-w-6xl mx-auto space-y-12 animate-fade-in-up pb-20">

            {/* Main Processor Card */}
            <div className="relative group perspective-1000">
                <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 rounded-[35px] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
                <div className="relative bg-[#131620] ring-1 ring-white/10 rounded-[30px] p-2 shadow-2xl">

                    {/* Toolbar */}
                    <div className="absolute top-6 right-6 z-20">
                        <button
                            onClick={() => setShowConfig(!showConfig)}
                            className="p-2.5 text-white/20 hover:text-white hover:bg-white/5 rounded-full transition-all"
                            title="Configuración API"
                        >
                            <Settings size={20} />
                        </button>
                    </div>

                    <div className="px-6 py-16 md:px-16 md:py-20">
                        {/* Header */}
                        <div className="text-center mb-16 space-y-4">
                            <h2 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight">
                                Generador <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">Inteligente</span>
                            </h2>
                            <p className="text-lg text-slate-400 max-w-xl mx-auto font-light leading-relaxed">
                                Sube el informe PDF y los archivos geográficos SHP. Nuestro algoritmo unificará los datos automáticamente.
                            </p>

                            {showConfig && (
                                <div className="max-w-md mx-auto mt-6 animate-fade-in p-1 bg-gradient-to-r from-white/5 to-transparent rounded-xl">
                                    <input
                                        value={backendUrl}
                                        onChange={(e) => setBackendUrl(e.target.value)}
                                        className="w-full bg-[#0b0d13] border-none rounded-lg px-4 py-3 text-white/80 placeholder:text-white/20 focus:ring-1 focus:ring-indigo-500 font-mono text-sm text-center"
                                        placeholder="http://localhost:8000"
                                    />
                                </div>
                            )}
                        </div>

                        {/* Upload Grid */}
                        <div className="grid md:grid-cols-2 gap-8 mb-12">
                            <Dropzone
                                accept="application/pdf"
                                label="Informe PDF"
                                sublabel="Arrastra el documento PDF con la tabla de zonas aquí."
                                fileState={{ file: pdf, error: null }}
                                onFileSelect={(f) => setPdf(f)}
                                icon={FileType}
                                color="indigo"
                            />
                            <Dropzone
                                accept=".zip,application/zip"
                                label="Geometría SHP"
                                sublabel="Sube el archivo .zip comprimido con todos los ficheros del SHP."
                                fileState={{ file: shp, error: null }}
                                onFileSelect={(f) => setShp(f)}
                                icon={Map}
                                color="purple"
                            />
                        </div>

                        {/* Action Area */}
                        <div className="flex flex-col items-center justify-center space-y-6">
                            <button
                                onClick={handleProcess}
                                disabled={!pdf || !shp || isProcessing}
                                className={cn(
                                    "relative px-10 py-5 rounded-2xl font-bold text-white shadow-xl transition-all duration-300 w-full md:w-auto min-w-[280px]",
                                    (!pdf || !shp)
                                        ? "bg-white/5 text-white/20 cursor-not-allowed shadow-none ring-1 ring-white/5"
                                        : "bg-gradient-to-r from-blue-600 to-indigo-600 hover:shadow-indigo-500/40 hover:-translate-y-1 hover:scale-105 active:scale-95"
                                )}
                            >
                                <div className="flex items-center justify-center gap-3">
                                    {isProcessing ? (
                                        <>
                                            <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                            <span>Procesando Datos...</span>
                                        </>
                                    ) : (
                                        <>
                                            <CloudUpload size={22} className={cn("transition-all duration-300", (!pdf || !shp) ? "opacity-50" : "animate-bounce-subtle")} />
                                            <span>Generar Mapa</span>
                                        </>
                                    )}
                                </div>
                            </button>

                            {(!pdf || !shp) && (
                                <p className="text-xs text-white/20 font-medium uppercase tracking-widest animate-pulse">
                                    Sube ambos archivos para continuar
                                </p>
                            )}
                        </div>

                        {/* Error Message */}
                        {errorDetails && (
                            <div className="mt-10 p-6 bg-red-500/5 ring-1 ring-red-500/20 rounded-2xl flex items-start gap-4 text-red-200 animate-fade-in max-w-2xl mx-auto backdrop-blur-md">
                                <div className="p-2 bg-red-500/10 rounded-lg shrink-0">
                                    <AlertCircle size={24} className="text-red-400" />
                                </div>
                                <div>
                                    <h4 className="font-semibold text-red-100 mb-1">Error en el proceso</h4>
                                    <p className="text-sm opacity-80 leading-relaxed font-mono text-xs">{errorDetails}</p>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Results View */}
            {resultImage && (
                <div ref={resultRef} className="scroll-mt-10 animate-fade-in-up duration-700">
                    <div className="relative group rounded-[30px] p-1 bg-gradient-to-b from-white/10 to-white/5 backdrop-blur-xl">
                        <div className="bg-[#0f111a] rounded-[28px] overflow-hidden shadow-2xl ring-1 ring-white/5">

                            {/* Result Header */}
                            <div className="px-8 py-6 border-b border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 bg-white/[0.02]">
                                <div className="flex items-center gap-3">
                                    <div className="p-2 rounded-lg bg-green-500/10 text-green-400">
                                        <Check size={20} />
                                    </div>
                                    <div>
                                        <h3 className="font-bold text-white text-lg">Mapa Generado con Éxito</h3>
                                        <p className="text-sm text-white/40">Zonificación completada</p>
                                    </div>
                                </div>

                                <div className="flex gap-3 w-full md:w-auto">
                                    <button
                                        onClick={handleReset}
                                        className="flex-1 md:flex-none px-5 py-2.5 rounded-xl text-sm font-medium text-white/50 hover:text-white hover:bg-white/10 transition-colors"
                                    >
                                        Reiniciar
                                    </button>
                                    <a
                                        href={resultImage}
                                        download="mapa_climatico.png"
                                        className="flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-bold transition-all shadow-lg hover:shadow-indigo-500/25"
                                    >
                                        <Download size={18} />
                                        Descargar PNG
                                    </a>
                                </div>
                            </div>

                            {/* Image Container */}
                            <div className="p-8 md:p-12 flex justify-center bg-[url('/grid.svg')] bg-center bg-repeat opacity-100">
                                <div className="relative rounded-xl overflow-hidden shadow-2xl border-4 border-white/5 bg-[#1a1d2d]">
                                    <img
                                        src={resultImage}
                                        alt="Mapa Climático"
                                        className="max-w-full h-auto max-h-[80vh] object-contain"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}