import { useState, useEffect } from 'react';
import { Banknote, CreditCard, ArrowRightLeft, CheckCircle2, X, AlertCircle, RefreshCw, Printer } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import clsx from 'clsx';
import api from '../services/api';

interface CashClosingModalProps {
  onClose: () => void;
  onComplete: () => void;
}

export default function CashClosingModal({ onClose, onComplete }: CashClosingModalProps) {
  const [summary, setSummary] = useState<any>(null);
  const [loadingSummary, setLoadingSummary] = useState(true);
  const [notes, setNotes] = useState('');
  const [isClosing, setIsClosing] = useState(false);
  const [done, setDone] = useState(false);
  const [closedSessionId, setClosedSessionId] = useState<number | null>(null);

  // 1. Al abrir el modal, traemos lo que el sistema dice que debería haber
  useEffect(() => {
    const fetchSummary = async () => {
      try {
        const res = await api.get('/cashsessions/summary');
        setSummary(res.data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoadingSummary(false);
      }
    };
    fetchSummary();
  }, []);

  const handleFinalClose = async () => {
    setIsClosing(true);
    try {
      const res = await api.post('/cashsessions/close', {
        declaredCash: summary.cashSales + summary.openingBalance,
        declaredDebit: summary.cardSales,
        declaredCredit: 0,
        declaredTransfer: summary.transferSales,
        notes: notes || "Cierre confirmado por cajero"
      });

      setClosedSessionId(res.data.sessionId);
      setDone(true);
    } catch (error) {
      console.error(error);
      alert('Error al cerrar caja');
    } finally {
      setIsClosing(false);
    }
  };

  const handleDownloadPdf = async () => {
    if (!closedSessionId) return;
    try {
      const res = await api.get(`/cashsessions/${closedSessionId}/pdf`, { responseType: 'blob' });
      const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `Acta_Cierre_${closedSessionId}.pdf`);
      document.body.appendChild(link);
      link.click();
      link.remove();
    } catch (error) {
      alert("Error al descargar el comprobante");
    }
  };

  if (loadingSummary) return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[200] flex items-center justify-center">
      <RefreshCw className="animate-spin text-white" size={40} />
    </div>
  );

  return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-center justify-center z-[200] p-4 overflow-hidden">
      <motion.div
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        className="bg-white rounded-[2.5rem] shadow-2xl max-w-lg w-full overflow-hidden border border-white/20"
      >
        {/* Header */}
        <div className="bg-slate-900 p-8 text-white relative">
          <div className="flex justify-between items-center relative z-10">
            <div>
              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Finalización de Turno</span>
              <h2 className="text-3xl font-black tracking-tight">Cierre de Caja</h2>
            </div>
            {!done && (
              <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors">
                <X size={24} />
              </button>
            )}
          </div>
        </div>

        <div className="p-8">
          <AnimatePresence mode="wait">
            {!done ? (
              <motion.div key="summary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">

                {/* Visualización de Totales del Sistema */}
                <div className="space-y-3">
                  <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Resumen de Valores en Caja</h4>
                  <div className="grid grid-cols-1 gap-2">
                    <SummaryRow label="Fondo de Apertura" value={summary.openingBalance} icon={<Banknote size={16} />} />
                    <SummaryRow label="Ventas Efectivo" value={summary.cashSales} icon={<Banknote size={16} />} isSale />
                    <SummaryRow label="Ventas Tarjetas" value={summary.cardSales} icon={<CreditCard size={16} />} isSale />
                    <SummaryRow label="Ventas Transferencia" value={summary.transferSales} icon={<ArrowRightLeft size={16} />} isSale />
                  </div>
                </div>

                {/* Total a Entregar */}
                <div className="bg-slate-900 p-6 rounded-[2rem] flex justify-between items-center text-white shadow-xl">
                  <div>
                    <span className="text-[10px] font-black uppercase text-slate-500 block mb-1">Total Final a Entregar</span>
                    <span className="text-4xl font-mono font-black text-green-400">
                      $ {summary.totalExpected.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <CheckCircle2 size={40} className="text-green-500 opacity-20" />
                </div>

                {/* Notas opcionales */}
                <div className="space-y-2">
                  <label className="text-[10px] font-black text-slate-400 uppercase ml-1">Notas u Observaciones</label>
                  <textarea
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    placeholder="Opcional: aclaraciones sobre el turno..."
                    className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl text-sm font-bold outline-none focus:border-blue-500 transition-all resize-none h-24"
                  />
                </div>

                <div className="bg-amber-50 p-4 rounded-2xl border border-amber-100 flex gap-3">
                  <AlertCircle className="text-amber-500 shrink-0" size={18} />
                  <p className="text-[10px] text-amber-800 font-bold leading-tight uppercase opacity-80">
                    Al confirmar, declaras que el dinero físico coincide con este resumen.
                  </p>
                </div>

                <button
                  onClick={handleFinalClose}
                  disabled={isClosing}
                  className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95"
                >
                  {isClosing ? 'Procesando...' : 'Confirmar y Cerrar Caja'}
                </button>
              </motion.div>
            ) : (
              <motion.div key="done" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="text-center py-10">
                <div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                  <CheckCircle2 size={48} />
                </div>
                <h3 className="text-2xl font-black text-slate-900 uppercase mb-2">¡Caja Cerrada!</h3>
                <p className="text-slate-500 font-bold text-sm mb-8">El turno ha finalizado correctamente. Los reportes han sido enviados a tesorería.</p>
                <button
                  onClick={handleDownloadPdf}
                  className="w-full py-4 bg-blue-600 text-white font-black uppercase text-xs rounded-2xl hover:bg-blue-700 transition-all mb-3 flex items-center justify-center gap-2"
                >
                  <Printer size={16} /> Descargar Acta de Cierre
                </button>
                <button
                  onClick={() => { onComplete(); onClose(); }}
                  className="w-full py-5 bg-slate-900 text-white font-black uppercase text-xs rounded-2xl hover:bg-black transition-all"
                >
                  Volver al Inicio
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.div>
    </div>
  );
}

interface SummaryRowProps {
  label: string;
  value: number;
  icon: React.ReactNode;
  isSale?: boolean;
}

function SummaryRow({ label, value, icon, isSale }: SummaryRowProps) {
  return (
    <div className="flex justify-between items-center p-3.5 bg-slate-50 rounded-xl border border-slate-100 group hover:bg-white hover:border-blue-100 transition-all">
      <div className="flex items-center gap-3">
        <div className="text-slate-400 group-hover:text-blue-500 transition-colors">{icon}</div>
        <span className="text-[10px] font-black text-slate-500 uppercase tracking-tight">{label}</span>
      </div>
      <span className={clsx("font-mono font-black text-sm", isSale ? "text-slate-800" : "text-slate-400")}>
        $ {value.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
      </span>
    </div>
  );
}