"use client";

import { useRouter } from "next/navigation";

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

import { useAppLanguage } from "@/components/providers/app-language-provider";
import type { WgIssuesLanguage } from "@/features/pswg/working-group-issues/wg-issues-i18n";

import { getCdcIssueMatrixDetailMock } from "../cdc-issue-matrix-detail-mock";
import {
  cdcIssueMatrixText,
  normalizeCdcIssueMatrixLanguage,
  type CdcIssueMatrixLanguage,
} from "../cdc-issue-matrix-i18n";

import { CdcIssueMatrixDetailBody } from "./cdc-issue-matrix-detail-body";
import { CdcIssueMatrixDetailHeader } from "./cdc-issue-matrix-detail-header";

const CDC_ISSUE_MATRIX_LIST_PATH = "/cdc/cdc-issue-matrix";

function toWgIssuesLanguage(
  language: CdcIssueMatrixLanguage,
): WgIssuesLanguage {
  return language === "kh" ? "km" : "en";
}

type CdcIssueMatrixViewDetailScreenProps = {
  issueId: number;
};

export function CdcIssueMatrixViewDetailScreen({
  issueId,
}: CdcIssueMatrixViewDetailScreenProps) {
  const router = useRouter();
  const theme = useTheme();
  const { language: appLanguage } = useAppLanguage();
  const language = normalizeCdcIssueMatrixLanguage(appLanguage);
  const wgLanguage = toWgIssuesLanguage(language);
  const isDark = theme.palette.mode === "dark";
  const text = cdcIssueMatrixText[language] ?? cdcIssueMatrixText.en;
  const detail = getCdcIssueMatrixDetailMock(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: 3 },
          py: { xs: 2, lg: 3 },
        }}
      >
        <CdcIssueMatrixDetailHeader
          backLabel={text.detail.back}
          breadcrumbCurrent={text.detail.breadcrumb}
          breadcrumbParent={text.breadcrumb}
          isDark={isDark}
          onBack={() => router.push(CDC_ISSUE_MATRIX_LIST_PATH)}
          title={text.detail.pageTitle}
        />

        <Typography
          sx={{
            color: isDark ? "#ffffff" : "#181d27",
            fontSize: { xs: 22, md: 24 },
            fontWeight: 600,
            lineHeight: 1.3,
          }}
        >
          {detail.title}
        </Typography>

        <CdcIssueMatrixDetailBody
          data={detail}
          isDark={isDark}
          labels={text.detail}
          wgLanguage={wgLanguage}
        />
      </Box>
    </Box>
  );
}

export default CdcIssueMatrixViewDetailScreen;