import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, addDoc, getDocs, onSnapshot, query, serverTimestamp } from 'firebase/firestore';

// --- CONFIGURACIÓN E INICIALIZACIÓN DE FIREBASE ---
const firebaseConfig = typeof __firebase_config !== 'undefined' 
  ? JSON.parse(__firebase_config) 
  : {
      apiKey: "mock-api-key",
      authDomain: "mock-auth-domain",
      projectId: "mock-project-id",
      storageBucket: "mock-storage-bucket",
      messagingSenderId: "mock-sender-id",
      appId: "mock-app-id"
    };

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

// --- MENÚ DE PRODUCTOS Y PRECIOS ---
const MENU_ITEMS = {
  pollo: [
    { id: 'broaster', name: 'Pollo Broaster', icon: '🍗', basePrice: 23 },
    { id: 'espiedo', name: 'Pollo al Espiedo', icon: '🔥', basePrice: 22 },
    { id: 'milanesa', name: 'Milanesa de Pollo', icon: '🥩', basePrice: 20 },
  ],
  portions: [
    { id: 'economico', name: 'Económico', factor: 0.65, label: 'Económico' },
    { id: 'cuarto', name: 'Cuarto de Pollo', factor: 1.0, label: '1/4 Pollo' },
    { id: 'medio', name: 'Medio Pollo', factor: 1.9, label: '1/2 Pollo' },
    { id: 'entero', name: 'Pollo Entero', factor: 3.6, label: '1 Pollo Entero' },
  ],
  drinks: [
    { id: 'mocochinchi_v', name: 'Mocochinchi (Vaso)', price: 5, icon: '🥤' },
    { id: 'mocochinchi_j', name: 'Mocochinchi (Jarra)', price: 15, icon: '🍯' },
    { id: 'gaseosa_p', name: 'Gaseosa Personal', price: 6, icon: '🍼' },
    { id: 'gaseosa_2l', name: 'Gaseosa 2 Litros', price: 15, icon: '🍾' },
    { id: 'porcion_papas', name: 'Porción Extra Papas', price: 7, icon: '🍟' },
    { id: 'porcion_arroz', name: 'Porción Extra Arroz', price: 5, icon: '🍚' },
  ]
};

export default function App() {
  // --- ESTADOS DE AUTH Y CONEXIÓN ---
  const [user, setUser] = useState(null);
  const [loadingDb, setLoadingDb] = useState(true);

  // --- ESTADOS DE LA APLICACIÓN ---
  const [activeTab, setActiveTab] = useState('pos'); // 'pos' o 'caja'
  const [sales, setSales] = useState([]);
  const [ticketCounter, setTicketCounter] = useState(100);

  // --- FORMULARIO DE CLIENTE ---
  const [clientName, setClientName] = useState('');
  const [clientCI, setClientCI] = useState('');

  // --- SELECCIONES ACTUALES ---
  const [selectedChicken, setSelectedChicken] = useState('broaster'); // ID del pollo
  const [selectedPortion, setSelectedPortion] = useState('cuarto'); // ID de porción
  const [selectedDrinks, setSelectedDrinks] = useState({}); // { [id]: cantidad }
  const [notes, setNotes] = useState('');
  const [serviceType, setServiceType] = useState('mesa'); // 'mesa' o 'llevar'

  // --- ESTADO DE NOTIFICACIONES ---
  const [notification, setNotification] = useState(null);
  const [ticketToPrint, setTicketToPrint] = useState(null);
  const [showPrintModal, setShowPrintModal] = useState(false);
  const [showConfirmResetModal, setShowConfirmResetModal] = useState(false);

  // --- EFECTO 1: INICIALIZAR 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 (error) {
        console.error("Error de autenticación Firebase:", error);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (usr) => {
      setUser(usr);
    });
    return () => unsubscribe();
  }, []);

  // --- EFECTO 2: CARGAR DATOS DESDE FIRESTORE ---
  useEffect(() => {
    if (!user) return;

    setLoadingDb(true);
    // Ruta estricta de datos públicos según REGLA 1: /artifacts/{appId}/public/data/{collectionName}
    const salesCollectionRef = collection(db, 'artifacts', appId, 'public', 'data', 'sales');
    
    // Suscribirse a cambios en tiempo real con control de errores requerido
    const unsubscribe = onSnapshot(salesCollectionRef, (snapshot) => {
      const salesList = [];
      snapshot.forEach((doc) => {
        const data = doc.data();
        salesList.push({
          id: doc.id,
          ...data,
          // Convertir timestamps de firebase
          createdAt: data.createdAt?.seconds ? new Date(data.createdAt.seconds * 1000) : new Date()
        });
      });

      // Ordenar localmente por fecha de manera descendente (Evitando compound queries en Firestore - REGLA 2)
      salesList.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
      
      setSales(salesList);
      
      // Calcular el correlativo de fichas en base a la cantidad de ventas del día
      if (salesList.length > 0) {
        setTicketCounter(100 + salesList.length + 1);
      } else {
        setTicketCounter(101);
      }
      
      setLoadingDb(false);
    }, (error) => {
      console.error("Error obteniendo ventas de Firestore:", error);
      showToast("Error de conexión con la base de datos.", "error");
      setLoadingDb(false);
    });

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

  // --- AUXILIARES Y CÁLCULOS ---
  const showToast = (message, type = 'success') => {
    setNotification({ message, type });
    setTimeout(() => {
      setNotification(null);
    }, 4000);
  };

  // Calcular precio del pollo seleccionado según la porción
  const getChickenPrice = () => {
    const pollo = MENU_ITEMS.pollo.find(p => p.id === selectedChicken);
    const portion = MENU_ITEMS.portions.find(p => p.id === selectedPortion);
    if (!pollo || !portion) return 0;
    return Math.round(pollo.basePrice * portion.factor);
  };

  // Calcular precio de bebidas extras añadidas
  const getDrinksTotal = () => {
    let total = 0;
    Object.keys(selectedDrinks).forEach(drinkId => {
      const qty = selectedDrinks[drinkId] || 0;
      const drink = MENU_ITEMS.drinks.find(d => d.id === drinkId);
      if (drink && qty > 0) {
        total += drink.price * qty;
      }
    });
    return total;
  };

  const getGrandTotal = () => {
    return getChickenPrice() + getDrinksTotal();
  };

  // Agregar / restar bebidas extras
  const handleDrinkQuantity = (drinkId, amount) => {
    setSelectedDrinks(prev => {
      const current = prev[drinkId] || 0;
      const next = current + amount;
      if (next <= 0) {
        const copy = { ...prev };
        delete copy[drinkId];
        return copy;
      }
      return { ...prev, [drinkId]: next };
    });
  };

  // Reiniciar formulario de POS
  const resetForm = () => {
    setClientName('');
    setClientCI('');
    setSelectedChicken('broaster');
    setSelectedPortion('cuarto');
    setSelectedDrinks({});
    setNotes('');
    setServiceType('mesa');
  };

  // Registrar venta en Firestore
  const handleRegisterSale = async (e) => {
    e.preventDefault();
    
    if (!user) {
      showToast("No se ha podido autenticar la sesión.", "error");
      return;
    }

    const chickenItem = MENU_ITEMS.pollo.find(p => p.id === selectedChicken);
    const portionItem = MENU_ITEMS.portions.find(p => p.id === selectedPortion);
    
    // Preparar el desglose del pedido
    const chickenDetails = {
      id: selectedChicken,
      name: chickenItem.name,
      portion: portionItem.label,
      price: getChickenPrice()
    };

    const extrasList = [];
    Object.keys(selectedDrinks).forEach(drinkId => {
      const qty = selectedDrinks[drinkId];
      const item = MENU_ITEMS.drinks.find(d => d.id === drinkId);
      if (item && qty > 0) {
        extrasList.push({
          id: drinkId,
          name: item.name,
          quantity: qty,
          price: item.price,
          subtotal: item.price * qty
        });
      }
    });

    const newSale = {
      ticketNumber: ticketCounter,
      clientName: clientName.trim() || 'Sin Nombre (S/N)',
      clientCI: clientCI.trim() || '0',
      chicken: chickenDetails,
      extras: extrasList,
      notes: notes.trim(),
      serviceType: serviceType,
      totalAmount: getGrandTotal(),
      createdAt: serverTimestamp(),
      sellerId: user.uid
    };

    try {
      // Registrar en la base de datos siguiendo REGLA 1
      const salesCollectionRef = collection(db, 'artifacts', appId, 'public', 'data', 'sales');
      await addDoc(salesCollectionRef, newSale);
      
      // Almacenar localmente los datos de la ficha activa para la simulación de impresión
      setTicketToPrint({
        ...newSale,
        createdAt: new Date() // Usar fecha local inmediata para el ticket
      });
      
      showToast(`¡Ficha Nº ${ticketCounter} registrada con éxito!`);
      setShowPrintModal(true);
      resetForm();
    } catch (error) {
      console.error("Error al registrar venta:", error);
      showToast("Error de conexión. No se pudo guardar la venta.", "error");
    }
  };

  // Función de impresión nativa (Utilizando estilos @media print controlados)
  const triggerPrint = () => {
    window.print();
  };

  // Generar estadísticas agregadas en memoria (Evitando querys complejas - REGLA 2)
  const getCajaStatistics = () => {
    let totalRevenue = 0;
    let totalTickets = sales.length;
    let broasterCount = 0;
    let espiedoCount = 0;
    let milanesaCount = 0;
    let itemsPorcion = { economico: 0, cuarto: 0, medio: 0, entero: 0 };

    sales.forEach(sale => {
      totalRevenue += sale.totalAmount || 0;
      
      // Contar categorías de pollo
      if (sale.chicken?.id === 'broaster') broasterCount++;
      if (sale.chicken?.id === 'espiedo') espiedoCount++;
      if (sale.chicken?.id === 'milanesa') milanesaCount++;

      // Contar tipos de porciones
      const portionName = sale.chicken?.portion?.toLowerCase();
      if (portionName?.includes('econó') || portionName?.includes('econo')) itemsPorcion.economico++;
      if (portionName?.includes('1/4') || portionName?.includes('cuarto')) itemsPorcion.cuarto++;
      if (portionName?.includes('1/2') || portionName?.includes('medio')) itemsPorcion.medio++;
      if (portionName?.includes('entero') || portionName?.includes('1 pollo')) itemsPorcion.entero++;
    });

    return {
      totalRevenue,
      totalTickets,
      broasterCount,
      espiedoCount,
      milanesaCount,
      itemsPorcion
    };
  };

  const stats = getCajaStatistics();

  return (
    <div className="min-h-screen bg-neutral-900 text-neutral-100 font-sans flex flex-col selection:bg-amber-600 selection:text-white">
      
      {/* --- ESTILOS COMPLEMENTARIOS PARA IMPRESIÓN --- */}
      <style>{`
        @media print {
          /* Ocultar toda la interfaz web */
          body * {
            visibility: hidden;
            background: white !important;
            color: black !important;
          }
          /* Mostrar únicamente el contenedor del ticket térmico */
          #thermal-ticket-print, #thermal-ticket-print * {
            visibility: visible;
          }
          #thermal-ticket-print {
            position: absolute;
            left: 0;
            top: 0;
            width: 80mm;
            padding: 4mm;
            background: white !important;
            color: black !important;
            font-family: 'Courier New', Courier, monospace !important;
          }
          .no-print-area {
            display: none !important;
          }
        }
      `}</style>

      {/* --- BARRA DE NOTIFICACIÓN DE TOASTS --- */}
      {notification && (
        <div className={`fixed top-4 right-4 z-50 flex items-center gap-3 p-4 rounded-lg shadow-2xl transition-all duration-300 transform translate-y-0 ${
          notification.type === 'error' ? 'bg-red-600 text-white' : 'bg-amber-500 text-neutral-950'
        }`}>
          <div className="text-xl">
            {notification.type === 'error' ? '⚠️' : '🍗'}
          </div>
          <div className="font-semibold text-sm">{notification.message}</div>
        </div>
      )}

      {/* --- CABECERA PRINCIPAL (Ocultada al imprimir) --- */}
      <header className="bg-neutral-950 border-b border-neutral-800 sticky top-0 z-40 no-print-area">
        <div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          
          {/* Logo de la pollería */}
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-tr from-red-600 to-amber-500 w-11 h-11 rounded-xl flex items-center justify-center text-2xl shadow-lg shadow-red-900/30">
              🍗
            </div>
            <div>
              <h1 className="text-xl font-black tracking-wide text-white uppercase flex items-center gap-2">
                SABOR DORADO <span className="text-xs px-2 py-0.5 bg-red-600 text-white font-bold rounded-full">SISTEMA POS</span>
              </h1>
              <p className="text-xs text-neutral-400">Control de Caja y Fichas Térmicas</p>
            </div>
          </div>

          {/* Selector de pestañas */}
          <div className="flex bg-neutral-900 p-1 rounded-xl border border-neutral-800 w-full sm:w-auto">
            <button
              onClick={() => setActiveTab('pos')}
              className={`flex-1 sm:flex-initial flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg text-sm font-bold transition-all ${
                activeTab === 'pos' 
                  ? 'bg-amber-500 text-neutral-950 shadow-md' 
                  : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
              }`}
            >
              🎟️ Nueva Ficha
            </button>
            <button
              onClick={() => setActiveTab('caja')}
              className={`flex-1 sm:flex-initial flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg text-sm font-bold transition-all ${
                activeTab === 'caja' 
                  ? 'bg-amber-500 text-neutral-950 shadow-md' 
                  : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
              }`}
            >
              💰 Caja & Reportes
              {sales.length > 0 && (
                <span className="ml-1 bg-red-600 text-white text-xs px-2 py-0.5 rounded-full font-black">
                  {sales.length}
                </span>
              )}
            </button>
          </div>

          {/* Indicador de estado de base de datos */}
          <div className="flex items-center gap-2 bg-neutral-900 px-3 py-1.5 rounded-full border border-neutral-800 text-xs">
            <span className={`w-2.5 h-2.5 rounded-full ${user ? 'bg-emerald-500 animate-pulse' : 'bg-red-500'}`}></span>
            <span className="text-neutral-300 font-medium">
              {loadingDb ? 'Sincronizando...' : (user ? 'Servidor Nube Activo' : 'Desconectado')}
            </span>
          </div>

        </div>
      </header>

      {/* --- CONTENIDO PRINCIPAL --- */}
      <main className="flex-grow max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 no-print-area">
        
        {/* PESTAÑA 1: NUEVA FICHA / PUNTO DE VENTA */}
        {activeTab === 'pos' && (
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            {/* Formulario e Interfaz de Selección (Columna Izquierda - 7 de 12cols) */}
            <form onSubmit={handleRegisterSale} className="lg:col-span-7 flex flex-col gap-6">
              
              {/* Bloque 1: Datos del Cliente */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 flex items-center gap-2">
                    👤 Datos del Cliente
                  </h2>
                  <button 
                    type="button"
                    onClick={() => { setClientName('Sin Nombre'); setClientCI('0'); }}
                    className="text-xs bg-neutral-800 hover:bg-neutral-700 text-neutral-300 px-3 py-1.5 rounded-lg border border-neutral-700 transition"
                  >
                    ⚡ Cliente S/N - 0
                  </button>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs text-neutral-400 font-bold mb-1 uppercase">Nombre o Razón Social</label>
                    <input
                      type="text"
                      placeholder="Ej. Juan Perez"
                      value={clientName}
                      onChange={(e) => setClientName(e.target.value)}
                      className="w-full bg-neutral-900 border border-neutral-800 focus:border-amber-500 rounded-xl px-4 py-3 text-sm text-white placeholder-neutral-600 focus:outline-none transition duration-200"
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-neutral-400 font-bold mb-1 uppercase">C.I. / NIT / Celular</label>
                    <input
                      type="text"
                      placeholder="Ej. 8493021 LP"
                      value={clientCI}
                      onChange={(e) => setClientCI(e.target.value)}
                      className="w-full bg-neutral-900 border border-neutral-800 focus:border-amber-500 rounded-xl px-4 py-3 text-sm text-white placeholder-neutral-600 focus:outline-none transition duration-200"
                    />
                  </div>
                </div>
              </div>

              {/* Bloque 2: Selección de Plato de Pollo */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 mb-4 flex items-center gap-2">
                  🍗 1. Seleccione el Plato de Pollo
                </h2>
                
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  {MENU_ITEMS.pollo.map((pollo) => (
                    <button
                      key={pollo.id}
                      type="button"
                      onClick={() => setSelectedChicken(pollo.id)}
                      className={`relative overflow-hidden p-4 rounded-xl border text-left transition-all flex flex-col justify-between h-28 ${
                        selectedChicken === pollo.id
                          ? 'bg-amber-900/20 border-amber-500 ring-2 ring-amber-500/30'
                          : 'bg-neutral-900 border-neutral-800 hover:border-neutral-700'
                      }`}
                    >
                      <div className="flex justify-between items-start w-full">
                        <span className="text-3xl">{pollo.icon}</span>
                        {selectedChicken === pollo.id && (
                          <span className="bg-amber-500 text-neutral-950 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">✓</span>
                        )}
                      </div>
                      <div>
                        <p className="text-sm font-bold text-white leading-tight">{pollo.name}</p>
                        <p className="text-xs text-neutral-400 mt-0.5">Base: {pollo.basePrice} Bs.</p>
                      </div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Bloque 3: Selección de Porción / Opción */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 mb-4 flex items-center gap-2">
                  🍽️ 2. Elija la Porción / Tamaño
                </h2>
                
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  {MENU_ITEMS.portions.map((portion) => {
                    const priceForOption = Math.round(
                      (MENU_ITEMS.pollo.find(p => p.id === selectedChicken)?.basePrice || 0) * portion.factor
                    );
                    return (
                      <button
                        key={portion.id}
                        type="button"
                        onClick={() => setSelectedPortion(portion.id)}
                        className={`p-3.5 rounded-xl border text-center transition-all flex flex-col items-center justify-center gap-1 ${
                          selectedPortion === portion.id
                            ? 'bg-amber-900/20 border-amber-500 ring-2 ring-amber-500/30'
                            : 'bg-neutral-900 border-neutral-800 hover:border-neutral-700'
                        }`}
                      >
                        <span className="text-sm font-bold text-white block">{portion.name}</span>
                        <span className="text-xs text-amber-400 font-extrabold bg-neutral-950 py-1 px-2.5 rounded-full border border-neutral-800">
                          {priceForOption} Bs.
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Bloque 4: Refrescos y Acompañamientos Extras */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 mb-4 flex items-center gap-2">
                  🥤 3. Refrescos & Extras Adicionales
                </h2>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {MENU_ITEMS.drinks.map((drink) => {
                    const currentQty = selectedDrinks[drink.id] || 0;
                    return (
                      <div 
                        key={drink.id}
                        className="flex items-center justify-between p-3 rounded-xl bg-neutral-900 border border-neutral-800 hover:border-neutral-700 transition"
                      >
                        <div className="flex items-center gap-2.5">
                          <span className="text-2xl">{drink.icon}</span>
                          <div>
                            <p className="text-xs font-bold text-white">{drink.name}</p>
                            <p className="text-[11px] text-amber-400 font-bold">{drink.price} Bs.</p>
                          </div>
                        </div>

                        {/* Controles de Cantidad */}
                        <div className="flex items-center gap-2.5">
                          {currentQty > 0 && (
                            <button
                              type="button"
                              onClick={() => handleDrinkQuantity(drink.id, -1)}
                              className="w-8 h-8 rounded-lg bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 flex items-center justify-center font-bold text-white text-lg transition"
                            >
                              -
                            </button>
                          )}
                          
                          <span className={`w-6 text-center font-black text-sm ${currentQty > 0 ? 'text-amber-500' : 'text-neutral-600'}`}>
                            {currentQty}
                          </span>

                          <button
                            type="button"
                            onClick={() => handleDrinkQuantity(drink.id, 1)}
                            className="w-8 h-8 rounded-lg bg-amber-500 hover:bg-amber-400 text-neutral-950 flex items-center justify-center font-bold text-lg transition"
                          >
                            +
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Bloque 5: Detalles Extras y Servicio */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 mb-4 flex items-center gap-2">
                  ⚙️ 4. Indicaciones y Modo de Entrega
                </h2>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block text-xs text-neutral-400 font-bold mb-1.5 uppercase">¿Para llevar o en Mesa?</label>
                    <div className="grid grid-cols-2 gap-2 bg-neutral-900 p-1 rounded-xl border border-neutral-800">
                      <button
                        type="button"
                        onClick={() => setServiceType('mesa')}
                        className={`py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 transition ${
                          serviceType === 'mesa' 
                            ? 'bg-neutral-800 text-white shadow border border-neutral-700' 
                            : 'text-neutral-400 hover:text-white'
                        }`}
                      >
                        🍽️ Consumo en Mesa
                      </button>
                      <button
                        type="button"
                        onClick={() => setServiceType('llevar')}
                        className={`py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 transition ${
                          serviceType === 'llevar' 
                            ? 'bg-neutral-800 text-white shadow border border-neutral-700' 
                            : 'text-neutral-400 hover:text-white'
                        }`}
                      >
                        🥡 Para Llevar
                      </button>
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs text-neutral-400 font-bold mb-1.5 uppercase">Notas Especiales / Llajua</label>
                    <input
                      type="text"
                      placeholder="Ej. Sin arroz, harta llajua, presa pechuga"
                      value={notes}
                      onChange={(e) => setNotes(e.target.value)}
                      className="w-full bg-neutral-900 border border-neutral-800 focus:border-amber-500 rounded-xl px-4 py-2 text-xs text-white placeholder-neutral-600 focus:outline-none transition duration-200"
                    />
                  </div>
                </div>

                <div className="bg-amber-950/20 rounded-xl border border-amber-900/50 p-3 text-center text-xs text-amber-400 font-medium">
                  💡 Las porciones incluyen por defecto: papas fritas, arroz, ensalada, llajua y aderezos de la casa.
                </div>
              </div>

            </form>

            {/* Panel de Previsualización de Ficha (Columna Derecha - 5 de 12cols) */}
            <div className="lg:col-span-5 flex flex-col gap-6">
              
              {/* Bloque de Ficha en Vivo */}
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl sticky top-24 flex flex-col justify-between">
                <div>
                  <h2 className="text-md font-bold uppercase tracking-wider text-amber-500 mb-4 flex items-center gap-2">
                    📋 Previsualización de Ficha Térmica
                  </h2>

                  {/* Representación virtual de ticket térmico físico */}
                  <div className="bg-white text-neutral-950 font-mono text-xs p-6 shadow-2xl rounded-sm border-t-8 border-amber-500 flex flex-col gap-3 relative">
                    
                    {/* Efecto de corte de papel */}
                    <div className="absolute left-0 right-0 -bottom-2 h-4 bg-gradient-to-t from-transparent to-white pointer-events-none" style={{ backgroundImage: 'linear-gradient(135deg, transparent 4px, white 4px), linear-gradient(-135deg, transparent 4px, white 4px)', backgroundSize: '8px 16px' }}></div>
                    
                    <div className="text-center border-b border-dashed border-neutral-400 pb-3">
                      <h3 className="font-black text-sm uppercase">SABOR DORADO</h3>
                      <p className="text-[10px] text-neutral-600">VENTA DE POLLOS DELICIOSOS</p>
                      <p className="text-[9px] text-neutral-500">Calle Sucre #250 - La Paz, Bolivia</p>
                    </div>

                    <div className="flex justify-between items-center bg-neutral-100 p-2 rounded">
                      <span className="font-bold">FICHA Nº:</span>
                      <span className="text-lg font-black bg-neutral-900 text-white px-2 py-0.5 rounded">{ticketCounter}</span>
                    </div>

                    <div className="text-[10px] space-y-0.5 border-b border-dashed border-neutral-300 pb-2">
                      <p><strong>Cliente:</strong> {clientName.trim() || 'Sin Nombre (S/N)'}</p>
                      <p><strong>CI/NIT:</strong> {clientCI.trim() || '0'}</p>
                      <p><strong>Fecha:</strong> {new Date().toLocaleDateString('es-BO')} - {new Date().toLocaleTimeString('es-BO', {hour: '2-digit', minute:'2-digit'})}</p>
                      <p><strong>Servicio:</strong> {serviceType === 'mesa' ? '🍽️ CONSUMO EN MESA' : '🥡 PARA LLEVAR'}</p>
                    </div>

                    {/* Ítems */}
                    <div className="space-y-1 py-1 text-[11px] border-b border-dashed border-neutral-300">
                      <div className="flex justify-between font-bold">
                        <span>DETALLE</span>
                        <span>TOTAL</span>
                      </div>
                      
                      {/* Pollo Principal */}
                      <div className="flex justify-between items-start">
                        <span>1x {MENU_ITEMS.pollo.find(p => p.id === selectedChicken)?.name} ({MENU_ITEMS.portions.find(p => p.id === selectedPortion)?.label})</span>
                        <span className="font-semibold">{getChickenPrice()} Bs.</span>
                      </div>

                      {/* Bebidas / Extras */}
                      {Object.keys(selectedDrinks).map(drinkId => {
                        const qty = selectedDrinks[drinkId];
                        const drinkItem = MENU_ITEMS.drinks.find(d => d.id === drinkId);
                        if (qty > 0 && drinkItem) {
                          return (
                            <div key={drinkId} className="flex justify-between pl-2 text-neutral-700">
                              <span>+ {qty}x {drinkItem.name}</span>
                              <span>{drinkItem.price * qty} Bs.</span>
                            </div>
                          );
                        }
                        return null;
                      })}
                    </div>

                    {/* Notas Especiales */}
                    {notes.trim() && (
                      <div className="bg-neutral-100 p-1.5 text-[10px] text-neutral-800 rounded">
                        <strong>Obs:</strong> {notes}
                      </div>
                    )}

                    {/* Total */}
                    <div className="flex justify-between items-center text-sm font-black pt-1">
                      <span>TOTAL A PAGAR:</span>
                      <span className="text-base font-black text-amber-600 underline decoration-double">{getGrandTotal()} Bs.</span>
                    </div>

                    <div className="text-center pt-3 border-t border-dashed border-neutral-300 text-[9px] text-neutral-500">
                      <p>¡Gracias por su preferencia!</p>
                      <p>Conserve su ficha para recibir su plato</p>
                    </div>

                  </div>
                </div>

                <div className="mt-6 space-y-3">
                  <div className="flex justify-between items-center text-sm text-neutral-400 font-bold bg-neutral-900 p-3 rounded-xl border border-neutral-800">
                    <span>Monto a Cobrar:</span>
                    <span className="text-xl text-white font-black">{getGrandTotal()} Bs.</span>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <button
                      type="button"
                      onClick={resetForm}
                      className="py-3 bg-neutral-900 hover:bg-neutral-800 border border-neutral-800 rounded-xl text-xs font-bold text-neutral-400 hover:text-white transition"
                    >
                      🗑️ Cancelar Todo
                    </button>
                    
                    <button
                      type="button"
                      onClick={handleRegisterSale}
                      className="py-3 bg-gradient-to-r from-red-600 to-amber-500 hover:from-red-500 hover:to-amber-400 text-white font-black rounded-xl text-xs uppercase tracking-wider shadow-lg shadow-red-900/30 transition transform hover:-translate-y-0.5 active:translate-y-0"
                    >
                      🖨️ Registrar y Ficha
                    </button>
                  </div>
                </div>

              </div>

            </div>

          </div>
        )}

        {/* PESTAÑA 2: CONTABILIDAD, CAJA & REPORTES */}
        {activeTab === 'caja' && (
          <div className="space-y-6">
            
            {/* 1. Indicadores de Caja */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              
              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl flex items-center justify-between shadow-xl">
                <div>
                  <p className="text-xs text-neutral-400 font-bold uppercase tracking-wider">Total Recaudado</p>
                  <p className="text-3xl font-black text-emerald-400 mt-1">{stats.totalRevenue} Bs.</p>
                  <p className="text-xs text-neutral-500 mt-0.5">En caja real</p>
                </div>
                <div className="text-4xl bg-emerald-950 text-emerald-400 p-3 rounded-2xl">💵</div>
              </div>

              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl flex items-center justify-between shadow-xl">
                <div>
                  <p className="text-xs text-neutral-400 font-bold uppercase tracking-wider">Fichas Emitidas</p>
                  <p className="text-3xl font-black text-amber-500 mt-1">{stats.totalTickets}</p>
                  <p className="text-xs text-neutral-500 mt-0.5">Pedidos despachados</p>
                </div>
                <div className="text-4xl bg-amber-950 text-amber-500 p-3 rounded-2xl">🎟️</div>
              </div>

              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl flex items-center justify-between shadow-xl">
                <div>
                  <p className="text-xs text-neutral-400 font-bold uppercase tracking-wider">Ticket Promedio</p>
                  <p className="text-3xl font-black text-cyan-400 mt-1">
                    {stats.totalTickets > 0 ? Math.round(stats.totalRevenue / stats.totalTickets) : 0} Bs.
                  </p>
                  <p className="text-xs text-neutral-500 mt-0.5">Por transacción</p>
                </div>
                <div className="text-4xl bg-cyan-950 text-cyan-400 p-3 rounded-2xl">📊</div>
              </div>

              <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl flex items-center justify-between shadow-xl">
                <div>
                  <p className="text-xs text-neutral-400 font-bold uppercase tracking-wider">Plato Más Vendido</p>
                  <p className="text-lg font-black text-red-400 mt-1 uppercase truncate max-w-[150px]">
                    {stats.broasterCount >= Math.max(stats.espiedoCount, stats.milanesaCount) && stats.broasterCount > 0 ? 'Broaster' : 
                     stats.espiedoCount >= Math.max(stats.broasterCount, stats.milanesaCount) && stats.espiedoCount > 0 ? 'Espiedo' : 
                     stats.milanesaCount > 0 ? 'Milanesa' : 'Ninguno'}
                  </p>
                  <p className="text-xs text-neutral-500 mt-0.5">Sabor favorito del día</p>
                </div>
                <div className="text-4xl bg-red-950 text-red-400 p-3 rounded-2xl">🔥</div>
              </div>

            </div>

            {/* 2. Distribución y Ventas por Producto */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
              
              {/* Desglose de Ventas (Columna Izquierda - 4 de 12cols) */}
              <div className="lg:col-span-4 flex flex-col gap-4">
                
                <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                  <h3 className="text-sm font-bold uppercase text-white mb-4 border-b border-neutral-800 pb-2">
                    🍗 Distribución de Pollos Vendidos
                  </h3>
                  
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between text-xs font-bold mb-1">
                        <span>Pollo Broaster 🍗</span>
                        <span className="text-amber-500">{stats.broasterCount} platos</span>
                      </div>
                      <div className="w-full bg-neutral-900 rounded-full h-2.5">
                        <div 
                          className="bg-amber-500 h-2.5 rounded-full transition-all duration-500" 
                          style={{ width: `${stats.totalTickets > 0 ? (stats.broasterCount / stats.totalTickets) * 100 : 0}%` }}
                        ></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between text-xs font-bold mb-1">
                        <span>Pollo al Espiedo 🔥</span>
                        <span className="text-red-500">{stats.espiedoCount} platos</span>
                      </div>
                      <div className="w-full bg-neutral-900 rounded-full h-2.5">
                        <div 
                          className="bg-red-500 h-2.5 rounded-full transition-all duration-500" 
                          style={{ width: `${stats.totalTickets > 0 ? (stats.espiedoCount / stats.totalTickets) * 100 : 0}%` }}
                        ></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between text-xs font-bold mb-1">
                        <span>Milanesa de Pollo 🥩</span>
                        <span className="text-cyan-500">{stats.milanesaCount} platos</span>
                      </div>
                      <div className="w-full bg-neutral-900 rounded-full h-2.5">
                        <div 
                          className="bg-cyan-500 h-2.5 rounded-full transition-all duration-500" 
                          style={{ width: `${stats.totalTickets > 0 ? (stats.milanesaCount / stats.totalTickets) * 100 : 0}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="bg-neutral-950 border border-neutral-800 p-5 rounded-2xl shadow-xl">
                  <h3 className="text-sm font-bold uppercase text-white mb-4 border-b border-neutral-800 pb-2">
                    🍽️ Preferencia de Porciones
                  </h3>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="bg-neutral-900 p-3 rounded-xl text-center border border-neutral-800">
                      <span className="text-xs text-neutral-400 block font-bold">Económico</span>
                      <span className="text-lg font-black text-amber-500 block mt-1">{stats.itemsPorcion.economico}</span>
                    </div>
                    <div className="bg-neutral-900 p-3 rounded-xl text-center border border-neutral-800">
                      <span className="text-xs text-neutral-400 block font-bold">Cuarto</span>
                      <span className="text-lg font-black text-amber-500 block mt-1">{stats.itemsPorcion.cuarto}</span>
                    </div>
                    <div className="bg-neutral-900 p-3 rounded-xl text-center border border-neutral-800">
                      <span className="text-xs text-neutral-400 block font-bold">Medio</span>
                      <span className="text-lg font-black text-amber-500 block mt-1">{stats.itemsPorcion.medio}</span>
                    </div>
                    <div className="bg-neutral-900 p-3 rounded-xl text-center border border-neutral-800">
                      <span className="text-xs text-neutral-400 block font-bold">Entero</span>
                      <span className="text-lg font-black text-amber-500 block mt-1">{stats.itemsPorcion.entero}</span>
                    </div>
                  </div>
                </div>

              </div>

              {/* Historial de Fichas Emitidas (Columna Derecha - 8 de 12cols) */}
              <div className="lg:col-span-8">
                <div className="bg-neutral-950 border border-neutral-800 rounded-2xl shadow-xl overflow-hidden">
                  
                  <div className="p-5 border-b border-neutral-800 flex justify-between items-center bg-neutral-950">
                    <div>
                      <h3 className="text-sm font-bold uppercase text-white">📋 Registro de Fichas del Turno</h3>
                      <p className="text-xs text-neutral-500 mt-0.5">Mostrando las últimas ventas sincronizadas en tiempo real</p>
                    </div>
                    <button 
                      onClick={() => setShowConfirmResetModal(true)}
                      className="text-xs bg-red-950 hover:bg-red-900 border border-red-900 text-red-200 font-bold px-3 py-1.5 rounded-lg transition"
                    >
                      🔄 Resetear Caja
                    </button>
                  </div>

                  {sales.length === 0 ? (
                    <div className="p-12 text-center text-neutral-600 font-bold">
                      <span className="text-4xl block mb-2">📭</span>
                      No hay transacciones registradas el día de hoy
                    </div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-left text-xs text-neutral-300">
                        <thead className="bg-neutral-900 text-[10px] text-neutral-400 uppercase tracking-wider border-b border-neutral-800">
                          <tr>
                            <th className="px-5 py-4">Ficha</th>
                            <th className="px-5 py-4">Hora</th>
                            <th className="px-5 py-4">Cliente / CI</th>
                            <th className="px-5 py-4">Menú Seleccionado</th>
                            <th className="px-5 py-4">Servicio</th>
                            <th className="px-5 py-4 text-right">Monto</th>
                            <th className="px-5 py-4 text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-neutral-900">
                          {sales.map((sale) => (
                            <tr key={sale.id} className="hover:bg-neutral-900/60 transition-colors">
                              <td className="px-5 py-4 font-black text-amber-500">
                                #{sale.ticketNumber}
                              </td>
                              <td className="px-5 py-4 font-medium text-neutral-400">
                                {sale.createdAt.toLocaleTimeString('es-BO', { hour: '2-digit', minute: '2-digit' })}
                              </td>
                              <td className="px-5 py-4">
                                <div className="font-bold text-white truncate max-w-[120px]">{sale.clientName}</div>
                                <div className="text-[10px] text-neutral-500">CI: {sale.clientCI}</div>
                              </td>
                              <td className="px-5 py-4">
                                <div className="font-bold text-neutral-100">
                                  {sale.chicken?.name}
                                </div>
                                <div className="text-[10px] text-neutral-500">
                                  {sale.chicken?.portion}
                                  {sale.extras && sale.extras.length > 0 && ` + ${sale.extras.length} extra(s)`}
                                </div>
                              </td>
                              <td className="px-5 py-4">
                                <span className={`px-2 py-1 rounded-full text-[10px] font-bold ${
                                  sale.serviceType === 'mesa' ? 'bg-indigo-950 text-indigo-400' : 'bg-amber-950 text-amber-400'
                                }`}>
                                  {sale.serviceType === 'mesa' ? '🍽️ Mesa' : '🥡 Llevar'}
                                </span>
                              </td>
                              <td className="px-5 py-4 text-right font-black text-white text-sm">
                                {sale.totalAmount} Bs.
                              </td>
                              <td className="px-5 py-4 text-center">
                                <button
                                  onClick={() => {
                                    setTicketToPrint(sale);
                                    setShowPrintModal(true);
                                  }}
                                  className="bg-neutral-800 hover:bg-amber-500 text-neutral-300 hover:text-neutral-950 font-bold px-2.5 py-1.5 rounded-lg border border-neutral-700 hover:border-amber-500 transition"
                                  title="Reimprimir Ficha"
                                >
                                  🖨️ Ficha
                                </button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}

                </div>
              </div>

            </div>

          </div>
        )}

      </main>

      {/* --- MODAL DE CONFIRMACIÓN DE REIMPRESIÓN / ÉXITO --- */}
      {showPrintModal && ticketToPrint && (
        <div className="fixed inset-0 bg-neutral-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 no-print-area">
          <div className="bg-neutral-900 border border-neutral-800 p-6 rounded-2xl max-w-sm w-full shadow-2xl relative">
            <h3 className="text-base font-bold uppercase text-white mb-4 text-center">🖨️ Ficha Lista Para Imprimir</h3>
            
            <p className="text-xs text-neutral-400 text-center mb-4">
              Se ha registrado con éxito la ficha Nº <strong className="text-amber-500">{ticketToPrint.ticketNumber}</strong> de <strong>{ticketToPrint.clientName}</strong>.
            </p>

            {/* Preview visual rápida dentro del modal */}
            <div className="border border-neutral-700 bg-white text-neutral-950 font-mono text-[10px] p-4 rounded mb-5 space-y-2">
              <div className="text-center border-b border-dashed border-neutral-300 pb-2">
                <p className="font-bold">SABOR DORADO</p>
                <p className="text-[8px]">FICHA Nº {ticketToPrint.ticketNumber}</p>
              </div>
              <div>
                <p><strong>Cliente:</strong> {ticketToPrint.clientName}</p>
                <p><strong>Total:</strong> {ticketToPrint.totalAmount} Bs.</p>
                <p><strong>Pedido:</strong> 1x {ticketToPrint.chicken?.name} ({ticketToPrint.chicken?.portion})</p>
                {ticketToPrint.notes && <p className="italic text-neutral-700">Obs: "{ticketToPrint.notes}"</p>}
              </div>
            </div>

            <div className="flex gap-3">
              <button
                onClick={() => { setShowPrintModal(false); setTicketToPrint(null); }}
                className="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 rounded-xl text-xs font-bold text-neutral-300 transition"
              >
                Cerrar Ventana
              </button>
              <button
                onClick={triggerPrint}
                className="flex-1 py-2.5 bg-gradient-to-r from-red-600 to-amber-500 hover:from-red-500 hover:to-amber-400 text-white font-black rounded-xl text-xs uppercase tracking-wider transition"
              >
                Imprimir Ficha
              </button>
            </div>
          </div>
        </div>
      )}

      {/* --- MODAL DE CONFIRMACIÓN DE RESETEO DE BASE DE DATOS --- */}
      {showConfirmResetModal && (
        <div className="fixed inset-0 bg-neutral-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 no-print-area">
          <div className="bg-neutral-900 border border-neutral-800 p-6 rounded-2xl max-w-sm w-full shadow-2xl text-center">
            <span className="text-4xl block mb-2">⚠️</span>
            <h3 className="text-base font-bold uppercase text-white mb-2">¿Seguro que deseas vaciar la caja?</h3>
            <p className="text-xs text-neutral-400 mb-5 leading-relaxed">
              Esta acción simula el inicio de un nuevo turno o día. Los registros se mantendrán limpios únicamente en la interfaz activa. Para operaciones reales consulte con TI.
            </p>

            <div className="flex gap-3">
              <button
                onClick={() => setShowConfirmResetModal(false)}
                className="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 rounded-xl text-xs font-bold text-neutral-300 transition"
              >
                Cancelar
              </button>
              <button
                onClick={() => {
                  setSales([]);
                  setTicketCounter(101);
                  setShowConfirmResetModal(false);
                  showToast("Caja reiniciada para un nuevo turno.");
                }}
                className="flex-1 py-2.5 bg-red-600 hover:bg-red-500 text-white font-black rounded-xl text-xs uppercase transition"
              >
                Sí, Resetear
              </button>
            </div>
          </div>
        </div>
      )}

      {/* --- CONTENEDOR ESPECÍFICO DE IMPRESIÓN (OCULTO EN LA INTERFAZ WEB) --- */}
      {ticketToPrint && (
        <div id="thermal-ticket-print" className="hidden">
          <div style={{ textAlign: 'center', borderBottom: '1px dashed black', paddingBottom: '10px', marginBottom: '10px' }}>
            <h2 style={{ margin: '0 0 5px 0', fontSize: '16px', fontWeight: 'bold' }}>SABOR DORADO</h2>
            <p style={{ margin: '0', fontSize: '10px' }}>POLLERÍA Y EMISIÓN DE FICHAS</p>
            <p style={{ margin: '0', fontSize: '9px' }}>La Paz, Bolivia</p>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#f0f0f0', padding: '5px', margin: '10px 0', border: '1px solid black' }}>
            <span style={{ fontWeight: 'bold', fontSize: '14px' }}>FICHA Nº:</span>
            <span style={{ fontSize: '18px', fontWeight: 'bold' }}>{ticketToPrint.ticketNumber}</span>
          </div>

          <div style={{ fontSize: '10px', marginBottom: '10px', borderBottom: '1px dashed black', paddingBottom: '10px' }}>
            <p style={{ margin: '2px 0' }}><strong>Cliente:</strong> {ticketToPrint.clientName}</p>
            <p style={{ margin: '2px 0' }}><strong>C.I. / NIT:</strong> {ticketToPrint.clientCI}</p>
            <p style={{ margin: '2px 0' }}><strong>Fecha/Hora:</strong> {ticketToPrint.createdAt?.toLocaleDateString('es-BO')} - {ticketToPrint.createdAt?.toLocaleTimeString('es-BO', {hour: '2-digit', minute:'2-digit'})}</p>
            <p style={{ margin: '2px 0' }}><strong>Entrega:</strong> {ticketToPrint.serviceType === 'mesa' ? 'MESA' : 'PARA LLEVAR'}</p>
          </div>

          <div style={{ fontSize: '11px', marginBottom: '10px', borderBottom: '1px dashed black', paddingBottom: '10px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', marginBottom: '5px' }}>
              <span>DESCRIPCIÓN</span>
              <span>TOTAL</span>
            </div>
            
            <div style={{ display: 'flex', justifyContent: 'space-between', margin: '2px 0' }}>
              <span>1x {ticketToPrint.chicken?.name} ({ticketToPrint.chicken?.portion})</span>
              <span>{ticketToPrint.chicken?.price} Bs.</span>
            </div>

            {ticketToPrint.extras?.map((extra) => (
              <div key={extra.id} style={{ display: 'flex', justifyContent: 'space-between', margin: '2px 0', paddingLeft: '10px' }}>
                <span>+ {extra.quantity}x {extra.name}</span>
                <span>{extra.subtotal} Bs.</span>
              </div>
            ))}
          </div>

          {ticketToPrint.notes && (
            <div style={{ border: '1px solid black', padding: '5px', fontSize: '9px', marginBottom: '10px', background: '#f9f9f9' }}>
              <strong>Observación:</strong> {ticketToPrint.notes}
            </div>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '13px', fontWeight: 'bold', borderBottom: '1px dashed black', paddingBottom: '10px' }}>
            <span>TOTAL PAGADO:</span>
            <span>{ticketToPrint.totalAmount} Bs.</span>
          </div>

          <div style={{ textAlign: 'center', fontSize: '9px', marginTop: '15px' }}>
            <p style={{ margin: '2px 0' }}>¡Muchas gracias por su compra!</p>
            <p style={{ margin: '2px 0' }}>Sabor inigualable en cada presa</p>
          </div>
        </div>
      )}

      {/* --- PIE DE PÁGINA (Oculto al imprimir) --- */}
      <footer className="bg-neutral-950 border-t border-neutral-800 py-4 mt-auto no-print-area">
        <div className="max-w-7xl mx-auto px-4 text-center text-xs text-neutral-500">
          © {new Date().getFullYear()} Sabores Dorados S.R.L. - Sistema de Facturación y Fichas Térmicas Integrado.
        </div>
      </footer>

    </div>
  );
}