import React, { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';
import { 
  Wallet, 
  Receipt, 
  CreditCard, 
  History, 
  Plus, 
  Trash2, 
  CheckCircle2, 
  AlertCircle,
  Lock
} from 'lucide-react';

// =========================================================================
// 1. CONFIGURACIÓN DE SUPABASE (Cambia esto con tus credenciales reales)
// =========================================================================
const SUPABASE_URL = "TU_SUPABASE_URL_AQUI";
const SUPABASE_ANON_KEY = "TU_SUPABASE_ANON_KEY_AQUI";
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// =========================================================================
// 2. DEFINICIÓN DE TIPOS
// =========================================================================
interface Bill {
  id: string;
  name: string;
  amount: number;
  period: 'Quincena 1' | 'Quincena 2';
}

interface VirtualCard {
  id: string;
  name: string;
  monthly_budget: number;
  funding_type: 'Mensual único' | 'Dividido 50/50';
  current_balance: number;
}

interface Transaction {
  id: string;
  card_id: string | null;
  description: string;
  amount: number;
  type: 'ingreso_q1' | 'ingreso_q2' | 'gasto_tarjeta' | 'pago_bill';
  month_year: string;
  created_at: string;
}

// =========================================================================
// 3. COMPONENTE PRINCIPAL DEL DASHBOARD
// =========================================================================
export default function QuincenaDashboard() {
  // Estados de la Aplicación
  const [bills, setBills] = useState<Bill[]>([]);
  const [cards, setCards] = useState<VirtualCard[]>([]);
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [isAdmin, setIsAdmin] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(true);
  const [userEmail, setUserEmail] = useState<string>('');

  // Estados para los estados de depósito (Persistidos desde la BD)
  const [q1Depositado, setQ1Depositado] = useState<boolean>(false);
  const [q2Depositado, setQ2Depositado] = useState<boolean>(false);

  // Estados para formularios de agregar nuevos elementos
  const [newBill, setNewBill] = useState({ name: '', amount: '', period: 'Quincena 1' as 'Quincena 1' | 'Quincena 2' });
  const [newCard, setNewCard] = useState({ name: '', monthly_budget: '', funding_type: 'Dividido 50/50' as 'Mensual único' | 'Dividido 50/50' });
  const [newExpense, setNewExpense] = useState({ cardId: '', description: '', amount: '' });

  // Obtener el mes y año actual en formato YYYY-MM para la lógica quincenal
  const currentMonthYear = new Date().toISOString().slice(0, 7); 

  // Cargar datos iniciales al montar la aplicación
  useEffect(() => {
    async function initApp() {
      try {
        // 1. Obtener sesión del usuario actual
        const { data: { session } } = await supabase.auth.getSession();
        if (session?.user) {
          setUserEmail(session.user.email || '');
          // Verificar rol en la tabla profiles
          const { data: profile } = await supabase
            .from('profiles')
            .select('role')
            .eq('id', session.user.id)
            .single();
          setIsAdmin(profile?.role === 'admin');
        } else {
          // Por seguridad en desarrollo local si no hay login, te dejamos como admin temporal
          setIsAdmin(true); 
        }

        // 2. Descargar datos de la Base de Datos
        await refreshData();
      } catch (error) {
        console.error("Error inicializando la app:", error);
      } finally {
        setLoading(false);
      }
    }
    initApp();
  }, []);

  // Función global para refrescar los datos reflejando cambios en tiempo real
  async function refreshData() {
    const { data: dbBills } = await supabase.from('fixed_bills').select('*');
    const { data: dbCards } = await supabase.from('virtual_cards').select('*');
    const { data: dbTx } = await supabase.from('transactions').select('*').order('created_at', { ascending: false });

    if (dbBills) setBills(dbBills);
    if (dbCards) setCards(dbCards);
    if (dbTx) {
      setTransactions(dbTx);
      // Derivar si las quincenas ya fueron depositadas este mes basándonos en el historial real
      setQ1Depositado(dbTx.some(t => t.type === 'ingreso_q1' && t.month_year === currentMonthYear));
      setQ2Depositado(dbTx.some(t => t.type === 'ingreso_q2' && t.month_year === currentMonthYear));
    }
  }

  // =========================================================================
  // LOGICA DE NEGOCIO: PROCESAR QUINCENAS (MATEMÁTICAS EXACTAS)
  // =========================================================================
  
  async function handleRegisterQ1() {
    if (!isAdmin || q1Depositado) return;
    setLoading(true);

    try {
      // 1. Insertar marcador de control en transactions para congelar la Q1 este mes
      await supabase.from('transactions').insert({
        description: `💰 Depósito Cheque Quincena 1 - ${currentMonthYear}`,
        amount: 2700,
        type: 'ingreso_q1',
        month_year: currentMonthYear
      });

      // 2. Pagar automáticamente los bills de la Q1
      const q1Bills = bills.filter(b => b.period === 'Quincena 1');
      for (const bill of q1Bills) {
        await supabase.from('transactions').insert({
          description: `📉 Pago Automático: ${bill.name}`,
          amount: bill.amount,
          type: 'pago_bill',
          month_year: currentMonthYear
        });
      }

      // 3. Fondear Tarjetas Virtuales según sus reglas
      for (const card of cards) {
        let extraFunding = 0;
        if (card.funding_type === 'Mensual único') {
          extraFunding = Number(card.monthly_budget);
        } else if (card.funding_type === 'Dividido 50/50') {
          extraFunding = Number(card.monthly_budget) / 2;
        }

        if (extraFunding > 0) {
          // Actualizar saldo de la tarjeta
          await supabase
            .from('virtual_cards')
            .update({ current_balance: Number(card.current_balance) + extraFunding })
            .eq('id', card.id);

          // Guardar registro en el historial de la tarjeta
          await supabase.from('transactions').insert({
            card_id: card.id,
            description: `🔋 Fondeo Q1 para ${card.name}`,
            amount: extraFunding,
            type: 'ingreso_q1',
            month_year: currentMonthYear
          });
        }
      }

      await refreshData();
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }

  async function handleRegisterQ2() {
    if (!isAdmin || q2Depositado) return;
    setLoading(true);

    try {
      // 1. Insertar marcador para congelar la Q2
      await supabase.from('transactions').insert({
        description: `💰 Depósito Cheque Quincena 2 - ${currentMonthYear}`,
        amount: 2700,
        type: 'ingreso_q2',
        month_year: currentMonthYear
      });

      // 2. Pagar automáticamente los bills de la Q2 (Incluye la Renta)
      const q2Bills = bills.filter(b => b.period === 'Quincena 2');
      for (const bill of q2Bills) {
        await supabase.from('transactions').insert({
          description: `📉 Pago Automático: ${bill.name}`,
          amount: bill.amount,
          type: 'pago_bill',
          month_year: currentMonthYear
        });
      }

      // 3. Fondear el 50% restante únicamente a las tarjetas divididas
      const dividedCards = cards.filter(c => c.funding_type === 'Dividido 50/50');
      for (const card of dividedCards) {
        const extraFunding = Number(card.monthly_budget) / 2;

        await supabase
          .from('virtual_cards')
          .update({ current_balance: Number(card.current_balance) + extraFunding })
          .eq('id', card.id);

        await supabase.from('transactions').insert({
          card_id: card.id,
          description: `🔋 Fondeo Q2 (50% Restante) para ${card.name}`,
          amount: extraFunding,
          type: 'ingreso_q2',
          month_year: currentMonthYear
        });
      }

      await refreshData();
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }

  // Restar un gasto real hecho con alguna de tus tarjetas virtuales
  async function handleAddExpense(e: React.FormEvent) {
    e.preventDefault();
    if (!isAdmin || !newExpense.cardId || !newExpense.amount) return;

    const selectedCard = cards.find(c => c.id === newExpense.cardId);
    if (!selectedCard) return;

    const expenseAmount = Number(newExpense.amount);

    // 1. Restar el dinero del saldo disponible de la tarjeta
    await supabase
      .from('virtual_cards')
      .update({ current_balance: Number(selectedCard.current_balance) - expenseAmount })
      .eq('id', selectedCard.id);

    // 2. Registrar el gasto en el historial de transacciones
    await supabase.from('transactions').insert({
      card_id: selectedCard.id,
      description: newExpense.description || `Gasto en ${selectedCard.name}`,
      amount: expenseAmount,
      type: 'gasto_tarjeta',
      month_year: currentMonthYear
    });

    setNewExpense({ cardId: '', description: '', amount: '' });
    await refreshData();
  }

  // Agregar nuevos Bills o Tarjetas desde el panel de Configuración
  async function handleAddBill(e: React.FormEvent) {
    e.preventDefault();
    if (!isAdmin || !newBill.name || !newBill.amount) return;
    await supabase.from('fixed_bills').insert({
      name: newBill.name,
      amount: Number(newBill.amount),
      period: newBill.period
    });
    setNewBill({ name: '', amount: '', period: 'Quincena 1' });
    await refreshData();
  }

  async function handleAddCard(e: React.FormEvent) {
    e.preventDefault();
    if (!isAdmin || !newCard.name || !newCard.monthly_budget) return;
    await supabase.from('virtual_cards').insert({
      name: newCard.name,
      monthly_budget: Number(newCard.monthly_budget),
      funding_type: newCard.funding_type,
      current_balance: 0
    });
    setNewCard({ name: '', monthly_budget: '', funding_type: 'Dividido 50/50' });
    await refreshData();
  }

  // Funciones para eliminar conceptos
  async function handleDeleteBill(id: string) {
    if (!isAdmin) return;
    await supabase.from('fixed_bills').delete().eq('id', id);
    await refreshData();
  }

  async function handleDeleteCard(id: string) {
    if (!isAdmin) return;
    await supabase.from('virtual_cards').delete().eq('id', id);
    await refreshData();
  }

  // Reiniciar ciclo del simulador (Limpieza para pruebas o nuevo mes)
  async function handleResetCycle() {
    if (!isAdmin) return;
    if (confirm("¿Estás seguro de que deseas limpiar los registros de este mes? Esto borrará las transacciones del mes actual.")) {
      await supabase.from('transactions').delete().eq('month_year', currentMonthYear);
      // Resetear balances de tarjetas a 0 para simular de nuevo limpio
      await supabase.from('virtual_cards').update({ current_balance: 0 }).neq('id', '00000000-0000-0000-0000-000000000000');
      await refreshData();
    }
  }

  // =========================================================================
  // CÁLCULOS MATEMÁTICOS PARA LA VISTA PREVIA (SIMULADOR)
  // =========================================================================
  const q1BillsTotal = bills.filter(b => b.period === 'Quincena 1').reduce((acc, b) => acc + Number(b.amount), 0);
  const q2BillsTotal = bills.filter(b => b.period === 'Quincena 2').reduce((acc, b) => acc + Number(b.amount), 0);

  const q1CardsTotal = cards.reduce((acc, c) => {
    return acc + (c.funding_type === 'Mensual único' ? Number(c.monthly_budget) : Number(c.monthly_budget) / 2);
  }, 0);

  const q2CardsTotal = cards.reduce((acc, c) => {
    return acc + (c.funding_type === 'Dividido 50/50' ? Number(c.monthly_budget) / 2 : 0);
  }, 0);

  const remanenteQ1 = 2700 - q1BillsTotal - q1CardsTotal;
  const remanenteQ2 = 2700 - q2BillsTotal - q2CardsTotal;

  if (loading) {
    return (
      <div className="min-h-screen bg-[#0B0F17] text-white flex items-center justify-center font-['Lexend']">
        <div className="animate-pulse text-gray-400">Cargando ecosistema financiero...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0B0F17] text-[#E2E8F0] p-4 md:p-8 font-['Lexend'] select-none">
      
      {/* HEADER DE LA APLICACIÓN */}
      <header className="max-w-7xl mx-auto mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-gray-800 pb-6">
        <div>
          <p className="text-xs uppercase tracking-widest text-amber-500 font-semibold mb-1">Flujo de Caja Quincenal</p>
          <h1 className="text-3xl font-bold text-white tracking-tight">Ledger Quincenal</h1>
          <p className="text-sm text-gray-400 mt-1">Dos cheques de $2,700 al mes. Automatización de sobres y blindaje de renta.</p>
        </div>
        <div className="bg-[#151D2A] px-6 py-4 rounded-xl border border-gray-800 text-right min-w-[200px]">
          <span className="text-xs text-gray-400 block uppercase tracking-wider">Ingreso Mensual Fijo</span>
          <span className="text-2xl font-black text-white">$5,400.00</span>
        </div>
      </header>

      {/* MODO SOLO LECTURA WARNING */}
      {!isAdmin && (
        <div className="max-w-7xl mx-auto mb-6 bg-amber-950/40 border border-amber-800 text-amber-300 p-4 rounded-xl flex items-center gap-3 text-sm">
          <Lock size={18} className="shrink-0 text-amber-500" />
          <span><strong>Modo de Vista Protegido:</strong> Estás conectado como lector (`{userEmail}`). Solo el administrador puede realizar modificaciones o registrar quincenas para evitar errores accidentales.</span>
        </div>
      )}

      <main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        {/* COLUMNA IZQUIERDA: CONFIGURADOR DE BILLS FIJOS */}
        <section className="bg-[#111723] rounded-2xl p-6 border border-gray-800/60 shadow-xl flex flex-col justify-between">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Receipt className="text-amber-500" size={20} />
              <h2 className="text-lg font-bold text-white">Bills Fijos Mensuales</h2>
            </div>
            
            <div className="space-y-2 max-h-[280px] overflow-y-auto pr-1">
              {bills.map(bill => (
                <div key={bill.id} className="flex justify-between items-center bg-[#182030] p-3 rounded-xl border border-gray-800/40 hover:border-gray-700 transition">
                  <div>
                    <p className="font-semibold text-white text-sm">{bill.name}</p>
                    <span className="text-xs bg-gray-800 px-2 py-0.5 rounded text-gray-400">{bill.period}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="font-mono text-sm font-bold text-gray-300">${Number(bill.amount).toFixed(2)}</span>
                    {isAdmin && (
                      <button onClick={() => handleDeleteBill(bill.id)} className="text-gray-500 hover:text-red-400 transition p-1">
                        <Trash2 size={15} />
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {isAdmin && (
            <form onSubmit={handleAddBill} className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-gray-800">
              <input type="text" placeholder="Nombre (Ej: Internet)" value={newBill.name} onChange={e => setNewBill({...newBill, name: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-amber-500 text-white" />
              <input type="number" placeholder="Monto ($)" value={newBill.amount} onChange={e => setNewBill({...newBill, amount: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-amber-500 text-white" />
              <select value={newBill.period} onChange={e => setNewBill({...newBill, period: e.target.value as any})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-2 py-2 text-xs focus:outline-none focus:border-amber-500 text-white">
                <option value="Quincena 1">Quincena 1</option>
                <option value="Quincena 2">Quincena 2</option>
              </select>
              <button type="submit" className="col-span-3 bg-amber-500 hover:bg-amber-600 transition text-black font-bold py-2 rounded-lg text-xs flex items-center justify-center gap-1 mt-1">
                <Plus size={14} /> Agregar Bill Fijo
              </button>
            </form>
          )}
        </section>

        {/* COLUMNA DERECHA: SECCIÓN DE TARJETAS VIRTUALES (SOBRES DIGITALES) */}
        <section className="bg-[#111723] rounded-2xl p-6 border border-gray-800/60 shadow-xl flex flex-col justify-between">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <CreditCard className="text-amber-500" size={20} />
              <h2 className="text-lg font-bold text-white">Tarjetas Virtuales (Sobres)</h2>
            </div>

            <div className="space-y-2 max-h-[280px] overflow-y-auto pr-1">
              {cards.map(card => {
                const porcentaje = Math.min(100, Math.max(0, (card.current_balance / card.monthly_budget) * 100));
                return (
                  <div key={card.id} className="bg-[#182030] p-3 rounded-xl border border-gray-800/40 hover:border-gray-700 transition">
                    <div className="flex justify-between items-center mb-1.5">
                      <div>
                        <p className="font-semibold text-white text-sm">{card.name}</p>
                        <span className="text-[10px] text-gray-400 font-medium tracking-wide uppercase">{card.funding_type}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="text-right">
                          <span className="font-mono text-xs text-gray-400 block">Presupuesto: ${card.monthly_budget}</span>
                          <span className="font-mono text-sm font-black text-emerald-400">Disponible: ${Number(card.current_balance).toFixed(2)}</span>
                        </div>
                        {isAdmin && (
                          <button onClick={() => handleDeleteCard(card.id)} className="text-gray-500 hover:text-red-400 transition p-1">
                            <Trash2 size={14} />
                          </button>
                        )}
                      </div>
                    </div>
                    {/* Barra de progreso visual */}
                    <div className="w-full bg-[#0B0F17] h-1.5 rounded-full overflow-hidden">
                      <div className="bg-emerald-500 h-full transition-all duration-500" style={{ width: `${porcentaje}%` }}></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {isAdmin && (
            <form onSubmit={handleAddCard} className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-gray-800">
              <input type="text" placeholder="Nombre (Ej: Gasolina)" value={newCard.name} onChange={e => setNewCard({...newCard, name: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-amber-500 text-white" />
              <input type="number" placeholder="Presupuesto Mensual" value={newCard.monthly_budget} onChange={e => setNewCard({...newCard, monthly_budget: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-amber-500 text-white" />
              <select value={newCard.funding_type} onChange={e => setNewCard({...newCard, funding_type: e.target.value as any})} className="bg-[#0B0F17] border border-gray-800 rounded-lg px-2 py-2 text-xs focus:outline-none focus:border-amber-500 text-white">
                <option value="Dividido 50/50">Dividido 50/50</option>
                <option value="Mensual único">Mensual único</option>
              </select>
              <button type="submit" className="col-span-3 bg-amber-500 hover:bg-amber-600 transition text-black font-bold py-2 rounded-lg text-xs flex items-center justify-center gap-1 mt-1">
                <Plus size={14} /> Agregar Tarjeta Virtual
              </button>
            </form>
          )}
        </section>

        {/* SECCIÓN INFERIOR COMPLETA: SIMULADOR DE FLUJO Q1 VS Q2 */}
        <section className="lg:col-span-2 border border-gray-800 bg-[#111723] rounded-2xl p-6 mt-2 shadow-2xl">
          <div className="flex justify-between items-center mb-6">
            <div className="flex items-center gap-2">
              <Wallet className="text-amber-500" size={22} />
              <h2 className="text-xl font-bold text-white tracking-tight">Simulador - Proyección Q1 vs Q2 ({currentMonthYear})</h2>
            </div>
            {isAdmin && (
              <button onClick={handleResetCycle} className="text-xs font-semibold text-gray-500 hover:text-amber-500 transition border border-gray-800 hover:border-amber-500/30 px-3 py-1.5 rounded-lg bg-[#0B0F17]">
                Reiniciar ciclo quincenal del mes
              </button>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
            
            {/* VISTA QUINCENA 1 */}
            <div className="bg-white text-[#0B0F17] rounded-xl p-5 flex flex-col justify-between shadow-inner">
              <div>
                <div className="flex justify-between items-center border-b border-gray-200 pb-2 mb-3">
                  <h3 className="text-lg font-black uppercase tracking-tight text-gray-900">Quincena 1</h3>
                  <span className={`text-[10px] font-black px-2.5 py-0.5 rounded-full tracking-wider uppercase ${q1Depositado ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'}`}>
                    {q1Depositado ? '✓ DEPOSITADO' : 'PENDIENTE'}
                  </span>
                </div>
                
                <div className="space-y-2 text-xs font-medium text-gray-600">
                  <div className="flex justify-between font-bold text-gray-900 text-sm"><span>Ingreso (Cheque fijo)</span><span>$2,700.00</span></div>
                  <div className="flex justify-between border-dashed border-b pb-1 text-red-600"><span>Bills fijos de Q1</span><span>-${q1BillsTotal.toFixed(2)}</span></div>
                  <div className="flex justify-between border-dashed border-b pb-1 text-orange-600"><span>Tarjetas - Fondeo Mensual Único (100%)</span><span>-${cards.filter(c => c.funding_type === 'Mensual único').reduce((a,c)=>a+Number(c.monthly_budget),0).toFixed(2)}</span></div>
                  <div className="flex justify-between text-orange-600"><span>Tarjetas - Fondeo Dividido (50% Inicial)</span><span>-${cards.filter(c => c.funding_type === 'Dividido 50/50').reduce((a,c)=>a+(Number(c.monthly_budget)/2),0).toFixed(2)}</span></div>
                </div>
              </div>

              <div className="mt-6 border-t border-gray-200 pt-4">
                <div className="flex justify-between items-baseline mb-4">
                  <span className="text-[11px] uppercase font-bold tracking-wider text-gray-500">Remanente Neto (Sobrante Real)</span>
                  <span className="text-2xl font-black text-gray-900 tracking-tight">${remanenteQ1.toFixed(2)}</span>
                </div>
                <button disabled={!isAdmin || q1Depositado} onClick={handleRegisterQ1} className={`w-full py-3 rounded-xl font-bold text-sm tracking-wide transition flex items-center justify-center gap-2 ${q1Depositado ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-[#0B0F17] text-white hover:bg-gray-800'}`}>
                  {q1Depositado ? <CheckCircle2 size={16} /> : null}
                  {q1Depositado ? 'INGRESO Q1 REGISTRADO' : 'REGISTRAR INGRESO QUINCENA 1'}
                </button>
              </div>
            </div>

            {/* VISTA QUINCENA 2 (PROTECCIÓN DE LA RENTA) */}
            <div className="bg-white text-[#0B0F17] rounded-xl p-5 flex flex-col justify-between shadow-inner">
              <div>
                <div className="flex justify-between items-center border-b border-gray-200 pb-2 mb-3">
                  <h3 className="text-lg font-black uppercase tracking-tight text-gray-900">Quincena 2</h3>
                  <span className={`text-[10px] font-black px-2.5 py-0.5 rounded-full tracking-wider uppercase ${q2Depositado ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'}`}>
                    {q2Depositado ? '✓ DEPOSITADO' : 'PENDIENTE'}
                  </span>
                </div>

                <div className="space-y-2 text-xs font-medium text-gray-600">
                  <div className="flex justify-between font-bold text-gray-900 text-sm"><span>Ingreso (Cheque fijo)</span><span>$2,700.00</span></div>
                  <div className="flex justify-between border-dashed border-b pb-1 text-red-600"><span>Bills fijos de Q2 (Incl. Renta)</span><span>-${q2BillsTotal.toFixed(2)}</span></div>
                  <div className="flex justify-between border-dashed border-b pb-1 text-gray-400"><span>Tarjetas - Fondeo Mensual Único</span><span>-$0.00 (Ya fondeadas en Q1)</span></div>
                  <div className="flex justify-between text-orange-600"><span>Tarjetas - Fondeo Dividido (50% Restante)</span><span>-${q2CardsTotal.toFixed(2)}</span></div>
                </div>
              </div>

              <div className="mt-6 border-t border-gray-200 pt-4">
                <div className="flex justify-between items-baseline mb-4">
                  <span className="text-[11px] uppercase font-bold tracking-wider text-gray-500">Remanente Neto (Sobrante Real)</span>
                  <span className={`text-2xl font-black tracking-tight ${remanenteQ2 < 0 ? 'text-red-600' : 'text-gray-900'}`}>
                    ${remanenteQ2.toFixed(2)}
                  </span>
                </div>
                <button disabled={!isAdmin || q2Depositado || !q1Depositado} onClick={handleRegisterQ2} className={`w-full py-3 rounded-xl font-bold text-sm tracking-wide transition flex items-center justify-center gap-2 ${q2Depositado || !q1Depositado ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-[#0B0F17] text-white hover:bg-gray-800'}`}>
                  {q2Depositado ? <CheckCircle2 size={16} /> : null}
                  {!q1Depositado ? 'BLOQUEADO (HASTA REGISTRAR Q1)' : q2Depositado ? 'INGRESO Q2 REGISTRADO' : 'REGISTRAR INGRESO QUINCENA 2'}
                </button>
              </div>
            </div>

          </div>
        </section>

        {/* SECCIÓN GASTOS REALES EXTRA (PARA DESCONTAR DÍA A DÍA) */}
        {isAdmin && cards.length > 0 && (
          <section className="lg:col-span-2 bg-[#111723] rounded-2xl p-6 border border-gray-800/60 shadow-xl mt-2">
            <div className="flex items-center gap-2 mb-4">
              <History className="text-amber-500" size={20} />
              <h2 className="text-lg font-bold text-white">Debitar Gasto Diario de Tarjeta Virtual</h2>
            </div>
            <form onSubmit={handleAddExpense} className="grid grid-cols-1 md:grid-cols-4 gap-3">
              <select value={newExpense.cardId} onChange={e => setNewExpense({...newExpense, cardId: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-xl px-3 py-2.5 text-xs text-white focus:outline-none focus:border-amber-500">
                <option value="">Selecciona Tarjeta Virtual...</option>
                {cards.map(c => <option key={c.id} value={c.id}>{c.name} (Disp: ${Number(c.current_balance).toFixed(2)})</option>)}
              </select>
              <input type="text" placeholder="Descripción del gasto (Ej: Wawa, Publix)" value={newExpense.description} onChange={e => setNewExpense({...newExpense, description: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-xl px-3 py-2.5 text-xs text-white focus:outline-none focus:border-amber-500" />
              <input type="number" step="0.01" placeholder="Monto exacto ($)" value={newExpense.amount} onChange={e => setNewExpense({...newExpense, amount: e.target.value})} className="bg-[#0B0F17] border border-gray-800 rounded-xl px-3 py-2.5 text-xs text-white focus:outline-none focus:border-amber-500" />
              <button type="submit" className="bg-emerald-500 hover:bg-emerald-600 text-black font-black py-2.5 rounded-xl text-xs transition uppercase tracking-wider">
                Registrar Salida de Dinero
              </button>
            </form>
          </section>
        )}

      </main>
    </div>
  );
}