import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Divider from "@mui/material/Divider";
import Typography from "@mui/material/Typography";
import { alpha } from "@mui/material/styles";

import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import UploadFileOutlinedIcon from "@mui/icons-material/UploadFileOutlined";

import {
  wgIssuseInprogessIcon as WgIssueInProgressIcon,
  wgIssuseSolvedIcon as WgIssueSolvedIcon,
} from "@/components/ui/icon";
import { BackIcon } from "@/features/pswg/working-group-issues/components/view-detail/_components/issue-detail-icons";
import type { IssueStatus } from "@/features/pswg/working-group-issues/wg-issues-data";
import {
  tWgIssues,
  translateWgIssuesText,
  type WgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

const HEADER_STATUS_STYLES: Record<
  IssueStatus,
  { backgroundColor: string; color: string }
> = {
  Solved: {
    backgroundColor: "#39b54a",
    color: "#39b54a",
  },
  "In Progress": {
    backgroundColor: "#f79009",
    color: "#f79009",
  },
  "Not Addressed": {
    backgroundColor: "#f04438",
    color: "#f04438",
  },
  Draft: {
    backgroundColor: "#717680",
    color: "#717680",
  },
  Saved: {
    backgroundColor: "#7f56d9",
    color: "#7f56d9",
  },
  "New Submission": {
    backgroundColor: "#2584ce",
    color: "#2584ce",
  },
};

function getStatusIcon(status: IssueStatus) {
  const iconSx = {
    color: "#ffffff",
    fontSize: { xs: 24, sm: 28 },
  };

  switch (status) {
    case "Solved":
      return <WgIssueSolvedIcon sx={iconSx} />;
    case "In Progress":
      return <WgIssueInProgressIcon sx={iconSx} />;
    case "Not Addressed":
      return <CancelOutlinedIcon sx={iconSx} />;
    case "Draft":
    case "Saved":
      return <DescriptionOutlinedIcon sx={iconSx} />;
    case "New Submission":
      return <UploadFileOutlinedIcon sx={iconSx} />;
  }
}

function HeaderStatus({
  isDark,
  status,
  language,
}: {
  isDark: boolean;
  status: IssueStatus;
  language: WgIssuesLanguage;
}) {
  const style = HEADER_STATUS_STYLES[status];

  return (
    <Box
      sx={{
        minWidth: { xs: 62, sm: 72 },
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 0.75,
      }}
    >
      <Box
        sx={{
          width: { xs: 42, sm: 50 },
          height: { xs: 42, sm: 50 },
          borderRadius: "8px",
          bgcolor: isDark
            ? alpha(style.backgroundColor, 0.88)
            : style.backgroundColor,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {getStatusIcon(status)}
      </Box>

      <Typography
        sx={{
          color: isDark ? alpha(style.color, 0.9) : style.color,
          fontSize: { xs: 12, sm: 13 },
          fontWeight: 500,
          lineHeight: 1.3,
          textAlign: "center",
          whiteSpace: "nowrap",
        }}
      >
        {translateWgIssuesText(language, status)}
      </Typography>
    </Box>
  );
}

type IssueDetailHeaderProps = {
  isDark: boolean;
  language: WgIssuesLanguage;
  onBack: () => void;
  status: IssueStatus;
  title?: string;
  breadcrumbParent?: string;
  breadcrumbCurrent?: string;
  backLabel?: string;
};

export function IssueDetailHeader({
  isDark,
  language,
  onBack,
  status,
  title,
  breadcrumbParent,
  breadcrumbCurrent,
  backLabel,
}: IssueDetailHeaderProps) {
  const pageTitle = title ?? tWgIssues(language, "issueDetail");
  const parentLabel = breadcrumbParent ?? tWgIssues(language, "pageTitle");
  const currentLabel = breadcrumbCurrent ?? tWgIssues(language, "issueDetail");
  const backText = backLabel ?? tWgIssues(language, "back");

  return (
    <>
      <Box
        sx={{
          minHeight: { sm: 88 },
          display: "grid",
          gridTemplateColumns: {
            xs: "minmax(0, 1fr) auto",
            sm: "auto minmax(0, 1fr) auto",
          },
          alignItems: "center",
          columnGap: { xs: 1.5, sm: 2.5, md: 3.5 },
          rowGap: 1.5,
        }}
      >
        <ButtonBase
          onClick={onBack}
          aria-label={backText}
          sx={{
            gridColumn: { xs: "1 / -1", sm: "auto" },
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            gap: 1,
            color: isDark ? alpha("#ffffff", 0.66) : "#717680",
            borderRadius: "6px",
            py: 0.5,
            pr: 0.75,
            pl: 0.25,
            "&:hover": {
              color: isDark ? "#ffffff" : "#2584ce",
              bgcolor: "transparent",
            },
          }}
        >
          <BackIcon />
          <Typography
            sx={{
              color: "inherit",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1.4,
            }}
          >
            {backText}
          </Typography>
        </ButtonBase>

        <Box sx={{ minWidth: 0 }}>
          <Typography
            component="h1"
            sx={{
              color: isDark ? "#ffffff" : "#181d27",
              fontSize: { xs: 24, md: 28 },
              fontWeight: 700,
              lineHeight: 1.15,
            }}
          >
            {pageTitle}
          </Typography>
          <Typography
            sx={{
              mt: 0.5,
              color: isDark ? alpha("#ffffff", 0.58) : "#717680",
              fontSize: 12,
              fontWeight: 500,
            }}
          >
            {parentLabel} /{" "}
            <Box
              component="span"
              sx={{ color: isDark ? alpha("#ffffff", 0.82) : "#414651" }}
            >
              {currentLabel}
            </Box>
          </Typography>
        </Box>

        <HeaderStatus isDark={isDark} status={status} language={language} />
      </Box>

      <Divider
        sx={{
          mt: 1.5,
          mb: 2.5,
          borderColor: isDark ? alpha("#ffffff", 0.12) : "#d5d9e2",
        }}
      />
    </>
  );
}