import React, { useState, useEffect } from 'react';
import { 
  PlusCircle, 
  Trash2, 
  Edit3, 
  Calendar, 
  Calculator, 
  Save, 
  DollarSign,
  TrendingUp,
  History,
  AlertCircle
} from 'lucide-react';

// Paleta de colores basada en el logo
const COLORS = {
  blue: '#0066cc',
  red: '#e62e2d',
  yellow: '#ffcc00',
  green: '#28a745',
  dark: '#212529',
  light: '#f8f9fa'
};

const DENOMINACIONES = [
  { valor: 1000, tipo: 'billete' },
  { valor: 500, tipo: 'billete' },
  { valor: 200, tipo: 'billete' },
  { valor: 100, tipo: 'billete' },
  { valor: 50, tipo: 'billete' },
  { valor: 20, tipo: 'billete' },
  { valor: 10, tipo: 'billete' },
  { valor: 5, tipo: 'moneda' },
  { valor: 1, tipo: 'moneda' },
  { valor: 0.50, tipo: 'moneda' },
  { valor: 0.25, tipo: 'moneda' },
  { valor: 0.10, tipo: 'moneda' },
  { valor: 0.05, tipo: 'moneda' }
];

export default function App() {
  const [view, setView] = useState('ventas'); // 'ventas', 'cierre', 'historial'
  const [ventas, setVentas] = useState([]);
  const [descripcion, setDescripcion] = useState('');
  const [monto, setMonto] = useState('');
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [conteo, setConteo] = useState({});

  // Simulación de carga de datos iniciales
  useEffect(() => {
    const mockVentas = [
      { id: 1, descripcion: 'Impresión BN x10', monto: 30, fecha: new Date().toISOString().split('T')[0] },
      { id: 2, descripcion: 'Trámite en línea', monto: 150, fecha: new Date().toISOString().split('T')[0] },
    ];
    setVentas(mockVentas);
  }, []);

  // Lógica de Ventas
  const agregarVenta = (e) => {
    e.preventDefault();
    if (!descripcion || !monto) return;
    const nuevaVenta = {
      id: Date.now(),
      descripcion,
      monto: parseFloat(monto),
      fecha: new Date().toISOString().split('T')[0]
    };
    setVentas([...ventas, nuevaVenta]);
    setDescripcion('');
    setMonto('');
  };

  const eliminarVenta = (id) => {
    setVentas(ventas.filter(v => v.id !== id));
  };

  const totalDia = ventas
    .filter(v => v.fecha === selectedDate)
    .reduce((acc, curr) => acc + curr.monto, 0);

  // Lógica de Cierre
  const handleConteoChange = (valor, cantidad) => {
    setConteo({ ...conteo, [valor]: parseInt(cantidad) || 0 });
  };

  const totalFisico = Object.entries(conteo).reduce((acc, [valor, cant]) => acc + (parseFloat(valor) * cant), 0);

  return (
    <div className="min-h-screen bg-gray-100 font-sans">
      {/* Header Estilo Logo */}
      <header className="bg-white shadow-md p-4 sticky top-0 z-50">
        <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
             {/* Representación visual del logo con círculos de colores */}
            <div className="flex -space-x-2">
              <div className="w-8 h-8 rounded-full bg-blue-600 border-2 border-white"></div>
              <div className="w-8 h-8 rounded-full bg-red-600 border-2 border-white"></div>
              <div className="w-8 h-8 rounded-full bg-yellow-400 border-2 border-white"></div>
              <div className="w-8 h-8 rounded-full bg-green-600 border-2 border-white"></div>
            </div>
            <div>
              <h1 className="text-xl font-bold text-gray-800 leading-tight">Ciber</h1>
              <p className="text-sm font-semibold tracking-widest text-blue-800 uppercase">Multiservicios Blandón</p>
            </div>
          </div>
          
          <nav className="flex bg-gray-100 p-1 rounded-lg border border-gray-200">
            <button onClick={() => setView('ventas')} className={`px-4 py-2 rounded-md transition ${view === 'ventas' ? 'bg-white shadow-sm text-blue-700' : 'text-gray-500 hover:text-blue-600'}`}>Ventas</button>
            <button onClick={() => setView('cierre')} className={`px-4 py-2 rounded-md transition ${view === 'cierre' ? 'bg-white shadow-sm text-blue-700' : 'text-gray-500 hover:text-blue-600'}`}>Cerrar Caja</button>
            <button onClick={() => setView('historial')} className={`px-4 py-2 rounded-md transition ${view === 'historial' ? 'bg-white shadow-sm text-blue-700' : 'text-gray-500 hover:text-blue-600'}`}>Historial</button>
          </nav>
        </div>
      </header>

      <main className="max-w-5xl mx-auto p-4 space-y-6">
        
        {/* VISTA: VENTAS Y REGISTRO */}
        {view === 'ventas' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Registro de Venta */}
            <div className="lg:col-span-1 space-y-4">
              <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
                <h3 className="text-lg font-bold flex items-center gap-2 mb-4" style={{color: COLORS.blue}}>
                  <PlusCircle size={20} /> Registrar Venta
                </h3>
                <form onSubmit={agregarVenta} className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Descripción</label>
                    <input 
                      type="text" 
                      placeholder="Ej: Copias, Internet, Café..."
                      className="w-full p-3 mt-1 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none"
                      value={descripcion}
                      onChange={(e) => setDescripcion(e.target.value)}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Monto (C$)</label>
                    <input 
                      type="number" 
                      step="0.01"
                      placeholder="0.00"
                      className="w-full p-3 mt-1 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none"
                      value={monto}
                      onChange={(e) => setMonto(e.target.value)}
                    />
                  </div>
                  <button type="submit" className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2">
                    <Save size={18} /> Guardar Venta
                  </button>
                </form>
              </div>

              {/* Saldo de Hoy */}
              <div className="bg-blue-600 p-6 rounded-2xl shadow-lg text-white">
                <p className="text-blue-100 text-sm font-semibold uppercase tracking-wider">Saldo que llevo hoy</p>
                <div className="flex items-end justify-between mt-2">
                  <h2 className="text-4xl font-black">C$ {totalDia.toFixed(2)}</h2>
                  <TrendingUp className="text-blue-300 mb-1" size={24} />
                </div>
              </div>
            </div>

            {/* Listado de Ventas */}
            <div className="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
              <div className="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 className="font-bold text-gray-700">Ventas Registradas (Hoy)</h3>
                <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">{ventas.length} Transacciones</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left">
                  <thead className="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                      <th className="p-4">Descripción</th>
                      <th className="p-4">Monto</th>
                      <th className="p-4 text-center">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {ventas.length > 0 ? (
                      ventas.map((v) => (
                        <tr key={v.id} className="hover:bg-gray-50 transition">
                          <td className="p-4 font-medium text-gray-800">{v.descripcion}</td>
                          <td className="p-4 font-bold text-blue-600">C$ {v.monto.toFixed(2)}</td>
                          <td className="p-4">
                            <div className="flex justify-center gap-2">
                              <button className="p-2 text-yellow-600 hover:bg-yellow-50 rounded-lg"><Edit3 size={16}/></button>
                              <button onClick={() => eliminarVenta(v.id)} className="p-2 text-red-600 hover:bg-red-50 rounded-lg"><Trash2 size={16}/></button>
                            </div>
                          </td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan="3" className="p-10 text-center text-gray-400">
                          <AlertCircle className="mx-auto mb-2 opacity-20" size={48} />
                          No hay ventas registradas hoy
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* VISTA: CIERRE DE CAJA (Calculadora Nicaragua) */}
        {view === 'cierre' && (
          <div className="max-w-3xl mx-auto space-y-6">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-xl font-bold flex items-center gap-2" style={{color: COLORS.blue}}>
                  <Calculator size={24} /> Conteo de Dinero (Córdobas)
                </h3>
                <div className="text-right">
                  <p className="text-xs text-gray-500 uppercase">Total en Ventas</p>
                  <p className="font-bold text-gray-800">C$ {totalDia.toFixed(2)}</p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* Billetes */}
                <div>
                  <h4 className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-4">Billetes</h4>
                  <div className="space-y-3">
                    {DENOMINACIONES.filter(d => d.tipo === 'billete').map(d => (
                      <div key={d.valor} className="flex items-center gap-4 bg-gray-50 p-2 rounded-xl">
                        <div className="w-20 text-right font-black text-gray-600">C$ {d.valor}</div>
                        <input 
                          type="number" 
                          min="0"
                          className="w-20 p-2 border border-gray-200 rounded-lg text-center font-bold"
                          placeholder="0"
                          onChange={(e) => handleConteoChange(d.valor, e.target.value)}
                        />
                        <div className="flex-1 text-right text-blue-600 font-bold">
                          = {(conteo[d.valor] || 0) * d.valor}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Monedas */}
                <div>
                  <h4 className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-4">Monedas</h4>
                  <div className="space-y-3">
                    {DENOMINACIONES.filter(d => d.tipo === 'moneda').map(d => (
                      <div key={d.valor} className="flex items-center gap-4 bg-gray-50 p-2 rounded-xl">
                        <div className="w-20 text-right font-black text-gray-400">C$ {d.valor.toFixed(2)}</div>
                        <input 
                          type="number" 
                          min="0"
                          className="w-20 p-2 border border-gray-200 rounded-lg text-center font-bold"
                          placeholder="0"
                          onChange={(e) => handleConteoChange(d.valor, e.target.value)}
                        />
                        <div className="flex-1 text-right text-blue-400 font-bold">
                          = {((conteo[d.valor] || 0) * d.valor).toFixed(2)}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-gray-100 flex flex-col md:flex-row gap-4 justify-between items-center">
                <div className="text-center md:text-left">
                  <p className="text-sm text-gray-500 font-medium">Suma Total Física:</p>
                  <p className="text-4xl font-black text-green-600">C$ {totalFisico.toFixed(2)}</p>
                </div>
                
                <div className="flex flex-col items-center">
                  <div className={`px-4 py-2 rounded-full font-bold flex items-center gap-2 ${totalFisico - totalDia === 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                    {totalFisico - totalDia === 0 ? '¡Caja Cuadrada!' : `Diferencia: C$ ${(totalFisico - totalDia).toFixed(2)}`}
                  </div>
                </div>

                <button className="bg-blue-600 text-white px-8 py-4 rounded-2xl font-bold shadow-lg hover:bg-blue-700 transition active:scale-95 flex items-center gap-2">
                  <Save size={20} /> Guardar Cierre de Caja
                </button>
              </div>
            </div>
          </div>
        )}

        {/* VISTA: HISTORIAL */}
        {view === 'historial' && (
          <div className="max-w-4xl mx-auto space-y-6">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-blue-50 text-blue-600 rounded-xl">
                  <Calendar size={28} />
                </div>
                <div>
                  <h3 className="text-lg font-bold">Consultar Fecha</h3>
                  <p className="text-sm text-gray-500">Busca ventas de días anteriores</p>
                </div>
              </div>
              <input 
                type="date" 
                className="p-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
              />
            </div>

            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
               <div className="p-6 text-center border-b border-gray-50">
                  <h2 className="text-gray-400 text-sm font-semibold uppercase tracking-widest">Resumen del día seleccionado</h2>
                  <p className="text-3xl font-black text-gray-800 mt-1">C$ {totalDia.toFixed(2)}</p>
               </div>
               
               {/* Si no hay ventas, mostramos el aviso que pediste */}
               {totalDia === 0 && (
                 <div className="p-20 text-center space-y-4">
                    <div className="w-20 h-20 bg-yellow-50 text-yellow-500 rounded-full flex items-center justify-center mx-auto">
                      <History size={40} />
                    </div>
                    <div className="space-y-2">
                      <h4 className="text-xl font-bold text-gray-700">No se registraron ventas</h4>
                      <p className="text-gray-400 max-w-xs mx-auto">No se encontraron movimientos financieros para la fecha seleccionada: <span className="font-bold">{selectedDate}</span></p>
                    </div>
                 </div>
               )}

               {totalDia > 0 && (
                 <div className="overflow-x-auto">
                    <table className="w-full text-left">
                      <thead className="bg-gray-50 text-gray-500 text-xs uppercase">
                        <tr>
                          <th className="p-4">Descripción</th>
                          <th className="p-4">Monto</th>
                          <th className="p-4">Hora/Estado</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {ventas.filter(v => v.fecha === selectedDate).map(v => (
                          <tr key={v.id} className="hover:bg-gray-50">
                            <td className="p-4 font-medium">{v.descripcion}</td>
                            <td className="p-4 font-bold text-blue-600">C$ {v.monto.toFixed(2)}</td>
                            <td className="p-4">
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-bold">Completado</span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                 </div>
               )}
            </div>
          </div>
        )}

      </main>

      <footer className="p-8 text-center text-gray-400 text-sm">
        &copy; 2024 Ciber Multiservicios Blandón - Sistema de Gestión Interna
      </footer>
    </div>
  );
}