import React, { useState, useEffect, useMemo } from 'react';
import { 
  Calculator, 
  History, 
  MapPin, 
  Truck, 
  User, 
  Plus, 
  Search, 
  FileText, 
  LogOut, 
  TrendingUp,
  Fuel,
  ChevronRight,
  Save,
  Trash2,
  Calendar,
  AlertCircle,
  Users,
  ShieldCheck,
  UserPlus,
  XCircle
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  query, 
  onSnapshot, 
  doc, 
  setDoc,
  deleteDoc,
  getDoc
} from 'firebase/firestore';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged,
  signOut
} from 'firebase/auth';

// --- CONFIGURACIÓN DE FIREBASE ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'itd-nicaragua-v1';
const ADMIN_EMAIL = 'armin.romero@itdnicaragua.com';

export default function App() {
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [view, setView] = useState('dashboard'); // dashboard, new_offer, list, users
  const [offers, setOffers] = useState([]);
  const [authorizedUsers, setAuthorizedUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [authError, setAuthError] = useState(null);
  const [newUserEmail, setNewUserEmail] = useState('');

  // --- AUTENTICACIÓN ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        setAuthError("Error de autenticación. Verifique la configuración.");
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setIsAdmin(u?.email === ADMIN_EMAIL);
    });
    return () => unsubscribe();
  }, []);

  // --- CARGA DE DATOS ---
  useEffect(() => {
    if (!user) return;
    
    // Listener de Ofertas
    const qOffers = collection(db, 'artifacts', appId, 'public', 'data', 'ofertas');
    const unsubOffers = onSnapshot(qOffers, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setOffers(data.sort((a, b) => new Date(b.fecha) - new Date(a.fecha)));
    });

    // Listener de Usuarios Autorizados (Solo si es Admin)
    let unsubUsers = () => {};
    if (isAdmin) {
      const qUsers = collection(db, 'artifacts', appId, 'public', 'data', 'authorized_users');
      unsubUsers = onSnapshot(qUsers, (snapshot) => {
        const data = snapshot.docs.map(doc => ({ email: doc.id, ...doc.data() }));
        setAuthorizedUsers(data);
      });
    }

    return () => {
      unsubOffers();
      unsubUsers();
    };
  }, [user, isAdmin]);

  // --- ESTADO DEL FORMULARIO ---
  const [formData, setFormData] = useState({
    cliente: '',
    siglasCliente: '',
    proyecto: '',
    tipo: 'carretera',
    distanciaKm: 0,
    diasCampo: 1,
    numVehiculos: 1,
    precioCombustible: 185.50,
    rendimiento: 35, 
    movInternaDiaria: 20,
    precioUnitario: 500,
    cantidadTrabajo: 1
  });

  // --- CÁLCULOS ---
  const calculos = useMemo(() => {
    const { 
      distanciaKm, diasCampo, numVehiculos, 
      precioCombustible, rendimiento, movInternaDiaria, 
      precioUnitario, cantidadTrabajo 
    } = formData;
    
    const galonesTraslado = (distanciaKm * 2) / (rendimiento || 1);
    const galonesInternos = (movInternaDiaria * diasCampo) / (rendimiento || 1);
    const totalGalones = (galonesTraslado + galonesInternos) * numVehiculos;
    const costoLogistica = totalGalones * precioCombustible;
    const costoTecnico = precioUnitario * cantidadTrabajo;
    const totalBruto = costoLogistica + costoTecnico;
    const utilidad = totalBruto * 0.20;
    const totalFinal = totalBruto + utilidad;

    return { costoLogistica, costoTecnico, totalFinal, totalGalones };
  }, [formData]);

  // --- ACCIONES ---
  const handleSaveOffer = async () => {
    if (!formData.siglasCliente || !formData.proyecto) return;
    setLoading(true);
    const d = new Date();
    const codigoGenerado = `ITD-${formData.siglasCliente.toUpperCase()}-${String(d.getDate()).padStart(2, '0')}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getFullYear()).slice(-2)}-${String(offers.length + 1).padStart(2, '0')}`;

    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'ofertas'), {
        codigo: codigoGenerado,
        cliente: formData.cliente,
        siglas: formData.siglasCliente,
        proyecto: formData.proyecto,
        total: calculos.totalFinal,
        fecha: new Date().toISOString(),
        detalles: formData,
        creador: user?.email || 'Anonimo'
      });
      setView('list');
      setLoading(false);
      setFormData({ ...formData, cliente: '', siglasCliente: '', proyecto: '', distanciaKm: 0, cantidadTrabajo: 1 });
    } catch (e) {
      console.error(e);
      setLoading(false);
    }
  };

  const handleAuthorizeUser = async () => {
    if (!newUserEmail || !isAdmin) return;
    const emailKey = newUserEmail.toLowerCase().trim();
    try {
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'authorized_users', emailKey), {
        autorizadoPor: ADMIN_EMAIL,
        fecha: new Date().toISOString(),
        estado: 'activo'
      });
      setNewUserEmail('');
    } catch (e) {
      console.error(e);
    }
  };

  const handleRevokeUser = async (email) => {
    if (!isAdmin || email === ADMIN_EMAIL) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'authorized_users', email));
    } catch (e) {
      console.error(e);
    }
  };

  if (authError) return (
    <div className="flex items-center justify-center h-screen bg-red-50 p-4">
      <div className="bg-white p-6 rounded-xl shadow-lg flex flex-col items-center gap-4 text-center">
        <AlertCircle className="text-red-500" size={48} />
        <h2 className="text-xl font-bold text-gray-800">Error del Sistema</h2>
        <p className="text-gray-600">{authError}</p>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-900 flex">
      {/* Sidebar */}
      <aside className="w-64 bg-blue-950 text-white h-screen fixed left-0 top-0 hidden md:flex flex-col border-r border-blue-900 z-50">
        <div className="p-6 border-b border-blue-900 flex items-center gap-3">
          <div className="bg-white p-2 rounded-lg">
            <Calculator className="text-blue-950" size={24} />
          </div>
          <h1 className="font-bold text-xl tracking-tight">ITD Nicaragua</h1>
        </div>
        <nav className="flex-1 p-4 space-y-2">
          <button onClick={() => setView('dashboard')} className={`w-full flex items-center gap-3 p-3 rounded-lg transition ${view === 'dashboard' ? 'bg-blue-800' : 'hover:bg-blue-900'}`}>
            <TrendingUp size={20} /> Dashboard
          </button>
          <button onClick={() => setView('new_offer')} className={`w-full flex items-center gap-3 p-3 rounded-lg transition ${view === 'new_offer' ? 'bg-blue-800' : 'hover:bg-blue-900'}`}>
            <Plus size={20} /> Nueva Oferta
          </button>
          <button onClick={() => setView('list')} className={`w-full flex items-center gap-3 p-3 rounded-lg transition ${view === 'list' ? 'bg-blue-800' : 'hover:bg-blue-900'}`}>
            <History size={20} /> Historial ITD
          </button>
          {isAdmin && (
            <button onClick={() => setView('users')} className={`w-full flex items-center gap-3 p-3 rounded-lg transition ${view === 'users' ? 'bg-blue-800' : 'hover:bg-blue-900'}`}>
              <Users size={20} /> Usuarios
            </button>
          )}
        </nav>
        <div className="p-4 border-t border-blue-900">
          <div className="flex items-center gap-3 p-3">
            <div className="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center font-bold">
              {isAdmin ? "AR" : "OP"}
            </div>
            <div className="text-xs overflow-hidden">
              <p className="font-bold truncate">{isAdmin ? "Admin Root" : "Operador ITD"}</p>
              <p className="opacity-60 truncate text-[10px]">{user?.email || "Cargando..."}</p>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 md:ml-64 p-4 md:p-8 min-h-screen">
        <header className="flex justify-between items-center mb-8">
          <h2 className="text-2xl font-bold text-gray-800">
            {view === 'dashboard' && 'Panel de Control'}
            {view === 'new_offer' && 'Nueva Cotización'}
            {view === 'list' && 'Historial de Ofertas'}
            {view === 'users' && 'Gestión de Usuarios'}
          </h2>
        </header>

        {/* Dashboard View */}
        {view === 'dashboard' && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-l-4 border-l-blue-600">
                <p className="text-gray-500 text-sm font-medium">Ofertas Totales</p>
                <h3 className="text-3xl font-bold text-blue-950">{offers.length}</h3>
              </div>
              <div className="bg-white p-6 rounded-xl shadow-sm border border-l-4 border-l-green-500">
                <p className="text-gray-500 text-sm font-medium">Volumen C$</p>
                <h3 className="text-3xl font-bold">{offers.reduce((a, c) => a + c.total, 0).toLocaleString()}</h3>
              </div>
              <div className="bg-white p-6 rounded-xl shadow-sm border border-l-4 border-l-purple-500">
                <p className="text-gray-500 text-sm font-medium">Personal Activo</p>
                <h3 className="text-3xl font-bold">{isAdmin ? authorizedUsers.length : 'Restringido'}</h3>
              </div>
            </div>
          </div>
        )}

        {/* User Management View */}
        {view === 'users' && isAdmin && (
          <div className="space-y-6 animate-in fade-in duration-500">
            <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
              <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-blue-900">
                <UserPlus size={20} /> Autorizar Nuevo Correo
              </h3>
              <div className="flex flex-col md:flex-row gap-4">
                <input 
                  type="email" 
                  className="flex-1 p-3 border rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="ejemplo@itdnicaragua.com"
                  value={newUserEmail}
                  onChange={(e) => setNewUserEmail(e.target.value)}
                />
                <button 
                  onClick={handleAuthorizeUser}
                  className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 transition flex items-center justify-center gap-2"
                >
                  <Plus size={18} /> Autorizar Acceso
                </button>
              </div>
              <p className="mt-3 text-[10px] text-gray-400 flex items-center gap-1 italic">
                <ShieldCheck size={12} /> Nota: Por seguridad, las contraseñas son privadas y solo el usuario puede verlas/crearlas al registrarse.
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
              <table className="w-full text-left">
                <thead className="bg-gray-50 text-gray-400 text-[10px] uppercase tracking-widest border-b">
                  <tr>
                    <th className="p-4">Usuario (Correo)</th>
                    <th className="p-4">Estado</th>
                    <th className="p-4">Fecha Alta</th>
                    <th className="p-4 text-center">Acciones</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {authorizedUsers.map(authU => (
                    <tr key={authU.email} className="hover:bg-gray-50">
                      <td className="p-4 font-bold text-gray-700">{authU.email}</td>
                      <td className="p-4">
                        <span className="text-[10px] font-black uppercase bg-green-100 text-green-700 px-2 py-1 rounded">Activo</span>
                      </td>
                      <td className="p-4 text-xs text-gray-500">{new Date(authU.fecha).toLocaleDateString()}</td>
                      <td className="p-4 text-center">
                        {authU.email !== ADMIN_EMAIL && (
                          <button 
                            onClick={() => handleRevokeUser(authU.email)}
                            className="text-red-400 hover:text-red-600 transition"
                          >
                            <XCircle size={18} />
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* New Offer View */}
        {view === 'new_offer' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-in slide-in-from-bottom-4 duration-500">
            <div className="lg:col-span-2 space-y-6">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 className="text-lg font-bold mb-6 flex items-center gap-2 border-b pb-2 text-blue-900">
                  <FileText size={20} /> Datos Generales
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input placeholder="Cliente" className="w-full p-2.5 border rounded-lg" value={formData.cliente} onChange={e => setFormData({...formData, cliente: e.target.value})} />
                  <input placeholder="Siglas" className="w-full p-2.5 border rounded-lg uppercase" value={formData.siglasCliente} onChange={e => setFormData({...formData, siglasCliente: e.target.value})} />
                  <textarea placeholder="Proyecto" className="md:col-span-2 w-full p-2.5 border rounded-lg h-20" value={formData.proyecto} onChange={e => setFormData({...formData, proyecto: e.target.value})} />
                </div>
              </div>
              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 className="text-lg font-bold mb-6 flex items-center gap-2 border-b pb-2 text-blue-900">
                  <Truck size={20} /> Logística
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input type="number" placeholder="KM desde MGA" className="w-full p-2.5 border rounded-lg" value={formData.distanciaKm} onChange={e => setFormData({...formData, distanciaKm: Number(e.target.value)})} />
                  <input type="number" placeholder="Días Campo" className="w-full p-2.5 border rounded-lg" value={formData.diasCampo} onChange={e => setFormData({...formData, diasCampo: Number(e.target.value)})} />
                </div>
              </div>
            </div>
            <div className="bg-blue-900 text-white p-6 rounded-xl shadow-xl h-fit">
              <h3 className="text-lg font-bold mb-4 border-b border-blue-800 pb-2">Cotización</h3>
              <div className="text-4xl font-black mb-6">C$ {calculos.totalFinal.toLocaleString(undefined, {maximumFractionDigits: 0})}</div>
              <button 
                onClick={handleSaveOffer} 
                className="w-full bg-white text-blue-950 p-4 rounded-xl font-black shadow-lg hover:scale-105 transition active:scale-95"
              >
                Guardar Oferta
              </button>
            </div>
          </div>
        )}

        {/* List View */}
        {view === 'list' && (
          <div className="bg-white rounded-xl shadow-sm border overflow-hidden animate-in fade-in duration-500">
            <table className="w-full text-left">
              <thead className="bg-gray-50 text-gray-400 text-[10px] uppercase tracking-widest">
                <tr>
                  <th className="p-4">Código</th>
                  <th className="p-4">Cliente</th>
                  <th className="p-4 text-right">Monto</th>
                  {isAdmin && <th className="p-4 text-center">Acciones</th>}
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {offers.map(o => (
                  <tr key={o.id} className="hover:bg-blue-50">
                    <td className="p-4 font-mono text-xs font-bold text-blue-700">{o.codigo}</td>
                    <td className="p-4 font-bold">{o.siglas}</td>
                    <td className="p-4 text-right font-black">C$ {o.total.toLocaleString()}</td>
                    {isAdmin && (
                      <td className="p-4 text-center">
                        <button onClick={() => handleDelete(o.id)} className="text-gray-300 hover:text-red-500"><Trash2 size={16} /></button>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </main>
    </div>
  );
}