import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { Box, Card, CardContent, Chip, List, ListItem, ListItemButton, ListItemText, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";

import { UpcomingDeadline } from "../types";
import { formatDeadlineDate } from "../utils/date";

interface Props {
  deadlines: UpcomingDeadline[];
}

export default function DeadlineList({ deadlines }: Props) {
  const navigate = useNavigate();
  const { t } = useTranslation();

  if (deadlines.length === 0) {
    return (
      <Card variant="outlined" sx={{ borderRadius: 3 }}>
        <CardContent>
          <Typography variant="subtitle1">{t("deadlineList.none")}</Typography>
          <Typography variant="body2" color="text.secondary">
            {t("deadlineList.info")}
          </Typography>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card variant="outlined" sx={{ borderRadius: 3 }}>
      <CardContent>
        <Typography variant="subtitle1" gutterBottom>
          {t("dashboard.upcomingList")}
        </Typography>
        <List>
          {deadlines.map((deadline) => (
                <ListItem
                  key={deadline.id}
                  disablePadding
                  secondaryAction={
                    deadline.daysUntilDeadline != null ? (
                      <Chip
                        label={t("deadlineList.daysLabel", { count: deadline.daysUntilDeadline })}
                        color={
                          deadline.daysUntilDeadline <= 7
                            ? "error"
                            : deadline.daysUntilDeadline <= 21
                              ? "warning"
                              : "default"
                        }
                        variant="outlined"
                      />
                    ) : undefined
                  }
                >
              <ListItemButton onClick={() => navigate(`/contracts/${deadline.id}`)}>
                <ListItemText
                  primary={
                    <Box display="flex" alignItems="center" gap={1}>
                      <Typography variant="body1" fontWeight={600}>
                        {deadline.title}
                      </Typography>
                      <ArrowForwardIcon fontSize="small" color="primary" />
                    </Box>
                  }
                  secondary={
                      <Typography variant="body2" color="text.secondary">
                        {t("deadlineList.terminateBy", { date: formatDeadlineDate(deadline.terminationDeadline) })}
                        {deadline.contractEndDate
                          ? ` • ${t("deadlineList.contractEnds", {
                              date: formatDeadlineDate(deadline.contractEndDate)
                            })}`
                          : ""}
                      </Typography>
                    }
                  />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </CardContent>
    </Card>
  );
}
