"use client";

import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { StatusBadge } from "@/features/pswg/working-group-issues/components/table/wg-issues-table-cells";
import {
  translateWgIssuesText,
  useWgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";
import { useIssueMatrixDetail } from "@/features/pswg/issue-matrix/hook/use-issue-matrix";
import {
  getIssueViewDetailLabels,
  IssueViewDetailBody,
  IssueViewDetailTitle,
  toIssueViewDetailDataFromIssueMatrix,
} from "@/features/pswg/shared/issue-view-detail";

import { IssueMatrixDetailHeader } from "./components/issue-matrix-detail-header";

type IssueMatrixViewDetailScreenProps = {
  issueId: number;
  // Where the back button returns to. CDC-GPSF passes its own list page path.
  backPath?: string;
};

export function IssueMatrixViewDetailScreen({
  issueId,
  backPath = "/pswg/issue-matrix",
}: IssueMatrixViewDetailScreenProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const language = useWgIssuesLanguage();
  const { issue, isLoading, error } = useIssueMatrixDetail(issueId);

  return (
    <Box
      sx={{
        minHeight: "calc(100vh - 64px)",
        bgcolor: isDark ? theme.palette.background.default : "#ffffff",
      }}
    >
      <Box
        sx={{
          maxWidth: 1224,
          mx: "auto",
          px: { xs: 2, sm: 3, lg: 2.5 },
          py: { xs: 2, lg: 3 },
        }}
      >
        {isLoading ? (
          <Box
            sx={{
              minHeight: 260,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <CircularProgress size={28} />
          </Box>
        ) : null}

        {!isLoading && error ? (
          <Typography sx={{ color: "#f04438", fontSize: 13, fontWeight: 500 }}>
            {error}
          </Typography>
        ) : null}

        {!isLoading && !error && issue ? (
          <>
            <IssueMatrixDetailHeader issue={issue} backPath={backPath} />

            <IssueViewDetailTitle isDark={isDark} title={issue.issue} />
            <IssueViewDetailBody
              data={toIssueViewDetailDataFromIssueMatrix(issue)}
              isDark={isDark}
              labels={getIssueViewDetailLabels(language)}
              status={<StatusBadge status={issue.status} language={language} />}
              translateText={(value) => translateWgIssuesText(language, value)}
            />
          </>
        ) : null}
      </Box>
    </Box>
  );
}

export default IssueMatrixViewDetailScreen;