'use client';

import { useMemo } from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useOrderDetails } from '../../hooks/useOrderDetails';
import { createInformationPanelColumns } from './InformationPanelColumns';
import { dataGridStylesSimple } from '../../utils/dataGridStyles';

interface InformationPanelProps {
  orderId: number;
}

export const InformationPanel = ({ orderId }: InformationPanelProps) => {
  const { data: order, isLoading, error } = useOrderDetails(orderId);

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

  const rows = useMemo(() => {
    if (!order) return [];
    return [
      {
        id: order.orderId || orderId,
        ...order,
      },
    ];
  }, [order, orderId]);

  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
        <CircularProgress size={30} />
      </Box>
    );
  }

  if (error) {
    return (
      <Box sx={{ p: 2 }}>
        <Alert severity="error">Erro ao carregar detalhes do pedido.</Alert>
      </Box>
    );
  }

  if (!order) {
    return (
      <Box sx={{ p: 2 }}>
        <Alert severity="info">Informações do pedido não encontradas.</Alert>
      </Box>
    );
  }

  return (
    <DataGridPremium
      rows={rows}
      columns={columns}
      density="compact"
      autoHeight
      hideFooter
      sx={dataGridStylesSimple}
    />
  );
};
