import React, { useState, useEffect } from 'react';
import { db } from '../../firebase/config';
import { ref, onValue } from 'firebase/database';
import { TrendingUp, Users, ShoppingBag, AlertCircle } from 'lucide-react';

export default function DashboardOverview() {
  const [stats, setStats] = useState({ ventasHoy: 0, mesasActivas: 0, stockBajo: 0 });

  useEffect(() => {
    // Aquí iría la escucha de Firebase para stats en tiempo real
    setStats({
      ventasHoy: 12500,
      mesasActivas: 4,
      stockBajo: 2
    });
  }, []);

  const cards = [
    { title: 'Ventas de Hoy', value: `$${stats.ventasHoy.toLocaleString()}`, icon: <TrendingUp size={24} color="var(--success)" />, bg: 'rgba(32, 201, 151, 0.1)' },
    { title: 'Mesas Activas', value: stats.mesasActivas, icon: <Users size={24} color="var(--info)" />, bg: 'rgba(50, 173, 230, 0.1)' },
    { title: 'Órdenes', value: '45', icon: <ShoppingBag size={24} color="var(--primary)" />, bg: 'rgba(255, 90, 95, 0.1)' },
    { title: 'Stock Bajo', value: stats.stockBajo, icon: <AlertCircle size={24} color="var(--warning)" />, bg: 'rgba(245, 166, 35, 0.1)' }
  ];

  return (
    <div className="animate-fade-in">
      <h2 className="text-gradient" style={{ fontSize: '2rem', marginBottom: '1.5rem' }}>Resumen General</h2>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '3rem' }}>
        {cards.map((card, i) => (
          <div key={i} className="glass-card" style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
            <div style={{ width: '56px', height: '56px', borderRadius: '50%', background: card.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {card.icon}
            </div>
            <div>
              <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '0.25rem' }}>{card.title}</p>
              <h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>{card.value}</h3>
            </div>
          </div>
        ))}
      </div>

      <div className="glass-card">
        <h3 className="text-gradient">Actividad Reciente</h3>
        <p style={{ color: 'var(--text-muted)', marginTop: '0.5rem' }}>Módulo de notificaciones en tiempo real desde Cocina/Meseros...</p>
      </div>
    </div>
  );
}