"use client";

import { Box, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import type { StockTakeLifecycleStage } from "./traceStockTakeUtils";
import { formatQty } from "./traceQtyUtils";

type Props = {
  stages: StockTakeLifecycleStage[];
  uom?: string;
};

/** Vertical timeline of stock-take progression (first count → approve). */
const ItemTracingStockTakeLifecycle: React.FC<Props> = ({ stages, uom = "" }) => {
  const { t } = useTranslation("itemTracing");

  if (!stages.length) return null;

  return (
    <Box sx={{ display: "flex", flexDirection: "column" }}>
      {stages.map((stage, idx) => {
        const isLast = idx === stages.length - 1;
        return (
          <Box key={stage.key} sx={{ display: "flex", gap: 1 }}>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                width: 12,
                flexShrink: 0,
              }}
            >
              <Box
                sx={{
                  width: 10,
                  height: 10,
                  borderRadius: "50%",
                  bgcolor: stage.isActive ? "success.main" : "grey.400",
                  flexShrink: 0,
                  mt: 0.35,
                  zIndex: 1,
                }}
              />
              {!isLast && (
                <Box
                  sx={{
                    width: 2,
                    flex: 1,
                    minHeight: 22,
                    bgcolor:
                      stage.isActive && stages[idx + 1]?.isActive ? "success.main" : "grey.300",
                    my: -0.5,
                  }}
                />
              )}
            </Box>
            <Box sx={{ minWidth: 0, flex: 1, pb: isLast ? 0 : 1 }}>
              <Typography
                variant="caption"
                fontWeight={600}
                display="block"
                noWrap
                color={stage.isActive ? "text.primary" : "text.disabled"}
              >
                {t(stage.label)}
              </Typography>
              {stage.isActive ? (
                <Typography variant="caption" color="text.secondary" display="block">
                  {[
                    stage.qty != null
                      ? stage.key === "round-created"
                        ? `${t("stockTakeStageBookQty")}: ${formatQty(stage.qty, uom)}`
                        : formatQty(stage.qty, uom)
                      : null,
                    stage.key === "accepted" && stage.badQty != null
                      ? `${t("variance")}: ${formatQty(stage.badQty, uom)}`
                      : stage.badQty != null && stage.badQty > 0
                        ? `${t("unqualifiedQty")}: ${formatQty(stage.badQty, uom)}`
                        : null,
                    stage.handler ?? null,
                    stage.timestamp ?? null,
                  ]
                    .filter(Boolean)
                    .join(" · ") || "—"}
                </Typography>
              ) : (
                <Typography variant="caption" color="text.disabled" display="block">
                  —
                </Typography>
              )}
            </Box>
          </Box>
        );
      })}
    </Box>
  );
};

export default ItemTracingStockTakeLifecycle;
