import React, { useState, useEffect } from 'react';
import { 
  LayoutDashboard, 
  MapPin, 
  Wallet, 
  BarChart3, 
  Settings, 
  Truck, 
  CreditCard, 
  Users,
  AlertCircle,
  TrendingUp,
  Clock,
  CheckCircle2
} from 'lucide-react';

// Mock Data para el Dashboard
const INITIAL_STATS = [
  { label: 'GMV Mensual', value: '$12,450', change: '+12.5%', icon: TrendingUp, color: 'text-emerald-500' },
  { label: 'Órdenes Activas', value: '42', change: '+5', icon: Truck, color: 'text-blue-500' },
  { label: 'Wallets Emitidas', value: '1,280', change: '+18%', icon: Wallet, color: 'text-purple-500' },
  { label: 'Tiempo Promedio', value: '24 min', change: '-2 min', icon: Clock, color: 'text-orange-500' },
];

const RECENT_ORDERS = [
  { id: 'ORD-9921', client: 'Maestro a la Carta', status: 'En Camino', amount: '$45.00', time: '12:45 PM' },
  { id: 'ORD-9920', client: 'Humo Negro Store', status: 'Completado', amount: '$120.00', time: '12:30 PM' },
  { id: 'ORD-9919', client: 'Catering Premium', status: 'Preparación', amount: '$85.50', time: '12:15 PM' },
];

const App = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date().toLocaleTimeString()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
      {/* Sidebar de Navegación */}
      <nav className="w-64 bg-slate-800 border-r border-slate-700 flex flex-col">
        <div className="p-6 border-b border-slate-700 flex items-center gap-3">
          <div className="w-10 h-10 bg-orange-600 rounded-lg flex items-center justify-center font-bold text-xl">D</div>
          <div>
            <h1 className="text-xl font-bold tracking-tight">DELIHARE</h1>
            <p className="text-[10px] text-slate-400 tracking-widest uppercase font-semibold">Venezuela Ops</p>
          </div>
        </div>

        <div className="flex-1 py-6 px-4 space-y-2">
          <NavItem icon={<LayoutDashboard size={20}/>} label="Dashboard" active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} />
          <NavItem icon={<MapPin size={20}/>} label="Mapa Logístico" active={activeTab === 'map'} onClick={() => setActiveTab('map')} />
          <NavItem icon={<Wallet size={20}/>} label="Gestión Wallet" active={activeTab === 'wallet'} onClick={() => setActiveTab('wallet')} />
          <NavItem icon={<BarChart3 size={20}/>} label="Reportes ISO" active={activeTab === 'reports'} onClick={() => setActiveTab('reports')} />
          <NavItem icon={<Users size={20}/>} label="Comercios B2B" active={activeTab === 'merchants'} onClick={() => setActiveTab('merchants')} />
        </div>

        <div className="p-4 mt-auto border-t border-slate-700 bg-slate-800/50">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-full bg-slate-600 overflow-hidden flex items-center justify-center text-xs">AM</div>
            <div className="text-sm">
              <p className="font-medium">Aleph Moreno</p>
              <p className="text-xs text-slate-400">Admin / Founder</p>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="flex-1 flex flex-col overflow-hidden">
        {/* Header Superior */}
        <header className="h-16 bg-slate-800 border-b border-slate-700 flex items-center justify-between px-8">
          <div className="flex items-center gap-4">
            <span className="text-slate-400 text-sm">{currentTime}</span>
            <span className="flex items-center gap-2 px-3 py-1 bg-emerald-500/10 text-emerald-500 rounded-full text-[11px] font-bold border border-emerald-500/20 uppercase tracking-wider">
              Sistema Online
            </span>
          </div>
          <div className="flex items-center gap-4 text-slate-400">
             <div className="p-2 hover:bg-slate-700 rounded-lg cursor-pointer transition-colors relative">
               <AlertCircle size={20} />
               <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-orange-500 rounded-full border border-slate-800"></span>
             </div>
             <div className="p-2 hover:bg-slate-700 rounded-lg cursor-pointer transition-colors">
               <Settings size={20} />
             </div>
          </div>
        </header>

        {/* Workspace */}
        <div className="flex-1 overflow-y-auto p-8 space-y-8">
          {/* Stats Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {INITIAL_STATS.map((stat, i) => (
              <div key={i} className="bg-slate-800 p-6 rounded-xl border border-slate-700 shadow-lg">
                <div className="flex justify-between items-start mb-4">
                  <div className={`p-2 rounded-lg bg-slate-700 ${stat.color}`}>
                    <stat.icon size={20} />
                  </div>
                  <span className={`text-xs font-bold ${stat.change.startsWith('+') ? 'text-emerald-400' : 'text-rose-400'}`}>
                    {stat.change}
                  </span>
                </div>
                <p className="text-slate-400 text-sm mb-1">{stat.label}</p>
                <h3 className="text-2xl font-bold">{stat.value}</h3>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Monitor de Logística (Simulado) */}
            <div className="lg:col-span-2 bg-slate-800 rounded-xl border border-slate-700 shadow-xl overflow-hidden">
              <div className="p-6 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
                <h2 className="font-bold flex items-center gap-2">
                  <MapPin size={18} className="text-orange-500" /> Monitoreo en Tiempo Real
                </h2>
                <button className="text-xs bg-orange-600 hover:bg-orange-700 px-3 py-1.5 rounded font-bold transition-colors">
                  Optimizar Rutas
                </button>
              </div>
              <div className="aspect-video bg-slate-700 relative overflow-hidden group">
                {/* Marcadores de mapa simulados */}
                <div className="absolute top-1/4 left-1/3 w-3 h-3 bg-orange-500 rounded-full animate-pulse border-2 border-white"></div>
                <div className="absolute top-1/2 left-1/2 w-3 h-3 bg-blue-500 rounded-full animate-pulse border-2 border-white"></div>
                <div className="absolute bottom-1/4 right-1/4 w-3 h-3 bg-emerald-500 rounded-full animate-pulse border-2 border-white"></div>
                
                <div className="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none">
                  <p className="text-slate-400 font-mono text-xs">[MAPA_INTERACTIVO_REPLICANDO_VENEZUELA]</p>
                </div>

                <div className="absolute bottom-4 left-4 right-4 bg-slate-800/90 backdrop-blur-md p-4 rounded-lg border border-slate-600 shadow-2xl translate-y-2 group-hover:translate-y-0 transition-transform">
                   <div className="flex justify-between items-center">
                     <div className="flex gap-4">
                        <div className="text-center">
                          <p className="text-[10px] text-slate-400 uppercase">Activos</p>
                          <p className="text-lg font-bold text-orange-400">12</p>
                        </div>
                        <div className="text-center">
                          <p className="text-[10px] text-slate-400 uppercase">En Cola</p>
                          <p className="text-lg font-bold">5</p>
                        </div>
                     </div>
                     <div className="flex items-center gap-2 text-xs text-slate-300">
                       <CheckCircle2 size={14} className="text-emerald-500" /> Fleet Status: Normal
                     </div>
                   </div>
                </div>
              </div>
            </div>

            {/* Panel de Fintech / Wallet */}
            <div className="bg-slate-800 rounded-xl border border-slate-700 shadow-xl flex flex-col">
              <div className="p-6 border-b border-slate-700 bg-slate-800/50">
                <h2 className="font-bold flex items-center gap-2">
                  <CreditCard size={18} className="text-purple-500" /> Wallet Engine
                </h2>
              </div>
              <div className="p-6 flex-1 space-y-6">
                <div className="bg-gradient-to-br from-purple-600/20 to-indigo-600/20 border border-purple-500/30 rounded-xl p-5">
                   <p className="text-[10px] uppercase font-bold text-purple-400 tracking-widest mb-2">Previsualización de Pass</p>
                   <div className="bg-white rounded-lg p-3 text-slate-900 shadow-2xl transform -rotate-1">
                      <div className="flex justify-between items-start mb-4 border-b pb-2 border-slate-100">
                        <p className="font-black italic text-sm">DELIHARE</p>
                        <Wallet size={16} />
                      </div>
                      <p className="text-[8px] uppercase font-bold text-slate-500">Beneficio VIP</p>
                      <p className="text-xs font-black">15% OFF EL SEÑOR DE LAS BRASAS</p>
                      <div className="mt-4 pt-4 border-t border-slate-100 flex justify-between">
                         <div className="w-12 h-12 bg-slate-100 rounded flex items-center justify-center font-mono text-[6px]">QR_CODE</div>
                         <div className="text-right">
                           <p className="text-[8px] font-bold">VALIDEZ</p>
                           <p className="text-[10px] font-mono">12/26</p>
                         </div>
                      </div>
                   </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-xs font-bold text-slate-400 uppercase tracking-tighter">Últimas Redenciones</h4>
                  {RECENT_ORDERS.map((order, i) => (
                    <div key={i} className="flex items-center justify-between p-3 bg-slate-700/30 rounded-lg hover:bg-slate-700/50 transition-colors cursor-pointer">
                      <div>
                        <p className="text-xs font-bold">{order.client}</p>
                        <p className="text-[10px] text-slate-500 font-mono">{order.id}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-xs font-bold text-emerald-400">{order.amount}</p>
                        <p className="text-[10px] text-slate-400 uppercase">{order.status}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

const NavItem = ({ icon, label, active, onClick }) => (
  <button 
    onClick={onClick}
    className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
      active 
      ? 'bg-orange-600 text-white shadow-lg shadow-orange-900/20' 
      : 'text-slate-400 hover:bg-slate-700 hover:text-white'
    }`}
  >
    {icon}
    <span className="text-sm font-semibold">{label}</span>
    {active && <div className="ml-auto w-1.5 h-1.5 rounded-full bg-white shadow-sm"></div>}
  </button>
);

export default App;