'use client'

import { useState } from 'react'
import { useFinanzasStore } from '@/lib/store'
import { X, CreditCard, DollarSign, Calendar, FileText, Layers } from 'lucide-react'
import { cn } from '@/lib/utils'

interface AddPaymentModalProps {
    isOpen: boolean
    onClose: () => void
}

export function AddPaymentModal({ isOpen, onClose }: AddPaymentModalProps) {
    const cards = useFinanzasStore((state) => state.creditCards)
    const addCardPayment = useFinanzasStore((state) => state.addCardPayment)

    const [selectedCardId, setSelectedCardId] = useState(cards[0]?.id || '')
    const [description, setDescription] = useState('')
    const [amount, setAmount] = useState('')
    const [dateStr, setDateStr] = useState(new Date().toISOString().split('T')[0])
    const [hasInstallments, setHasInstallments] = useState(false)
    const [installments, setInstallments] = useState('1')
    const [totalInstallments, setTotalInstallments] = useState('12')

    if (!isOpen) return null

    // Ensure card selection if cards exist
    if (!selectedCardId && cards.length > 0) {
        setSelectedCardId(cards[0].id)
    }

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()

        if (!description || !amount || !selectedCardId) return

        addCardPayment({
            cardId: selectedCardId,
            amount: parseFloat(amount),
            date: new Date(dateStr).toISOString(),
            description,
            installments: hasInstallments ? {
                current: parseInt(installments),
                total: parseInt(totalInstallments)
            } : undefined
        })

        // Reset
        setDescription('')
        setAmount('')
        setHasInstallments(false)
        setInstallments('1')
        setTotalInstallments('12')

        onClose()
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
            <div className="w-full max-w-lg rounded-xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden scale-100 animate-in zoom-in-95 duration-200">

                {/* Header */}
                <div className="flex items-center justify-between p-6 border-b border-slate-800">
                    <h2 className="text-xl font-semibold text-white">Registrar Consumo / Pago</h2>
                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
                        <X size={20} />
                    </button>
                </div>

                {cards.length === 0 ? (
                    <div className="p-8 text-center space-y-4">
                        <CreditCard className="mx-auto text-slate-600 mb-2" size={48} />
                        <h3 className="text-lg font-medium text-white">No tienes tarjetas registradas</h3>
                        <p className="text-slate-400">Debes agregar una tarjeta antes de registrar pagos.</p>
                        <button
                            onClick={onClose}
                            className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition"
                        >
                            Entendido
                        </button>
                    </div>
                ) : (
                    <form onSubmit={handleSubmit} className="p-6 space-y-5">

                        {/* Card Selection */}
                        <div className="space-y-2">
                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Tarjeta</label>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[120px] overflow-y-auto pr-1">
                                {cards.map((card) => (
                                    <div
                                        key={card.id}
                                        onClick={() => setSelectedCardId(card.id)}
                                        className={cn(
                                            "cursor-pointer p-3 rounded-lg border flex items-center gap-3 transition-all",
                                            selectedCardId === card.id
                                                ? "border-cyan-500 bg-cyan-500/10 ring-1 ring-cyan-500"
                                                : "border-slate-800 bg-slate-950 hover:border-slate-700"
                                        )}
                                    >
                                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: card.color }} />
                                        <div className="flex flex-col truncate">
                                            <span className="text-sm font-medium text-white truncate">{card.name}</span>
                                            <span className="text-xs text-slate-500">**** {card.lastFourDigits}</span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* Amount */}
                        <div className="space-y-2">
                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Monto</label>
                            <div className="relative">
                                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
                                <input
                                    type="number"
                                    step="0.01"
                                    placeholder="0.00"
                                    value={amount}
                                    onChange={(e) => setAmount(e.target.value)}
                                    className="w-full pl-8 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white text-lg font-mono outline-none"
                                    required
                                    autoFocus
                                />
                            </div>
                        </div>

                        {/* Description */}
                        <div className="space-y-2">
                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Descripción</label>
                            <input
                                type="text"
                                placeholder="Ej: Cena McDonalds, Compra ML"
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
                                required
                            />
                        </div>

                        {/* Date */}
                        <div className="space-y-2">
                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
                                <Calendar size={12} /> Fecha
                            </label>
                            <input
                                type="date"
                                value={dateStr}
                                onChange={(e) => setDateStr(e.target.value)}
                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none [color-scheme:dark]"
                                required
                            />
                        </div>

                        {/* Installments Toggle */}
                        <div className="flex items-center gap-2 px-4 py-3 bg-slate-800/30 rounded-lg cursor-pointer" onClick={() => setHasInstallments(!hasInstallments)}>
                            <div className={cn("w-5 h-5 rounded border flex items-center justify-center transition-colors", hasInstallments ? "bg-cyan-500 border-cyan-500" : "border-slate-600 bg-transparent")}>
                                {hasInstallments && <Layers size={14} className="text-white" />}
                            </div>
                            <span className="text-sm text-slate-300 select-none">Es una compra en cuotas</span>
                        </div>

                        {/* Installments Inputs */}
                        {hasInstallments && (
                            <div className="grid grid-cols-2 gap-4 animate-in slide-in-from-top-2">
                                <div className="space-y-2">
                                    <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Cuota N°</label>
                                    <input
                                        type="number"
                                        min="1"
                                        value={installments}
                                        onChange={(e) => setInstallments(e.target.value)}
                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
                                    />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Total Cuotas</label>
                                    <input
                                        type="number"
                                        min="1"
                                        value={totalInstallments}
                                        onChange={(e) => setTotalInstallments(e.target.value)}
                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
                                    />
                                </div>
                            </div>
                        )}

                        <div className="pt-2">
                            <button
                                type="submit"
                                className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-white font-semibold rounded-lg shadow-lg shadow-cyan-500/20 transition-all active:scale-[0.98]"
                            >
                                Registrar Pago
                            </button>
                        </div>

                    </form>
                )}
            </div>
        </div>
    )
}