'use client';

import { useMemo } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useOrderItems } from '../../hooks/useOrderItems';
import { createOrderItemsColumns } from '../OrderItemsTableColumns';
import { OrderItem } from '../../schemas/order.item.schema';
import { dataGridStyles } from '../../utils/dataGridStyles';

interface OrderItemsTableProps {
  orderId: number;
}

export const OrderItemsTable = ({ orderId }: OrderItemsTableProps) => {
  const { data: items, isLoading, error } = useOrderItems(orderId);

  const columns = useMemo(() => createOrderItemsColumns(), []);

  const rows = useMemo(() => {
    if (!Array.isArray(items) || items.length === 0) return [];
    return items.map((item: OrderItem, index: number) => ({
      id: `${orderId}-${item.productId}-${index}`,
      ...item,
    }));
  }, [items, orderId]);

  if (isLoading) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          py: 4,
        }}
      >
        <CircularProgress size={40} />
        <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
          Carregando itens do pedido...
        </Typography>
      </Box>
    );
  }

  if (error) {
    return (
      <Box sx={{ mt: 2 }}>
        <Alert severity="error">
          {error instanceof Error
            ? `Erro ao carregar itens: ${error.message}`
            : 'Erro ao carregar itens do pedido.'}
        </Alert>
      </Box>
    );
  }

  if (!items || items.length === 0) {
    return (
      <Box sx={{ mt: 2 }}>
        <Alert severity="info">Nenhum item encontrado para este pedido.</Alert>
      </Box>
    );
  }

  return (
    <DataGridPremium
      rows={rows}
      columns={columns}
      density="compact"
      autoHeight
      hideFooter={rows.length <= 10}
      initialState={{
        pagination: {
          paginationModel: {
            pageSize: 10,
            page: 0,
          },
        },
      }}
      pageSizeOptions={[10, 25, 50]}
      sx={dataGridStyles}
      localeText={{
        noRowsLabel: 'Nenhum item encontrado.',
        noResultsOverlayLabel: 'Nenhum resultado encontrado.',
        footerTotalRows: 'Total de itens:',
        footerTotalVisibleRows: (visibleCount, totalCount) =>
          `${visibleCount.toLocaleString()} de ${totalCount.toLocaleString()}`,
      }}
      slotProps={{
        pagination: {
          labelRowsPerPage: 'Itens por página:',
          labelDisplayedRows: ({
            from,
            to,
            count,
          }: {
            from: number;
            to: number;
            count: number;
          }) => {
            const pageSize = to >= from ? to - from + 1 : 10;
            const currentPage = Math.floor((from - 1) / pageSize) + 1;
            const totalPages = Math.ceil(count / pageSize);
            return `${from}–${to} de ${count} | Página ${currentPage} de ${totalPages}`;
          },
        },
      }}
    />
  );
};
