"use client";

import Link from "next/link";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";

import type { IssueMatrixRow } from "../../components/issue-matrix-data";

const statusMap = {
  Draft: "#6b7280",
  "New Submission": "#3b82f6",
  "In Progress": "#f59e0b",
  "Not Addressed": "#ef4444",
  Solved: "#16a34a",
};

type IssueMatrixDetailHeaderProps = {
  issue: IssueMatrixRow;
  // Where the back button returns to (the section's issue matrix list page).
  backPath?: string;
};

export function IssueMatrixDetailHeader({
  issue,
  backPath = "/pswg/issue-matrix",
}: IssueMatrixDetailHeaderProps) {
  const theme = useTheme();

  const color = statusMap[issue.status];

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: 2,
        mb: 2,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 2 }}>
        <Button
          component={Link}
          href={backPath}
          startIcon={<ArrowBackIosNewIcon sx={{ fontSize: 14 }} />}
          sx={{
            minWidth: 0,
            px: 0,
            color: theme.palette.text.secondary,
            textTransform: "none",
            fontSize: 12,
            "&:hover": {
              bgcolor: "transparent",
              color: theme.palette.primary.main,
            },
          }}
        >
          Back
        </Button>

        <Box>
          <Typography
            sx={{
              fontSize: { xs: 24, md: 30 },
              fontWeight: 800,
              lineHeight: 1.15,
              color: theme.palette.text.primary,
            }}
          >
            Issue Detail
          </Typography>

          <Typography
            sx={{
              mt: 0.5,
              color: theme.palette.text.secondary,
              fontSize: 12,
            }}
          >
            Issue Matrix / Issue Detail
          </Typography>
        </Box>
      </Box>

      <Chip
        label={issue.status}
        size="small"
        sx={{
          height: 28,
          borderRadius: "999px",
          bgcolor: alpha(color, theme.palette.mode === "dark" ? 0.2 : 0.14),
          color,
          border: `1px solid ${alpha(color, 0.25)}`,
          fontSize: 12,
          fontWeight: 600,
        }}
      />
    </Box>
  );
}