"use client";

import { QcItemInfo } from "@/app/api/settings/qcCategory";
import {
  Box,
  Card,
  CircularProgress,
  Divider,
  List,
  ListItem,
  Stack,
  Typography,
} from "@mui/material";
import { CheckCircleOutline, FormatListNumbered } from "@mui/icons-material";
import { useTranslation } from "react-i18next";

type Props = {
  qcItems: QcItemInfo[];
  loading?: boolean;
  categorySelected?: boolean;
};

const QcItemsList: React.FC<Props> = ({
  qcItems,
  loading = false,
  categorySelected = false,
}) => {
  const { t } = useTranslation("items");

  // Sort items by order
  const sortedItems = [...qcItems].sort((a, b) => a.order - b.order);

  if (loading) {
    return (
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        py={4}
        sx={{
          backgroundColor: "grey.50",
          borderRadius: 2,
          border: "1px dashed",
          borderColor: "grey.300",
        }}
      >
        <CircularProgress size={24} sx={{ mr: 1.5 }} />
        <Typography variant="body2" color="text.secondary">
          {t("Loading QC items...")}
        </Typography>
      </Box>
    );
  }

  if (!categorySelected) {
    return (
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        py={4}
        sx={{
          backgroundColor: "grey.50",
          borderRadius: 2,
          border: "1px dashed",
          borderColor: "grey.300",
        }}
      >
        <FormatListNumbered
          sx={{ fontSize: 40, color: "grey.400", mb: 1 }}
        />
        <Typography variant="body2" color="text.secondary">
          {t("Select a QC template to view items")}
        </Typography>
      </Box>
    );
  }

  if (sortedItems.length === 0) {
    return (
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        py={4}
        sx={{
          backgroundColor: "grey.50",
          borderRadius: 2,
          border: "1px dashed",
          borderColor: "grey.300",
        }}
      >
        <CheckCircleOutline
          sx={{ fontSize: 40, color: "grey.400", mb: 1 }}
        />
        <Typography variant="body2" color="text.secondary">
          {t("No QC items in this template")}
        </Typography>
      </Box>
    );
  }

  return (
    <Card
      variant="outlined"
      sx={{
        borderRadius: 2,
        backgroundColor: "background.paper",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          px: 2,
          py: 1.5,
          backgroundColor: "primary.main",
          color: "primary.contrastText",
        }}
      >
        <Stack direction="row" alignItems="center" spacing={1}>
          <FormatListNumbered fontSize="small" />
          <Typography variant="subtitle2" fontWeight={600}>
            {t("QC Checklist")} ({sortedItems.length})
          </Typography>
        </Stack>
      </Box>
      <List disablePadding>
        {sortedItems.map((item, index) => (
          <Box key={item.id}>
            {index > 0 && <Divider />}
            <ListItem
              sx={{
                py: 1.5,
                px: 2,
                "&:hover": {
                  backgroundColor: "action.hover",
                },
              }}
            >
              <Stack
                direction="row"
                spacing={2}
                alignItems="flex-start"
                width="100%"
              >
                {/* Order Number */}
                <Typography
                  variant="body1"
                  fontWeight={600}
                  color="text.secondary"
                  sx={{ minWidth: 24 }}
                >
                  {item.order}.
                </Typography>
                
                {/* Content */}
                <Stack
                  direction="row"
                  alignItems="center"
                  spacing={2}
                  flex={1}
                  minWidth={0}
                >
                  <Typography
                    variant="body1"
                    fontWeight={500}
                    sx={{
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      flexShrink: 0,
                    }}
                  >
                    {item.name || item.code}
                  </Typography>
                  {item.description && (
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      sx={{
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {item.description}
                    </Typography>
                  )}
                </Stack>
              </Stack>
            </ListItem>
          </Box>
        ))}
      </List>
    </Card>
  );
};

export default QcItemsList;