"use client";

import PoWorkbenchDetailsGridExpectedQtyCell from "@/components/PoWorkbench/detailsGrid/PoWorkbenchDetailsGridExpectedQtyCell";
import PoWorkbenchDetailsGridReceivedQtyCell from "@/components/PoWorkbench/detailsGrid/PoWorkbenchDetailsGridReceivedQtyCell";
import PoWorkbenchDetailsGridItemCell from "@/components/PoWorkbench/detailsGrid/PoWorkbenchDetailsGridItemCell";
import { PO_WORKBENCH_DETAILS_GRID_MOCK_ROWS } from "@/components/PoWorkbench/detailsGrid/poWorkbenchDetailsGridMock";
import {
  DETAILS_GRID_ROOT_SX,
  DETAILS_GRID_ROW_SX,
  DETAILS_GRID_SCROLL_HOST_SX,
  detailsGridBodyCellSx,
  detailsGridHeaderCellSx,
} from "@/components/PoWorkbench/detailsGrid/poWorkbenchDetailsGridLayout";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import LocalShippingIcon from "@mui/icons-material/LocalShipping";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import dayjs, { Dayjs } from "dayjs";
import { useState } from "react";
import { useTranslation } from "react-i18next";

/** Matches other PoWorkbench inputs: secondary gray hint text. */
const FORM_TEXT_FIELD_PLACEHOLDER_SX = {
  "& .MuiInputBase-input::placeholder": {
    color: "text.secondary",
    opacity: 1,
  },
} as const;

export default function PoWorkbenchDetailsGrid() {
  const { t } = useTranslation("poWorkbench");
  const [receiptDate, setReceiptDate] = useState<Dayjs | null>(dayjs());

  const pendingCell = t("detailsGrid.columnPending");
  const lastRowIndex = PO_WORKBENCH_DETAILS_GRID_MOCK_ROWS.length - 1;

  return (
    <Box
      sx={{
        height: "100%",
        minHeight: 0,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{
          px: 1.5,
          py: 1,
          borderBottom: 1,
          borderColor: "divider",
          bgcolor: "background.paper",
        }}
      >
        <Stack
          direction={{ xs: "column", sm: "row" }}
          spacing={1}
          sx={{ width: { xs: "100%", sm: "50%" }, maxWidth: "50%" }}
        >
          <Stack spacing={0.5} sx={{ flex: 1, minWidth: 0 }}>
            <Stack direction="row" spacing={0.75} alignItems="center">
              <LocalShippingIcon fontSize="small" />
              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                {t("detailsGrid.form.deliveryNoteNo")}
              </Typography>
            </Stack>
            <TextField
              size="small"
              fullWidth
              variant="outlined"
              placeholder={t("detailsGrid.form.deliveryNoteNoPlaceholder")}
              sx={FORM_TEXT_FIELD_PLACEHOLDER_SX}
            />
          </Stack>
          <Stack spacing={0.5} sx={{ flex: 1, minWidth: 0 }}>
            <Stack direction="row" spacing={0.75} alignItems="center">
              <CalendarTodayIcon fontSize="small" />
              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                {t("detailsGrid.form.receiptDate")}
              </Typography>
            </Stack>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DatePicker
                format="YYYY-MM-DD"
                value={receiptDate}
                onChange={(next) => setReceiptDate(next)}
                slotProps={{
                  textField: {
                    size: "small",
                    fullWidth: true,
                    variant: "outlined",
                  },
                }}
              />
            </LocalizationProvider>
          </Stack>
        </Stack>
      </Box>
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          display: "flex",
          flexDirection: "column",
          px: 1.5,
          py: 1,
        }}
      >
        <Box sx={DETAILS_GRID_SCROLL_HOST_SX}>
          <Box
            role="table"
            aria-label={t("detailsGrid.ariaLabel")}
            sx={DETAILS_GRID_ROOT_SX}
          >
            <Box role="row" sx={DETAILS_GRID_ROW_SX}>
              <Box
                role="columnheader"
                sx={detailsGridHeaderCellSx("first")}
              >
                {t("detailsGrid.columns.itemInfo")}
              </Box>
              <Box role="columnheader" sx={detailsGridHeaderCellSx("middle", { alignCenter: true })}>
                {t("detailsGrid.columns.expectedQty")}
              </Box>
              <Box role="columnheader" sx={detailsGridHeaderCellSx("middle", { alignCenter: true })}>
                {t("detailsGrid.columns.receivedQty")}
              </Box>
              <Box role="columnheader" sx={detailsGridHeaderCellSx("last")}>
                {t("detailsGrid.columns.inputArea")}
              </Box>
            </Box>

            {PO_WORKBENCH_DETAILS_GRID_MOCK_ROWS.map((row, index) => {
              const isLastRow = index === lastRowIndex;

              return (
                <Box key={row.id} role="row" sx={DETAILS_GRID_ROW_SX}>
                  <Box
                    role="cell"
                    sx={detailsGridBodyCellSx({
                      position: "first",
                      isLastRow,
                      primaryText: true,
                    })}
                  >
                    <PoWorkbenchDetailsGridItemCell row={row} />
                  </Box>
                  <Box
                    role="cell"
                    sx={detailsGridBodyCellSx({
                      position: "middle",
                      isLastRow,
                      alignCenter: true,
                      dense: true,
                    })}
                  >
                    <PoWorkbenchDetailsGridExpectedQtyCell row={row} />
                  </Box>
                  <Box
                    role="cell"
                    sx={detailsGridBodyCellSx({
                      position: "middle",
                      isLastRow,
                      alignCenter: true,
                      dense: true,
                    })}
                  >
                    <PoWorkbenchDetailsGridReceivedQtyCell row={row} />
                  </Box>
                  <Box
                    role="cell"
                    sx={detailsGridBodyCellSx({
                      position: "last",
                      isLastRow,
                    })}
                  >
                    {pendingCell}
                  </Box>
                </Box>
              );
            })}
          </Box>
        </Box>
      </Box>
    </Box>
  );
}
