import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithPopup, 
  GoogleAuthProvider, 
  onAuthStateChanged, 
  signOut,
  signInWithCustomToken,
  signInAnonymously
} from 'firebase/auth';
import { 
  getFirestore, 
  doc, 
  setDoc, 
  onSnapshot, 
  collection 
} from 'firebase/firestore';
import { 
  Chart as ChartJS, 
  ArcElement, 
  Tooltip, 
  Legend, 
  CategoryScale, 
  LinearScale, 
  BarElement 
} from 'chart.js';
import { Doughnut, Bar } from 'react-chartjs-2';
import { 
  PlusCircle, 
  Trash2, 
  Save, 
  LogOut, 
  TrendingUp, 
  DollarSign, 
  CreditCard, 
  ShieldCheck,
  Edit3
} from 'lucide-react';

ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement);

// --- CONFIGURACIÓN FIREBASE ---
const firebaseConfig = {
  apiKey: "AIzaSyBVuBPoKpYL0Aiz7v8kl0QrTkDCiNp73K0",
  authDomain: "plan-financiero-ede7a.firebaseapp.com",
  projectId: "plan-financiero-ede7a",
  storageBucket: "plan-financiero-ede7a.firebasestorage.app",
  messagingSenderId: "934131384377",
  appId: "1:934131384377:web:5558073cd488364663cde8"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'eduardo-pro-2026';

// --- COMPONENTE PRINCIPAL ---
export default function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [timeframe, setTimeframe] = useState('quincenal'); // 'quincenal' | 'mensual'
  const [view, setView] = useState('dashboard'); // 'dashboard' | 'admin'
  
  // Datos Financieros (Estado Global)
  const [finanzas, setFinanzas] = useState({
    ingresoBruto: 97750,
    gastosFijos: [
      { id: '1', nombre: "Crédito Camioneta", monto: 8600 },
      { id: '2', nombre: "Escuela Tere", monto: 6600 },
      { id: '3', nombre: "Súper (Efectivo)", monto: 6000 },
      { id: '4', nombre: "Limpieza", monto: 5400 },
      { id: '5', nombre: "Casa (Renta)", monto: 4731.20 },
      { id: '6', nombre: "Gastos Médicos", monto: 4659 },
      { id: '7', nombre: "Gasolina", monto: 4000 },
      { id: '8', nombre: "Luz", monto: 3500 },
      { id: '9', nombre: "Internet", monto: 1100 },
      { id: '10', nombre: "Streaming", monto: 1042.66 },
      { id: '11', nombre: "Agua", monto: 800 },
      { id: '12', nombre: "Celular", monto: 500 },
      { id: '13', nombre: "Jardinero", monto: 400 }
    ],
    metas: {
      deudaEspecial: { actual: 0, meta: 200000, pagoSugerido: 10000 },
      fondoEmergencia: { actual: 0, meta: 142000, pagoSugerido: 5000 },
      inversion: { actual: 0, meta: 100000, pagoSugerido: 3000 }
    }
  });

  // --- AUTENTICACIÓN ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        }
      } catch (e) {
        console.error("Auth init error:", e);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // --- PERSISTENCIA (FIRESTORE) ---
  useEffect(() => {
    if (!user) return;

    // Suscribirse a los datos del usuario
    const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'config', 'datos_principales');
    const unsubscribe = onSnapshot(docRef, (docSnap) => {
      if (docSnap.exists()) {
        setFinanzas(docSnap.data());
      } else {
        // Si no existen datos, guardar los iniciales
        setDoc(docRef, finanzas);
      }
    }, (err) => console.error("Firestore Error:", err));

    return () => unsubscribe();
  }, [user]);

  const saveToCloud = async (newData) => {
    if (!user) return;
    const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'config', 'datos_principales');
    await setDoc(docRef, newData);
  };

  // --- LÓGICA DE CÁLCULO ---
  const netoEfectivo = 71620; // Basado en tus cálculos previos de ISR 2026
  
  const totalFijosMensual = useMemo(() => 
    finanzas.gastosFijos.reduce((sum, g) => sum + g.monto, 0), 
  [finanzas.gastosFijos]);

  const disponibleMensual = netoEfectivo - totalFijosMensual - finanzas.metas.deudaEspecial.pagoSugerido;
  const ahorroTotalMensual = finanzas.metas.fondoEmergencia.pagoSugerido + finanzas.metas.inversion.pagoSugerido;
  const gustosMensual = disponibleMensual - ahorroTotalMensual;

  const getMonto = (valor) => timeframe === 'mensual' ? valor : valor / 2;

  // --- ACCIONES ---
  const loginGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider);
  };

  const handleUpdateMeta = (key, delta) => {
    const newData = { ...finanzas };
    newData.metas[key].actual = Math.max(0, Math.min(newData.metas[key].meta, newData.metas[key].actual + delta));
    setFinanzas(newData);
    saveToCloud(newData);
  };

  const handleAddGasto = () => {
    const nombre = prompt("Nombre del gasto:");
    const monto = parseFloat(prompt("Monto mensual:"));
    if (nombre && !isNaN(monto)) {
      const newData = { ...finanzas, gastosFijos: [...finanzas.gastosFijos, { id: Date.now().toString(), nombre, monto }] };
      setFinanzas(newData);
      saveToCloud(newData);
    }
  };

  const handleDeleteGasto = (id) => {
    const newData = { ...finanzas, gastosFijos: finanzas.gastosFijos.filter(g => g.id !== id) };
    setFinanzas(newData);
    saveToCloud(newData);
  };

  const handleUpdatePagoMeta = (key, valor) => {
    const newData = { ...finanzas };
    newData.metas[key].pagoSugerido = parseFloat(valor) || 0;
    setFinanzas(newData);
    saveToCloud(newData);
  };

  if (loading) return (
    <div className="flex h-screen items-center justify-center bg-slate-50">
      <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
    </div>
  );

  if (!user) return (
    <div className="flex h-screen items-center justify-center bg-slate-50 p-6 text-center">
      <div className="max-w-md w-full bg-white p-8 rounded-3xl shadow-xl border border-slate-200">
        <TrendingUp className="w-16 h-16 text-blue-600 mx-auto mb-6" />
        <h1 className="text-3xl font-black text-slate-900 mb-2">Bienvenido, Eduardo</h1>
        <p className="text-slate-500 mb-8">Inicia sesión con tu cuenta de Google para gestionar tu plan financiero de forma privada y segura.</p>
        <button 
          onClick={loginGoogle}
          className="w-full flex items-center justify-center gap-3 bg-slate-900 text-white font-bold py-4 rounded-2xl hover:bg-black transition-all active:scale-95"
        >
          <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/action/google.svg" className="w-6 h-6 bg-white rounded-full p-1" alt="Google" />
          Continuar con Google
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-700 pb-12">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-2 rounded-xl">
              <TrendingUp className="text-white w-6 h-6" />
            </div>
            <div>
              <h1 className="text-xl font-black text-slate-900 tracking-tight">Plan Eduardo 2026</h1>
              <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{user.displayName}</p>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="flex bg-slate-100 p-1 rounded-xl">
              <button 
                onClick={() => setTimeframe('quincenal')}
                className={`px-4 py-2 text-xs font-bold rounded-lg transition-all ${timeframe === 'quincenal' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500'}`}
              >
                Quincenal
              </button>
              <button 
                onClick={() => setTimeframe('mensual')}
                className={`px-4 py-2 text-xs font-bold rounded-lg transition-all ${timeframe === 'mensual' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500'}`}
              >
                Mensual
              </button>
            </div>
            <button onClick={() => signOut(auth)} className="p-2 text-slate-400 hover:text-red-500 transition-colors">
              <LogOut size={20} />
            </button>
          </div>
        </div>

        <nav className="max-w-6xl mx-auto px-6 flex gap-8 border-t border-slate-100">
          <button 
            onClick={() => setView('dashboard')}
            className={`py-4 text-sm font-bold border-b-2 transition-all ${view === 'dashboard' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-400'}`}
          >
            Dashboard
          </button>
          <button 
            onClick={() => setView('admin')}
            className={`py-4 text-sm font-bold border-b-2 transition-all ${view === 'admin' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-400'}`}
          >
            Gestionar Plan
          </button>
        </nav>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-8">
        
        {view === 'dashboard' ? (
          <div className="space-y-8 animate-in fade-in duration-300">
            {/* KPIs */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <StatCard label="Ingreso Neto" val={getMonto(netoEfectivo)} icon={<DollarSign className="text-blue-600" />} color="blue" />
              <StatCard label="Gasto Fijo" val={getMonto(totalFijosMensual)} icon={<ShieldCheck className="text-slate-600" />} color="slate" />
              <StatCard label="Pago Deudas" val={getMonto(finanzas.metas.deudaEspecial.pagoSugerido)} icon={<CreditCard className="text-red-600" />} color="red" />
              <StatCard label="Presupuesto Gustos" val={getMonto(gustosMensual)} icon={<TrendingUp className="text-emerald-600" />} color="emerald" />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Distribución */}
              <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
                <h3 className="font-black text-slate-800 mb-8 flex items-center gap-2">
                  <div className="w-2 h-6 bg-blue-600 rounded-full"></div>
                  Distribución de Ingresos
                </h3>
                <div className="h-[300px]">
                  <Doughnut 
                    data={{
                      labels: ['Gastos Fijos', 'Deuda Especial', 'Ahorro Total', 'Gustos'],
                      datasets: [{
                        data: [totalFijosMensual, finanzas.metas.deudaEspecial.pagoSugerido, ahorroTotalMensual, gustosMensual],
                        backgroundColor: ['#64748b', '#ef4444', '#10b981', '#3b82f6'],
                        borderWidth: 0,
                        cutout: '75%'
                      }]
                    }}
                    options={{ maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }}
                  />
                </div>
              </div>

              {/* Guía Automática */}
              <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
                <h3 className="font-black text-slate-800 mb-4">Hoja de Ruta {timeframe === 'mensual' ? 'Mensual' : 'Quincenal'}</h3>
                <div className="space-y-4">
                  <GuideItem label="Gasto Operativo" sub="Mantener en cuenta principal" monto={getMonto(totalFijosMensual)} color="slate" />
                  <GuideItem label="Deuda Especial" sub="Transferencia a acreedor" monto={getMonto(finanzas.metas.deudaEspecial.pagoSugerido)} color="red" />
                  <GuideItem label="Ahorro Total" sub="Emergencia + Inversión" monto={getMonto(ahorroTotalMensual)} color="emerald" />
                  <GuideItem label="Presupuesto Gustos" sub="Dinero libre disponible" monto={getMonto(gustosMensual)} color="blue" />
                </div>
              </div>
            </div>

            {/* Rastreadores de Metas */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <GoalTracker 
                title="Deuda Especial" 
                goal={finanzas.metas.deudaEspecial} 
                color="red" 
                onAdd={() => handleUpdateMeta('deudaEspecial', getMonto(finanzas.metas.deudaEspecial.pagoSugerido))}
              />
              <GoalTracker 
                title="Fondo Emergencia" 
                goal={finanzas.metas.fondoEmergencia} 
                color="emerald" 
                onAdd={() => handleUpdateMeta('fondoEmergencia', getMonto(finanzas.metas.fondoEmergencia.pagoSugerido))}
              />
              <GoalTracker 
                title="Ahorro / Inversión" 
                goal={finanzas.metas.inversion} 
                color="blue" 
                onAdd={() => handleUpdateMeta('inversion', getMonto(finanzas.metas.inversion.pagoSugerido))}
              />
            </div>
          </div>
        ) : (
          <div className="space-y-8 animate-in slide-in-from-right duration-300">
            {/* Gestión de Gastos */}
            <div className="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="p-8 border-b border-slate-100 flex justify-between items-center">
                <h3 className="font-black text-slate-800 text-xl">Gastos Fijos Mensuales</h3>
                <button onClick={handleAddGasto} className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-bold">
                  <PlusCircle size={18} /> Agregar Gasto
                </button>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left">
                  <thead className="bg-slate-50 text-slate-500 text-[10px] uppercase font-black tracking-widest">
                    <tr>
                      <th className="px-8 py-4">Concepto</th>
                      <th className="px-8 py-4 text-right">Mensual</th>
                      <th className="px-8 py-4 text-right">Quincenal</th>
                      <th className="px-8 py-4 text-center">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {finanzas.gastosFijos.map(g => (
                      <tr key={g.id} className="hover:bg-slate-50 transition-colors group text-sm">
                        <td className="px-8 py-4 font-bold text-slate-700">{g.nombre}</td>
                        <td className="px-8 py-4 text-right font-bold">{formatCurrency(g.monto)}</td>
                        <td className="px-8 py-4 text-right text-slate-400">{formatCurrency(g.monto / 2)}</td>
                        <td className="px-8 py-4 text-center">
                          <button onClick={() => handleDeleteGasto(g.id)} className="text-slate-300 hover:text-red-500 transition-colors">
                            <Trash2 size={18} />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Ajuste de Metas */}
            <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
              <h3 className="font-black text-slate-800 text-xl mb-8">Configuración de Cuotas y Metas</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {Object.entries(finanzas.metas).map(([key, m]) => (
                  <div key={key} className="space-y-4 p-6 bg-slate-50 rounded-2xl border border-slate-100">
                    <p className="font-black text-slate-500 text-xs uppercase tracking-widest">{key.replace(/([A-Z])/g, ' $1')}</p>
                    <div>
                      <label className="text-[10px] font-black text-slate-400 block mb-1">PAGO SUGERIDO MENSUAL</label>
                      <input 
                        type="number" 
                        value={m.pagoSugerido} 
                        onChange={(e) => handleUpdatePagoMeta(key, e.target.value)}
                        className="w-full bg-white border border-slate-200 rounded-xl px-4 py-2 font-bold focus:ring-2 focus:ring-blue-500 outline-none"
                      />
                    </div>
                    <div>
                      <label className="text-[10px] font-black text-slate-400 block mb-1">META TOTAL</label>
                      <input 
                        type="number" 
                        value={m.meta} 
                        onChange={(e) => {
                          const newData = { ...finanzas };
                          newData.metas[key].meta = parseFloat(e.target.value) || 0;
                          setFinanzas(newData);
                          saveToCloud(newData);
                        }}
                        className="w-full bg-white border border-slate-200 rounded-xl px-4 py-2 font-bold focus:ring-2 focus:ring-blue-500 outline-none"
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

// --- SUB-COMPONENTES ---

function StatCard({ label, val, icon, color }) {
  const colors = {
    blue: "bg-blue-50 text-blue-600",
    red: "bg-red-50 text-red-600",
    emerald: "bg-emerald-50 text-emerald-600",
    slate: "bg-slate-100 text-slate-600"
  };
  return (
    <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-200">
      <div className={`w-10 h-10 rounded-xl ${colors[color]} flex items-center justify-center mb-4`}>
        {icon}
      </div>
      <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{label}</p>
      <p className="text-2xl font-black text-slate-900">{formatCurrency(val)}</p>
    </div>
  );
}

function GuideItem({ label, sub, monto, color }) {
  const colors = {
    blue: "bg-blue-50 text-blue-700 border-blue-100",
    red: "bg-red-50 text-red-700 border-red-100",
    emerald: "bg-emerald-50 text-emerald-700 border-emerald-100",
    slate: "bg-slate-50 text-slate-700 border-slate-100"
  };
  return (
    <div className={`p-4 rounded-2xl border ${colors[color]} flex justify-between items-center`}>
      <div>
        <p className="font-bold text-sm">{label}</p>
        <p className="text-[10px] opacity-70 font-bold">{sub}</p>
      </div>
      <p className="font-black text-lg">{formatCurrency(monto)}</p>
    </div>
  );
}

function GoalTracker({ title, goal, color, onAdd }) {
  const perc = (goal.actual / goal.meta) * 100;
  const barColors = {
    red: "bg-red-500",
    emerald: "bg-emerald-500",
    blue: "bg-blue-500"
  };
  const textColors = {
    red: "text-red-700",
    emerald: "text-emerald-700",
    blue: "text-blue-700"
  };

  return (
    <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-200">
      <div className="flex justify-between items-start mb-2">
        <h4 className="font-black text-slate-800 text-sm">{title}</h4>
        <span className={`text-xs font-black ${textColors[color]}`}>{perc.toFixed(1)}%</span>
      </div>
      <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden mb-6">
        <div className={`h-full ${barColors[color]} transition-all duration-1000`} style={{ width: `${Math.min(100, perc)}%` }}></div>
      </div>
      <div className="flex justify-between items-end">
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Acumulado</p>
          <p className="font-black text-slate-800">{formatCurrency(goal.actual)}</p>
          <p className="text-[10px] text-slate-400 font-bold mt-1">Faltan {formatCurrency(goal.meta - goal.actual)}</p>
        </div>
        <button onClick={onAdd} className={`p-2 rounded-xl border border-slate-100 hover:bg-slate-50 active:scale-90 transition-all ${textColors[color]}`}>
          <PlusCircle size={24} />
        </button>
      </div>
    </div>
  );
}

function formatCurrency(val) {
  return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(val);
}