"use client";

import { useState, useEffect } from "react";
import { Category, CreateCategoryInput, UpdateCategoryInput } from "@/types/category";
import { useSettings } from "@/hooks/useSettings";
import { LuX, LuFolder, LuBriefcase, LuBuilding, LuFileText, LuStar, LuHeart, LuShoppingBag, LuBookOpen } from "react-icons/lu";

interface CategoryFormProps {
    category?: Category;
    isOpen: boolean;
    onClose: () => void;
    onSave: (data: {
        name: string;
        description?: string;
        color?: string;
        icon?: string;
        expenseType?: string;
        paymentMethod?: string;
    }) => Promise<void>;
}

const PRESET_COLORS = [
    "#3B82F6", // blue
    "#10B981", // green
    "#F59E0B", // amber
    "#EF4444", // red
    "#8B5CF6", // purple
    "#06B6D4", // cyan
    "#84CC16", // lime
];

const PRESET_ICONS = [
    { name: "folder", icon: <LuFolder className="h-6 w-6" />, emoji: "📁" },
    { name: "briefcase", icon: <LuBriefcase className="h-6 w-6" />, emoji: "💼" },
    { name: "home", icon: <LuBuilding className="h-6 w-6" />, emoji: "🏠" },
    { name: "file", icon: <LuFileText className="h-6 w-6" />, emoji: "📄" },
    { name: "star", icon: <LuStar className="h-6 w-6" />, emoji: "⭐" },
    { name: "heart", icon: <LuHeart className="h-6 w-6" />, emoji: "❤️" },
    { name: "shopping", icon: <LuShoppingBag className="h-6 w-6" />, emoji: "🛒" },
    { name: "book", icon: <LuBookOpen className="h-6 w-6" />, emoji: "📚" },
];

export default function CategoryForm({
    category,
    isOpen,
    onClose,
    onSave,
}: CategoryFormProps) {
    const { expenseTypes, paymentMethods, isLoading: settingsLoading } = useSettings();
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [color, setColor] = useState("#3B82F6");
    const [selectedIcon, setSelectedIcon] = useState("folder");
    const [expenseType, setExpenseType] = useState("");
    const [paymentMethod, setPaymentMethod] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState("");

    // Reset form when opening/category changes
    useEffect(() => {
        if (isOpen) {
            setName(category?.name || "");
            setDescription(category?.description || "");
            setColor(category?.color || "#3B82F6");
            setSelectedIcon(category?.icon || "folder");
            setExpenseType(category?.expenseType || "");
            setPaymentMethod(category?.paymentMethod || "");
            setError("");
        }
    }, [isOpen, category]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError("");

        if (!name.trim()) {
            setError("El nombre es obligatorio");
            return;
        }

        setIsSubmitting(true);

        try {
            const iconEmoji = PRESET_ICONS.find(i => i.name === selectedIcon)?.emoji || "📁";
            // Check if icon string is actually an emoji already (when editing)
            const isEditingEmoji = PRESET_ICONS.find(i => i.emoji === selectedIcon);
            const finalIcon = isEditingEmoji ? selectedIcon : iconEmoji;

            await onSave({
                name: name.trim(),
                description: description.trim() || undefined,
                color,
                icon: finalIcon,
                expenseType: expenseType || undefined,
                paymentMethod: paymentMethod || undefined,
            });
        } catch (err) {
            setError(err instanceof Error ? err.message : "Error al guardar");
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 bg-overlay z-50 flex items-center justify-center p-4">
            <div className="bg-background rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] flex flex-col overflow-hidden">
                {/* Header */}
                <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border-subtle shrink-0">
                    <h2 className="text-xl font-bold text-text">
                        {category ? "Editar Categoría" : "Crear Nueva Categoría"}
                    </h2>
                    <button
                        onClick={onClose}
                        className="p-2 hover:bg-background-alt rounded-full transition-colors text-text-subtle hover:text-text focus-ring"
                    >
                        <LuX className="h-5 w-5" />
                    </button>
                </div>

                {/* Form */}
                <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-6 overflow-y-auto">
                    {error && (
                        <div className="bg-destructive-background border border-destructive-border text-destructive-foreground px-4 py-3 rounded-lg text-sm">
                            {error}
                        </div>
                    )}

                    {/* Nombre */}
                    <div>
                        <label className="block text-sm font-semibold text-text mb-2">
                            Nombre de la categoría <span className="text-destructive">*</span>
                        </label>
                        <input
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-background text-text placeholder-text-subtle"
                            placeholder="Ej: Facturas, Personal, Trabajo..."
                            required
                        />
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        {/* Tipo de Gasto */}
                        <div>
                            <label className="block text-sm font-semibold text-text mb-2">
                                Tipo de Gasto
                            </label>
                            <select
                                value={expenseType}
                                onChange={(e) => setExpenseType(e.target.value)}
                                className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-background text-text disabled:opacity-50"
                                disabled={settingsLoading}
                            >
                                <option value="">Selecciona un tipo...</option>
                                {expenseTypes.map(type => (
                                    <option key={type.id} value={type.name}>{type.name}</option>
                                ))}
                            </select>
                        </div>

                        {/* Forma de Pago */}
                        <div>
                            <label className="block text-sm font-semibold text-text mb-2">
                                Forma de Pago
                            </label>
                            <select
                                value={paymentMethod}
                                onChange={(e) => setPaymentMethod(e.target.value)}
                                className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-background text-text disabled:opacity-50"
                                disabled={settingsLoading}
                            >
                                <option value="">Selecciona una forma...</option>
                                {paymentMethods.map(method => (
                                    <option key={method.id} value={method.name}>{method.name}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* Color */}
                    <div>
                        <label className="block text-sm font-semibold text-text mb-3">
                            Elegir Color
                        </label>
                        <div className="flex gap-3 flex-wrap">
                            {PRESET_COLORS.map((c) => (
                                <button
                                    key={c}
                                    type="button"
                                    onClick={() => setColor(c)}
                                    className={`w-10 h-10 rounded-full transition-all focus-ring ${color === c
                                        ? "ring-2 ring-offset-2 ring-border scale-110"
                                        : "hover:scale-105"
                                        }`}
                                    style={{ backgroundColor: c }}
                                />
                            ))}
                        </div>
                    </div>

                    {/* Icono */}
                    <div>
                        <label className="block text-sm font-semibold text-text mb-3">
                            Seleccionar Icono
                        </label>
                        <div className="flex gap-2 flex-wrap">
                            {PRESET_ICONS.map((item) => (
                                <button
                                    key={item.name}
                                    type="button"
                                    onClick={() => setSelectedIcon(item.name)}
                                    className={`w-14 h-14 rounded-lg border-2 flex items-center justify-center transition-all focus-ring ${
                                        selectedIcon === item.name || selectedIcon === item.emoji
                                        ? "border-primary bg-primary-faint text-primary"
                                        : "border-border text-text-muted hover:border-border-subtle hover:bg-background-alt"
                                        }`}
                                >
                                    {item.icon}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* Descripción */}
                    <div>
                        <label className="block text-sm font-semibold text-text mb-2">
                            Descripción (Opcional)
                        </label>
                        <textarea
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none outline-none transition-all bg-background text-text placeholder-text-subtle"
                            rows={3}
                            placeholder="Añade una breve descripción..."
                        />
                    </div>

                    {/* Actions */}
                    <div className="flex gap-3 pt-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 px-4 py-3 border border-border text-text rounded-lg hover:bg-background-alt font-medium transition-colors focus-ring"
                            disabled={isSubmitting}
                        >
                            Cancelar
                        </button>
                        <button
                            type="submit"
                            className="flex-1 px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-ring"
                            disabled={isSubmitting}
                        >
                            {isSubmitting ? "Guardando..." : "Guardar Categoría"}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}