'use client';

import { fetchItemUomConversions, ItemUomConversionRow } from '@/app/api/inventory/actions';
import { InventoryResult } from '@/app/api/inventory';
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Box,
  Checkbox,
  CircularProgress,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material';

interface Props {
  inventory: InventoryResult | null;
}

const formatRatio = (value: number) => {
  if (!Number.isFinite(value)) return '';
  return String(value);
};

const cellSx = {
  px: 1.25,
  py: 0.75,
  fontSize: 13,
  lineHeight: 1.4,
} as const;

const numSx = {
  ...cellSx,
  width: '9%',
  whiteSpace: 'nowrap',
  fontVariantNumeric: 'tabular-nums',
} as const;

const flagSx = {
  ...cellSx,
  width: '8%',
  textAlign: 'center',
} as const;

const FlagCell = ({ checked }: { checked: boolean }) => (
  <TableCell align="center" padding="checkbox" sx={flagSx}>
    <Checkbox size="small" checked={checked} disabled sx={{ p: 0 }} />
  </TableCell>
);

const InventoryItemUom: React.FC<Props> = ({ inventory }) => {
  const { t } = useTranslation('inventory');
  const [rows, setRows] = useState<ItemUomConversionRow[]>([]);
  const [loading, setLoading] = useState(false);
  const requestRef = useRef(0);
  const itemId = inventory?.itemId;

  useEffect(() => {
    if (itemId == null) {
      setRows([]);
      setLoading(false);
      return;
    }
    const requestId = ++requestRef.current;
    setLoading(true);
    fetchItemUomConversions(itemId)
      .then((res) => {
        if (requestId !== requestRef.current) return;
        setRows(res ?? []);
      })
      .catch((error) => {
        if (requestId !== requestRef.current) return;
        console.error('Failed to load item unit conversions:', error);
        setRows([]);
      })
      .finally(() => {
        if (requestId === requestRef.current) setLoading(false);
      });
  }, [itemId]);

  if (!inventory || itemId == null) {
    return <Typography sx={{ mt: 2 }}>{t('No items are selected yet.')}</Typography>;
  }

  const flags = [
    t('Base Unit'),
    t('Stock Unit'),
    t('Picking Unit'),
    t('Sales Unit'),
    t('Purchase Unit'),
    t('Inactive'),
  ];

  return (
    <Box sx={{ mt: 1 }}>
      <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 600 }}>
        {`${t('Item selected')}: ${inventory.itemCode} | ${inventory.itemName} (${t(inventory.itemType)})`}
      </Typography>
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
          <CircularProgress size={28} />
        </Box>
      ) : (
        <TableContainer component={Paper} variant="outlined" sx={{ maxHeight: 440, width: '100%' }}>
          <Table size="small" stickyHeader sx={{ width: '100%', tableLayout: 'fixed' }}>
            <colgroup>
              <col style={{ width: '14%' }} />
              <col style={{ width: '22%' }} />
              <col style={{ width: '9%' }} />
              <col style={{ width: '9%' }} />
              <col style={{ width: '8%' }} />
              <col style={{ width: '8%' }} />
              <col style={{ width: '8%' }} />
              <col style={{ width: '8%' }} />
              <col style={{ width: '8%' }} />
              <col style={{ width: '6%' }} />
            </colgroup>
            <TableHead>
              <TableRow>
                <TableCell sx={cellSx}>{t('Unit')}</TableCell>
                <TableCell sx={cellSx}>{t('Unit Description')}</TableCell>
                <TableCell align="right" sx={numSx}>{t('Ratio Numerator')}</TableCell>
                <TableCell align="right" sx={numSx}>{t('Ratio Denominator')}</TableCell>
                {flags.map((label) => (
                  <TableCell key={label} align="center" sx={flagSx}>
                    {label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={10} align="center">
                    {t('No data')}
                  </TableCell>
                </TableRow>
              ) : (
                rows.map((row) => (
                  <TableRow key={row.id} hover>
                    <TableCell sx={cellSx}>{row.unitCode}</TableCell>
                    <TableCell sx={cellSx}>{row.unitDesc}</TableCell>
                    <TableCell align="right" sx={numSx}>{formatRatio(row.ratioN)}</TableCell>
                    <TableCell align="right" sx={numSx}>{formatRatio(row.ratioD)}</TableCell>
                    <FlagCell checked={row.baseUnit} />
                    <FlagCell checked={row.stockUnit} />
                    <FlagCell checked={row.pickingUnit} />
                    <FlagCell checked={row.salesUnit} />
                    <FlagCell checked={row.purchaseUnit} />
                    <FlagCell checked={row.inactive} />
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Box>
  );
};

export default InventoryItemUom;