import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Table,
  Button,
  Badge,
  Input,
  Select,
  Card,
  Modal,
  Tooltip
} from '../../ui';
import { SalesDataResponse } from '../../../api/types/sales';
import { salesService } from '../../../api/services/sales';
import { useSalesRecords } from '../../../api/hooks/sales';
import { useTenantCurrency } from '../../../hooks/useTenantCurrency';

// Define missing types for backwards compatibility
type SalesRecord = SalesDataResponse;

enum SalesChannel {
  ONLINE = 'online',
  IN_STORE = 'in_store',
  PHONE = 'phone',
  DELIVERY = 'delivery'
}

enum PaymentMethod {
  CASH = 'cash',
  CARD = 'card',
  DIGITAL = 'digital',
  TRANSFER = 'transfer'
}

enum SalesSortField {
  DATE = 'date',
  TOTAL = 'total_revenue',
  PRODUCT = 'product_name',
  QUANTITY = 'quantity_sold'
}

enum SortOrder {
  ASC = 'asc',
  DESC = 'desc'
}

// Extended interface for orders
interface Order extends SalesRecord {
  customer_name: string;
  customer_phone?: string;
  delivery_address?: string;
  order_notes?: string;
  items_count: number;
  status: OrderStatus;
}

enum OrderStatus {
  PENDIENTE = 'pendiente',
  CONFIRMADO = 'confirmado', 
  EN_PREPARACION = 'en_preparacion',
  LISTO = 'listo',
  ENTREGADO = 'entregado',
  CANCELADO = 'cancelado'
}

interface OrdersTableProps {
  tenantId?: string;
  showActions?: boolean;
  onOrderSelect?: (order: Order) => void;
  onOrderUpdate?: (orderId: string, updates: Partial<Order>) => void;
  initialFilters?: OrderFilters;
}

interface OrderFilters {
  status?: OrderStatus;
  customer_name?: string;
  date_from?: string;
  date_to?: string;
  min_total?: number;
  max_total?: number;
  sales_channel?: SalesChannel;
  payment_method?: PaymentMethod;
}

interface BulkActions {
  selectedOrders: string[];
  action: 'change_status' | 'print_receipts' | 'export' | 'delete';
  newStatus?: OrderStatus;
}

const StatusColors = {
  [OrderStatus.PENDIENTE]: 'yellow',
  [OrderStatus.CONFIRMADO]: 'blue',
  [OrderStatus.EN_PREPARACION]: 'orange',
  [OrderStatus.LISTO]: 'green',
  [OrderStatus.ENTREGADO]: 'emerald',
  [OrderStatus.CANCELADO]: 'red'
} as const;

// Note: These will be replaced with translation functions inside the component

export const OrdersTable: React.FC<OrdersTableProps> = ({
  tenantId,
  showActions = true,
  onOrderSelect,
  onOrderUpdate,
  initialFilters = {}
}) => {
  const { t } = useTranslation(['sales']);
  const { currencySymbol } = useTenantCurrency();

  // Translation helper functions
  const getStatusLabel = (status: OrderStatus) => {
    const statusKey = status.toLowerCase();
    return t(`sales:orders.status.${statusKey}`, StatusLabels[status] || status);
  };

  const getChannelLabel = (channel: SalesChannel) => {
    const channelKey = channel.toLowerCase();
    return t(`sales:orders.channels.${channelKey}`, channel);
  };

  const getPaymentLabel = (method: PaymentMethod) => {
    const methodKey = method.toLowerCase();
    return t(`sales:orders.payment_methods.${methodKey}`, method);
  };

  // Legacy objects for fallbacks (will be removed after migration)
  const StatusLabels = {
    [OrderStatus.PENDIENTE]: 'Pendiente',
    [OrderStatus.CONFIRMADO]: 'Confirmado',
    [OrderStatus.EN_PREPARACION]: 'En Preparación',
    [OrderStatus.LISTO]: 'Listo para Entrega',
    [OrderStatus.ENTREGADO]: 'Entregado',
    [OrderStatus.CANCELADO]: 'Cancelado'
  } as const;

  // State
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Filters and sorting
  const [filters, setFilters] = useState<OrderFilters>(initialFilters);
  const [sortBy, setSortBy] = useState<SalesSortField>(SalesSortField.DATE);
  const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.DESC);
  const [searchTerm, setSearchTerm] = useState('');

  // Selection and bulk actions
  const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
  const [showBulkActions, setShowBulkActions] = useState(false);
  const [bulkActionModal, setBulkActionModal] = useState(false);
  const [bulkAction, setBulkAction] = useState<BulkActions['action'] | null>(null);
  const [newBulkStatus, setNewBulkStatus] = useState<OrderStatus | null>(null);

  // Pagination
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [totalPages, setTotalPages] = useState(1);
  const [totalOrders, setTotalOrders] = useState(0);

  // Order details modal
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [showOrderDetails, setShowOrderDetails] = useState(false);

  // Sales hook
  const { fetchSalesData } = useSales();

  // Load orders
  const loadOrders = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const queryParams = {
        page: currentPage,
        size: pageSize,
        sort_by: sortBy,
        sort_order: sortOrder,
        ...filters,
        search: searchTerm || undefined,
      };

      // Simulate API call with mock data transformation
      const response = await salesService.getSales(queryParams);
      
      if (response.success && response.data) {
        // Transform sales records to orders (in real app this would come from orders API)
        const transformedOrders: Order[] = response.data.items.map((sale: any, index: number) => ({
          ...sale,
          customer_name: `Cliente ${index + 1}`,
          customer_phone: `+34 ${Math.floor(Math.random() * 900000000 + 100000000)}`,
          delivery_address: sale.sales_channel === SalesChannel.DELIVERY 
            ? `Calle Ejemplo ${Math.floor(Math.random() * 100)}, Madrid` 
            : undefined,
          order_notes: Math.random() > 0.7 ? 'Sin gluten' : undefined,
          items_count: Math.floor(Math.random() * 5) + 1,
          status: Object.values(OrderStatus)[Math.floor(Math.random() * Object.values(OrderStatus).length)],
        }));

        setOrders(transformedOrders);
        setTotalOrders(response.data.total);
        setTotalPages(response.data.pages);
      } else {
        setError(response.error || 'Error al cargar pedidos');
      }
    } catch (err) {
      setError('Error de conexión al servidor');
      console.error('Error loading orders:', err);
    } finally {
      setLoading(false);
    }
  }, [currentPage, pageSize, sortBy, sortOrder, filters, searchTerm]);

  // Effects
  useEffect(() => {
    loadOrders();
  }, [loadOrders]);

  useEffect(() => {
    setCurrentPage(1);
  }, [filters, searchTerm]);

  // Filtered and sorted orders
  const filteredOrders = useMemo(() => {
    let filtered = [...orders];

    // Apply search filter
    if (searchTerm) {
      const searchLower = searchTerm.toLowerCase();
      filtered = filtered.filter(order => 
        order.customer_name.toLowerCase().includes(searchLower) ||
        order.id.toLowerCase().includes(searchLower) ||
        order.product_name.toLowerCase().includes(searchLower)
      );
    }

    return filtered;
  }, [orders, searchTerm]);

  // Table columns
  const columns = [
    {
      key: 'select',
      title: (
        <input
          type="checkbox"
          checked={selectedOrders.length === filteredOrders.length && filteredOrders.length > 0}
          onChange={(e) => {
            if (e.target.checked) {
              setSelectedOrders(filteredOrders.map(order => order.id));
            } else {
              setSelectedOrders([]);
            }
          }}
          className="rounded border-[var(--border-secondary)]"
        />
      ),
      render: (order: Order) => (
        <input
          type="checkbox"
          checked={selectedOrders.includes(order.id)}
          onChange={(e) => {
            if (e.target.checked) {
              setSelectedOrders(prev => [...prev, order.id]);
            } else {
              setSelectedOrders(prev => prev.filter(id => id !== order.id));
            }
          }}
          className="rounded border-[var(--border-secondary)]"
        />
      ),
    },
    {
      key: 'id',
      title: t('sales:orders.table.columns.order_number', 'Nº Pedido'),
      sortable: true,
      render: (order: Order) => (
        <button
          onClick={() => {
            setSelectedOrder(order);
            setShowOrderDetails(true);
          }}
          className="text-[var(--color-info)] hover:text-[var(--color-info)] font-medium"
        >
          #{order.id.slice(-8)}
        </button>
      ),
    },
    {
      key: 'customer_name',
      title: t('sales:orders.table.columns.customer', 'Cliente'),
      sortable: true,
      render: (order: Order) => (
        <div>
          <div className="font-medium">{order.customer_name}</div>
          {order.customer_phone && (
            <div className="text-sm text-[var(--text-tertiary)]">{order.customer_phone}</div>
          )}
        </div>
      ),
    },
    {
      key: 'products',
      title: t('sales:orders.table.columns.products', 'Productos'),
      render: (order: Order) => (
        <div>
          <div className="font-medium">{order.product_name}</div>
          <div className="text-sm text-[var(--text-tertiary)]">
            {order.items_count} {order.items_count === 1 ? 'artículo' : 'artículos'}
          </div>
        </div>
      ),
    },
    {
      key: 'total_revenue',
      title: t('sales:orders.table.columns.total', 'Total'),
      sortable: true,
      render: (order: Order) => (
        <div className="text-right">
          <div className="font-semibold">{currencySymbol}{order.total_revenue.toFixed(2)}</div>
          {order.discount_applied > 0 && (
            <div className="text-sm text-[var(--color-success)]">
              -{currencySymbol}{order.discount_applied.toFixed(2)}
            </div>
          )}
        </div>
      ),
    },
    {
      key: 'status',
      title: t('sales:orders.table.columns.status', 'Estado'),
      sortable: true,
      render: (order: Order) => (
        <Badge color={StatusColors[order.status]} variant="soft">
          {getStatusLabel(order.status)}
        </Badge>
      ),
    },
    {
      key: 'sales_channel',
      title: t('sales:orders.table.columns.channel', 'Canal'),
      render: (order: Order) => (
        <span className="text-sm text-[var(--text-secondary)]">
          {ChannelLabels[order.sales_channel]}
        </span>
      ),
    },
    {
      key: 'date',
      title: t('sales:orders.table.columns.date', 'Fecha'),
      sortable: true,
      render: (order: Order) => (
        <div>
          <div>{new Date(order.date).toLocaleDateString('es-ES')}</div>
          <div className="text-sm text-[var(--text-tertiary)]">
            {new Date(order.created_at).toLocaleTimeString('es-ES', { 
              hour: '2-digit', 
              minute: '2-digit' 
            })}
          </div>
        </div>
      ),
    },
  ];

  if (showActions) {
    columns.push({
      key: 'actions',
      title: t('sales:orders.table.columns.actions', 'Acciones'),
      render: (order: Order) => (
        <div className="flex space-x-2">
          <Tooltip content="Ver detalles">
            <Button
              size="sm"
              variant="outline"
              onClick={() => {
                setSelectedOrder(order);
                setShowOrderDetails(true);
              }}
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
            </Button>
          </Tooltip>
          
          <Tooltip content="Cambiar estado">
            <Select
              size="sm"
              value={order.status}
              onChange={(value) => handleStatusChange(order.id, value as OrderStatus)}
              options={Object.values(OrderStatus).map(status => ({
                value: status,
                label: StatusLabels[status]
              }))}
            />
          </Tooltip>

          {order.status !== OrderStatus.CANCELADO && (
            <Tooltip content="Imprimir recibo">
              <Button
                size="sm"
                variant="outline"
                onClick={() => handlePrintReceipt(order.id)}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                </svg>
              </Button>
            </Tooltip>
          )}
        </div>
      ),
    });
  }

  // Handlers
  const handleStatusChange = async (orderId: string, newStatus: OrderStatus) => {
    try {
      // Update locally first
      setOrders(prev => prev.map(order => 
        order.id === orderId ? { ...order, status: newStatus } : order
      ));
      
      // Call API
      onOrderUpdate?.(orderId, { status: newStatus });
      
      // In real app, make API call here
    } catch (error) {
      console.error('Error updating order status:', error);
      // Revert on error
      loadOrders();
    }
  };

  const handlePrintReceipt = (orderId: string) => {
    // In real app, generate and print receipt
    console.log('Printing receipt for order:', orderId);
    window.print();
  };

  const handleBulkAction = async () => {
    if (!bulkAction || selectedOrders.length === 0) return;

    try {
      switch (bulkAction) {
        case 'change_status':
          if (newBulkStatus) {
            setOrders(prev => prev.map(order => 
              selectedOrders.includes(order.id) 
                ? { ...order, status: newBulkStatus }
                : order
            ));
          }
          break;
        case 'print_receipts':
          selectedOrders.forEach(handlePrintReceipt);
          break;
        case 'export':
          handleExportOrders(selectedOrders);
          break;
        case 'delete':
          setOrders(prev => prev.filter(order => !selectedOrders.includes(order.id)));
          break;
      }
      
      setSelectedOrders([]);
      setBulkActionModal(false);
      setBulkAction(null);
      setNewBulkStatus(null);
    } catch (error) {
      console.error('Error performing bulk action:', error);
    }
  };

  const handleExportOrders = async (orderIds?: string[]) => {
    try {
      const exportData = orders
        .filter(order => !orderIds || orderIds.includes(order.id))
        .map(order => ({
          'Nº Pedido': order.id,
          'Cliente': order.customer_name,
          'Teléfono': order.customer_phone,
          'Productos': order.product_name,
          'Cantidad': order.quantity_sold,
          'Total': order.total_revenue,
          'Estado': StatusLabels[order.status],
          'Canal': ChannelLabels[order.sales_channel],
          'Fecha': new Date(order.date).toLocaleDateString('es-ES'),
        }));

      const csv = [
        Object.keys(exportData[0]).join(','),
        ...exportData.map(row => Object.values(row).join(','))
      ].join('\n');

      const blob = new Blob([csv], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `pedidos_${new Date().toISOString().split('T')[0]}.csv`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Error exporting orders:', error);
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-[var(--text-primary)]">Gestión de Pedidos</h2>
          <p className="text-[var(--text-secondary)]">
            {totalOrders} pedidos encontrados
          </p>
        </div>
        
        <div className="flex items-center space-x-3">
          <Button onClick={() => handleExportOrders()} variant="outline" size="sm">
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Exportar
          </Button>
          <Button onClick={() => loadOrders()} size="sm">
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Actualizar
          </Button>
        </div>
      </div>

      {/* Filters */}
      <Card className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <Input
            label="Buscar pedidos"
            placeholder="Cliente, nº pedido o producto..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          
          <Select
            label="Estado"
            value={filters.status || ''}
            onChange={(value) => setFilters(prev => ({ 
              ...prev, 
              status: value ? value as OrderStatus : undefined 
            }))}
            options={[
              { value: '', label: 'Todos los estados' },
              ...Object.values(OrderStatus).map(status => ({
                value: status,
                label: StatusLabels[status]
              }))
            ]}
          />
          
          <Select
            label="Canal de venta"
            value={filters.sales_channel || ''}
            onChange={(value) => setFilters(prev => ({ 
              ...prev, 
              sales_channel: value ? value as SalesChannel : undefined 
            }))}
            options={[
              { value: '', label: 'Todos los canales' },
              ...Object.values(SalesChannel).map(channel => ({
                value: channel,
                label: ChannelLabels[channel]
              }))
            ]}
          />

          <div className="flex space-x-2">
            <Input
              label="Total mínimo"
              type="number"
              step="0.01"
              value={filters.min_total || ''}
              onChange={(e) => setFilters(prev => ({ 
                ...prev, 
                min_total: e.target.value ? parseFloat(e.target.value) : undefined 
              }))}
              placeholder={`${currencySymbol}0.00`}
            />
            <Input
              label="Total máximo"
              type="number"
              step="0.01"
              value={filters.max_total || ''}
              onChange={(e) => setFilters(prev => ({ 
                ...prev, 
                max_total: e.target.value ? parseFloat(e.target.value) : undefined 
              }))}
              placeholder={`${currencySymbol}999.99`}
            />
          </div>
        </div>

        <div className="flex justify-between items-center mt-4 pt-4 border-t border-[var(--border-primary)]">
          <div className="text-sm text-[var(--text-secondary)]">
            Mostrando {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, totalOrders)} de {totalOrders}
          </div>
          
          <Select
            value={pageSize.toString()}
            onChange={(value) => setPageSize(parseInt(value))}
            options={[
              { value: '10', label: '10 por página' },
              { value: '20', label: '20 por página' },
              { value: '50', label: '50 por página' },
              { value: '100', label: '100 por página' }
            ]}
          />
        </div>
      </Card>

      {/* Bulk Actions */}
      {selectedOrders.length > 0 && (
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <span className="text-sm text-[var(--text-secondary)]">
              {selectedOrders.length} pedidos seleccionados
            </span>
            
            <div className="flex space-x-2">
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  setBulkAction('change_status');
                  setBulkActionModal(true);
                }}
              >
                Cambiar Estado
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  setBulkAction('print_receipts');
                  handleBulkAction();
                }}
              >
                Imprimir Recibos
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => handleExportOrders(selectedOrders)}
              >
                Exportar
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => setSelectedOrders([])}
              >
                Limpiar Selección
              </Button>
            </div>
          </div>
        </Card>
      )}

      {/* Table */}
      <Card>
        <div className="overflow-x-auto">
          <Table
            columns={columns}
            data={filteredOrders}
            loading={loading}
            emptyMessage="No se encontraron pedidos"
          />
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between px-6 py-4 border-t border-[var(--border-primary)]">
            <Button
              variant="outline"
              size="sm"
              disabled={currentPage === 1}
              onClick={() => setCurrentPage(prev => prev - 1)}
            >
              Anterior
            </Button>

            <div className="flex space-x-2">
              {Array.from({ length: totalPages }, (_, i) => i + 1)
                .filter(page => 
                  page === 1 || 
                  page === totalPages || 
                  Math.abs(page - currentPage) <= 2
                )
                .map((page, index, array) => (
                  <React.Fragment key={page}>
                    {index > 0 && array[index - 1] !== page - 1 && (
                      <span className="px-3 py-1 text-[var(--text-tertiary)]">...</span>
                    )}
                    <Button
                      size="sm"
                      variant={currentPage === page ? 'primary' : 'outline'}
                      onClick={() => setCurrentPage(page)}
                    >
                      {page}
                    </Button>
                  </React.Fragment>
                ))}
            </div>

            <Button
              variant="outline"
              size="sm"
              disabled={currentPage === totalPages}
              onClick={() => setCurrentPage(prev => prev + 1)}
            >
              Siguiente
            </Button>
          </div>
        )}
      </Card>

      {/* Order Details Modal */}
      <Modal
        isOpen={showOrderDetails}
        onClose={() => setShowOrderDetails(false)}
        title={`Pedido #${selectedOrder?.id.slice(-8)}`}
        size="lg"
      >
        {selectedOrder && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium text-[var(--text-primary)] mb-3">Información del Cliente</h4>
                <div className="space-y-2">
                  <div><span className="text-[var(--text-secondary)]">Nombre:</span> {selectedOrder.customer_name}</div>
                  {selectedOrder.customer_phone && (
                    <div><span className="text-[var(--text-secondary)]">Teléfono:</span> {selectedOrder.customer_phone}</div>
                  )}
                  {selectedOrder.delivery_address && (
                    <div><span className="text-[var(--text-secondary)]">Dirección:</span> {selectedOrder.delivery_address}</div>
                  )}
                </div>
              </div>

              <div>
                <h4 className="font-medium text-[var(--text-primary)] mb-3">Detalles del Pedido</h4>
                <div className="space-y-2">
                  <div><span className="text-[var(--text-secondary)]">Estado:</span> 
                    <Badge color={StatusColors[selectedOrder.status]} variant="soft" className="ml-2">
                      {StatusLabels[selectedOrder.status]}
                    </Badge>
                  </div>
                  <div><span className="text-[var(--text-secondary)]">Canal:</span> {ChannelLabels[selectedOrder.sales_channel]}</div>
                  <div><span className="text-[var(--text-secondary)]">Fecha:</span> {new Date(selectedOrder.date).toLocaleDateString('es-ES')}</div>
                  {selectedOrder.payment_method && (
                    <div><span className="text-[var(--text-secondary)]">Pago:</span> {PaymentLabels[selectedOrder.payment_method]}</div>
                  )}
                </div>
              </div>
            </div>

            <div>
              <h4 className="font-medium text-[var(--text-primary)] mb-3">Productos</h4>
              <div className="border rounded-lg p-4">
                <div className="flex justify-between items-center">
                  <div>
                    <div className="font-medium">{selectedOrder.product_name}</div>
                    {selectedOrder.category && (
                      <div className="text-sm text-[var(--text-secondary)]">{selectedOrder.category}</div>
                    )}
                  </div>
                  <div className="text-right">
                    <div className="font-medium">{currencySymbol}{selectedOrder.unit_price.toFixed(2)} × {selectedOrder.quantity_sold}</div>
                    <div className="text-sm text-[var(--text-secondary)]">{currencySymbol}{selectedOrder.total_revenue.toFixed(2)}</div>
                  </div>
                </div>
              </div>
            </div>

            {selectedOrder.order_notes && (
              <div>
                <h4 className="font-medium text-[var(--text-primary)] mb-3">Notas del Pedido</h4>
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm">
                  {selectedOrder.order_notes}
                </div>
              </div>
            )}

            <div className="border-t pt-4">
              <div className="flex justify-between items-center text-lg font-semibold">
                <span>Total del Pedido:</span>
                <span>{currencySymbol}{selectedOrder.total_revenue.toFixed(2)}</span>
              </div>
              {selectedOrder.discount_applied > 0 && (
                <div className="flex justify-between items-center text-sm text-[var(--color-success)]">
                  <span>Descuento aplicado:</span>
                  <span>-{currencySymbol}{selectedOrder.discount_applied.toFixed(2)}</span>
                </div>
              )}
              {selectedOrder.tax_amount > 0 && (
                <div className="flex justify-between items-center text-sm text-[var(--text-secondary)]">
                  <span>IVA incluido:</span>
                  <span>{currencySymbol}{selectedOrder.tax_amount.toFixed(2)}</span>
                </div>
              )}
            </div>

            <div className="flex justify-end space-x-3">
              <Button
                variant="outline"
                onClick={() => handlePrintReceipt(selectedOrder.id)}
              >
                Imprimir Recibo
              </Button>
              <Button
                onClick={() => {
                  onOrderSelect?.(selectedOrder);
                  setShowOrderDetails(false);
                }}
              >
                Editar Pedido
              </Button>
            </div>
          </div>
        )}
      </Modal>

      {/* Bulk Action Modal */}
      <Modal
        isOpen={bulkActionModal}
        onClose={() => setBulkActionModal(false)}
        title="Acción masiva"
      >
        <div className="space-y-4">
          <p>
            Vas a realizar una acción sobre {selectedOrders.length} pedidos seleccionados.
          </p>

          {bulkAction === 'change_status' && (
            <Select
              label="Nuevo estado"
              value={newBulkStatus || ''}
              onChange={(value) => setNewBulkStatus(value as OrderStatus)}
              options={Object.values(OrderStatus).map(status => ({
                value: status,
                label: StatusLabels[status]
              }))}
              required
            />
          )}

          <div className="flex justify-end space-x-3">
            <Button variant="outline" onClick={() => setBulkActionModal(false)}>
              Cancelar
            </Button>
            <Button 
              onClick={handleBulkAction}
              disabled={bulkAction === 'change_status' && !newBulkStatus}
            >
              Confirmar
            </Button>
          </div>
        </div>
      </Modal>

      {/* Error Display */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <div className="flex">
            <svg className="w-5 h-5 text-red-400 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
            <div>
              <h3 className="text-sm font-medium text-[var(--color-error)]">Error</h3>
              <p className="text-sm text-[var(--color-error)] mt-1">{error}</p>
              <Button 
                size="sm" 
                variant="outline" 
                onClick={() => setError(null)} 
                className="mt-2"
              >
                Cerrar
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default OrdersTable;