import React, { useState, lazy, Suspense } from 'react';
import MainLayout from '@/components/layout/MainLayout';
import OrderList from '@/components/orders/OrderList';
import { Customer, Order, OrderStatus } from '@/lib/types';
import { useOrdersQuery } from '@/hooks/useOrdersQuery';
import { useCustomersQuery } from '@/hooks/useCustomersQuery';
import { useDeliveryPersonsQuery } from '@/hooks/useDeliveryPersonsQuery';
import { useProductsQuery } from '@/hooks/useProductsQuery';
import { useAppSettingsQuery } from '@/hooks/useAppSettingsQuery';
import { useOrderAlerts } from '@/hooks/useOrderAlerts';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { LoadingSpinner } from '@/components/ui/loading-spinner';

// Lazy load heavy components
const OrderForm = lazy(() => import('@/components/orders/OrderForm'));
const OrderPrint = lazy(() => import('@/components/orders/OrderPrint'));
const OrderHistory = lazy(() => import('@/components/orders/OrderHistory'));
const BackupManager = lazy(() => import('@/components/orders/BackupManager').then(m => ({ default: m.BackupManager })));

const Orders = () => {
  const { orders, loading: ordersLoading, saveOrder, updateOrderStatus, cancelOrder, deleteOrder } = useOrdersQuery();
  const { customers, loading: customersLoading } = useCustomersQuery();
  const { deliveryPersons, loading: deliveryLoading } = useDeliveryPersonsQuery();
  const { products, loading: productsLoading } = useProductsQuery();
  const { config } = useAppSettingsQuery();
  
  // Ativar alertas de pedidos expirados
  useOrderAlerts({
    orders,
    alertasAtivos: config?.alertas_sonoros ?? true
  });
  
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [currentOrder, setCurrentOrder] = useState<Order | undefined>(undefined);
  const [printingOrder, setPrintingOrder] = useState<Order | undefined>(undefined);

  const motoboys = deliveryPersons.map(person => person.nome);
  const loading = ordersLoading || customersLoading || deliveryLoading || productsLoading;

  const handleAddClick = () => {
    setCurrentOrder(undefined);
    setIsFormOpen(true);
  };

  const handleEditClick = (order: Order) => {
    setCurrentOrder(order);
    setIsFormOpen(true);
  };

  const handlePrintClick = (order: Order) => {
    console.log('🖨️ Orders.tsx - handlePrintClick chamado:', {
      orderId: order.id,
      tipoPedido: order.tipo_pedido,
      clienteId: order.cliente_id,
      mesaId: order.mesa_id
    });
    setPrintingOrder(order);
  };

  const handleStatusChange = async (orderId: string, status: OrderStatus) => {
    await updateOrderStatus(orderId, status);
  };

  const handleSaveOrder = async (order: Order) => {
    await saveOrder(order);
    setIsFormOpen(false);
  };

  const handleCancelForm = () => {
    setIsFormOpen(false);
  };

  const handleDeleteOrder = async (orderId: string) => {
    await deleteOrder(orderId);
  };

  const handleCancelOrder = async (orderId: string) => {
    await cancelOrder(orderId);
  };

  const getCustomerById = (id: string): Customer | undefined => {
    return customers.find(c => c.id === id);
  };

  if (loading) {
    return (
      <MainLayout>
        <div className="flex items-center justify-center h-64">
          <div className="w-8 h-8 border-4 border-pdv-red border-t-transparent rounded-full animate-spin"></div>
        </div>
      </MainLayout>
    );
  }

  console.log('🖨️ Orders.tsx - Renderizando componente:', {
    printingOrder: !!printingOrder,
    printingOrderId: printingOrder?.id,
    printingOrderTipo: printingOrder?.tipo_pedido
  });

  return (
    <MainLayout>
      <div className="space-y-6">
        <h1 className="text-3xl font-bold tracking-tight">Pedidos</h1>
        
        {isFormOpen ? (
          <Suspense fallback={<LoadingSpinner />}>
            <OrderForm 
              order={currentOrder}
              customers={customers}
              products={products}
              deliveryPersons={motoboys}
              onSave={handleSaveOrder}
              onCancel={handleCancelForm}
              config={config}
            />
          </Suspense>
        ) : (
          <Tabs defaultValue="orders" className="w-full">
            <TabsList className="w-full justify-start gap-2">
              <TabsTrigger value="orders" className="flex-1 max-w-[200px]">Gerenciar Pedidos</TabsTrigger>
              <TabsTrigger value="history" className="flex-1 max-w-[200px]">Histórico de Pedidos</TabsTrigger>
              <TabsTrigger value="backup" className="flex-1 max-w-[200px]">Backup do Sistema</TabsTrigger>
            </TabsList>
            
            <TabsContent value="orders" className="space-y-4">
              <OrderList 
                orders={orders}
                customers={customers}
                onEdit={handleEditClick}
                onPrint={handlePrintClick}
                onAdd={handleAddClick}
                onAddToRoutes={() => {}} // Funcionalidade será implementada depois
                onStatusChange={handleStatusChange}
                onDelete={handleDeleteOrder}
                onCancel={handleCancelOrder}
              />
            </TabsContent>
            
            <TabsContent value="history" className="space-y-4">
              <Suspense fallback={<LoadingSpinner />}>
                <OrderHistory />
              </Suspense>
            </TabsContent>
            
            <TabsContent value="backup" className="space-y-4">
              <Suspense fallback={<LoadingSpinner />}>
                <BackupManager onRestoreComplete={() => {
                  // Callback quando o backup for restaurado
                  console.log('✅ Backup do sistema de impressão restaurado com sucesso!');
                }} />
              </Suspense>
            </TabsContent>
          </Tabs>
        )}
        
        {printingOrder && (
          <Suspense fallback={<LoadingSpinner />}>
            <OrderPrint 
              order={printingOrder} 
              customer={getCustomerById(printingOrder.cliente_id)}
              onClose={() => {
                console.log('🖨️ Orders.tsx - Fechando modal de impressão');
                setPrintingOrder(undefined);
              }} 
            />
          </Suspense>
        )}
      </div>
    </MainLayout>
  );
};

export default Orders;