"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { LuPlus, LuPencil, LuTrash2, LuFolderOpen, LuCalendar, LuSettings } from "react-icons/lu";
import CategoryForm from "./components/CategoryForm";
import ConfigOptionsModal from "./components/ConfigOptionsModal";
import { useCategories } from "@/hooks/useCategories";
import { CreateCategoryInput, UpdateCategoryInput } from "@/types/category";

export default function CategoriesPage() {
    const { data: session, status } = useSession();
    const router = useRouter();

    // Usar el hook personalizado
    const {
        categories,
        isLoading,
        error,
        createCategory,
        updateCategory,
        deleteCategory,
    } = useCategories();

    const [isFormOpen, setIsFormOpen] = useState(false);
    const [isConfigOpen, setIsConfigOpen] = useState(false);
    const [editingCategory, setEditingCategory] = useState<typeof categories[number] | undefined>();
    const [deletingId, setDeletingId] = useState<string | null>(null);

    // Proteger ruta - solo admin
    useEffect(() => {
        if (status === "unauthenticated") {
            router.push("/login");
        } else if (status === "authenticated" && session?.user?.role !== "ADMIN") {
            router.push("/dashboard");
        }
    }, [status, session, router]);

    // Crear o editar categoría
    const handleSave = async (data: {
        name: string;
        description?: string;
        color?: string;
        icon?: string;
    }) => {
        try {
            if (editingCategory) {
                // Editar existente
                await updateCategory(editingCategory.id, data as UpdateCategoryInput);
                console.log('✅ Categoría actualizada:', editingCategory.id);
            } else {
                // Crear nueva
                await createCategory(data as CreateCategoryInput);
                console.log('✅ Categoría creada');
            }
            setIsFormOpen(false);
            setEditingCategory(undefined);
        } catch (error) {
            console.error('❌ Error al guardar categoría:', error);
            alert(error instanceof Error ? error.message : 'Error al guardar categoría');
        }
    };

    // Eliminar categoría
    const handleDelete = async (id: string) => {
        if (!confirm("¿Estás seguro de eliminar esta categoría?")) {
            return;
        }

        setDeletingId(id);

        try {
            await deleteCategory(id);
            console.log('✅ Categoría eliminada:', id);
        } catch (error) {
            console.error('❌ Error al eliminar:', error);
            alert(error instanceof Error ? error.message : 'Error al eliminar la categoría');
        } finally {
            setDeletingId(null);
        }
    };

    if (status === "loading" || isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-background">
                <div className="text-text-muted">Cargando...</div>
            </div>
        );
    }

    if (session?.user?.role !== "ADMIN") {
        return null;
    }

    return (
        <div className="min-h-screen bg-background p-4 md:p-6">
            <div className="max-w-7xl mx-auto">
                {/* Header - Consistent with Dashboard */}
                <div className="mb-6">
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <h1 className="text-3xl font-bold text-text">Categorías</h1>
                            <p className="text-text-muted mt-1 text-sm">
                                Gestiona las categorías de documentos
                            </p>
                        </div>
                        <div className="flex items-center gap-3">
                            <button
                                onClick={() => setIsConfigOpen(true)}
                                className="flex items-center justify-center gap-2 px-4 py-2 bg-background border border-border text-text rounded-lg hover:bg-background-alt transition-colors font-medium shadow-sm focus-ring"
                                title="Configurar opciones globales"
                            >
                                <LuSettings className="h-5 w-5 text-text-muted" />
                                <span className="hidden sm:inline">Configuración</span>
                            </button>
                            <button
                                onClick={() => {
                                    setEditingCategory(undefined);
                                    setIsFormOpen(true);
                                }}
                                className="flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-sm"
                            >
                                <LuPlus className="h-5 w-5" />
                                <span>Nueva Categoría</span>
                            </button>
                        </div>
                    </div>
                </div>

                {/* Error Message */}
                {error && (
                    <div className="mb-6 p-4 bg-destructive-background border border-destructive-border text-destructive-foreground rounded-lg">
                        {error}
                    </div>
                )}

                {/* Lista de Categorías - Card Grid like Dashboard */}
                {categories.length === 0 ? (
                    <div className="bg-background rounded-xl shadow-sm border border-border-subtle p-12 text-center">
                        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-background-alt flex items-center justify-center">
                            <LuFolderOpen className="h-8 w-8 text-text-muted" />
                        </div>
                        <h3 className="text-lg font-semibold text-text mb-2">
                            No hay categorías
                        </h3>
                        <p className="text-text-muted mb-6 text-sm">
                            Crea tu primera categoría para organizar documentos
                        </p>
                        <button
                            onClick={() => setIsFormOpen(true)}
                            className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
                        >
                            <LuPlus className="h-5 w-5" />
                            Crear Categoría
                        </button>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
                        {categories.map((category) => (
                            <div
                                key={category.id}
                                className="bg-background rounded-xl shadow-sm border border-border-subtle p-5 hover:shadow-md transition-all group"
                            >
                                <div className="flex items-start justify-between mb-4">
                                    {/* Icono y Color */}
                                    <div
                                        className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl shadow-sm"
                                        style={{ backgroundColor: `${category.color}20` || "#3B82F620" }}
                                    >
                                        <span style={{ filter: 'saturate(1.5)' }}>{category.icon || "📄"}</span>
                                    </div>

                                    {/* Acciones */}
                                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <button
                                            onClick={() => {
                                                setEditingCategory(category);
                                                setIsFormOpen(true);
                                            }}
                                            className="p-1.5 text-primary hover:bg-primary-faint rounded-md transition-colors"
                                            title="Editar"
                                        >
                                            <LuPencil className="h-4 w-4" />
                                        </button>
                                        <button
                                            onClick={() => handleDelete(category.id)}
                                            disabled={deletingId === category.id}
                                            className="p-1.5 text-destructive hover:bg-destructive-background rounded-md transition-colors disabled:opacity-50"
                                            title="Eliminar"
                                        >
                                            <LuTrash2 className="h-4 w-4" />
                                        </button>
                                    </div>
                                </div>

                                {/* Info */}
                                <div>
                                    <h3 className="text-base font-bold text-text mb-1">
                                        {category.name}
                                    </h3>
                                    {category.description && (
                                        <p className="text-sm text-text-muted line-clamp-2 mb-3">
                                            {category.description}
                                        </p>
                                    )}
                                    <div className="flex items-center gap-3 text-xs">
                                        <span className="text-primary font-semibold">
                                            {category._count?.documents || 0} documento{(category._count?.documents || 0) !== 1 ? 's' : ''}
                                        </span>
                                        <span className="flex items-center gap-1 text-text-subtle">
                                            <LuCalendar className="h-3 w-3" />
                                            {new Date(category.createdAt).toLocaleDateString('es-ES', {
                                                day: 'numeric',
                                                month: 'short',
                                            })}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}

                        {/* Card para Crear Nueva Categoría */}
                        <button
                            onClick={() => {
                                setEditingCategory(undefined);
                                setIsFormOpen(true);
                            }}
                            className="min-h-[180px] flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border-subtle hover:border-primary/50 hover:bg-primary-faint/30 transition-all group cursor-pointer"
                        >
                            <div className="w-12 h-12 rounded-full bg-background-alt group-hover:bg-primary-faint flex items-center justify-center transition-colors">
                                <LuPlus className="h-6 w-6 text-text-subtle group-hover:text-primary transition-colors" />
                            </div>
                            <span className="text-sm font-medium text-text-muted group-hover:text-primary transition-colors">
                                Crear Nueva Categoría
                            </span>
                        </button>
                    </div>
                )}

                {/* Form Modal */}
                <CategoryForm
                    category={editingCategory}
                    isOpen={isFormOpen}
                    onClose={() => {
                        setIsFormOpen(false);
                        setEditingCategory(undefined);
                    }}
                    onSave={handleSave}
                />

                {/* Config Modal */}
                <ConfigOptionsModal
                    isOpen={isConfigOpen}
                    onClose={() => setIsConfigOpen(false)}
                />
            </div>
        </div>
    );
}