import { useNavigate } from 'react-router-dom';
import { Box, Button, Card, Stack, Typography } from '@mui/material';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
import { useInvoices } from '../../../hooks/useARInvoices';
import { useBranchStore } from '../../../store/branchStore';
import { useAuth } from '../../../hooks/useAuth';
import { StatusChip } from '../../../components/common/StatusChip';
import { MoneyCell } from '../../../components/common/MoneyCell';
import type { ARInvoice } from '../../../types/api';

export function InvoicesListPage() {
  const navigate = useNavigate();
  const selected = useBranchStore((state) => state.selected);
  const { data: invoices, isLoading } = useInvoices(selected);
  const { hasPermission } = useAuth();

  const columns: GridColDef<ARInvoice>[] = [
    { field: 'invoiceNumber', headerName: 'Invoice #', width: 180 },
    { field: 'customer', headerName: 'Customer', flex: 1, valueGetter: (_v, row) => row.customer?.name },
    { field: 'invoiceDate', headerName: 'Date', width: 120, valueFormatter: (value: string) => value?.slice(0, 10) },
    { field: 'dueDate', headerName: 'Due', width: 120, valueFormatter: (value: string) => value?.slice(0, 10) },
    {
      field: 'total',
      headerName: 'Total',
      width: 120,
      align: 'right',
      headerAlign: 'right',
      renderCell: (params) => <MoneyCell value={params.row.total} />,
    },
    {
      field: 'balance',
      headerName: 'Balance',
      width: 120,
      align: 'right',
      headerAlign: 'right',
      renderCell: (params) => <MoneyCell value={params.row.balance} />,
    },
    { field: 'status', headerName: 'Status', width: 120, renderCell: (params) => <StatusChip status={params.row.status} /> },
  ];

  return (
    <Box>
      <Stack direction="row" sx={{ mb: 2, justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography variant="h5">Invoices</Typography>
        {hasPermission('ar.invoice.manage') && (
          <Button variant="contained" onClick={() => navigate('/ar/invoices/new')}>
            New Invoice
          </Button>
        )}
      </Stack>
      <Card sx={{ height: 650 }}>
        <DataGrid
          rows={invoices ?? []}
          columns={columns}
          loading={isLoading}
          density="compact"
          disableRowSelectionOnClick
          onRowClick={(params) => navigate(`/ar/invoices/${params.row.id}`)}
          sx={{ border: 'none', '& .MuiDataGrid-row': { cursor: 'pointer' } }}
          initialState={{ sorting: { sortModel: [{ field: 'invoiceDate', sort: 'desc' }] } }}
        />
      </Card>
    </Box>
  );
}