"use client";

import { useRouter } from "next/navigation";

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

import { StatusBadge } from "@/features/pswg/working-group-issues/components/table/wg-issues-table-cells";
import { IssueDetailHeader } from "@/features/pswg/working-group-issues/components/view-detail/_components/issue-detail-header";
import {
  IssueDetailError,
  IssueDetailLoading,
} from "@/features/pswg/working-group-issues/components/view-detail/_components/issue-detail-state";
import { useWorkingGroupIssueDetail } from "@/features/pswg/working-group-issues/hook/use-working-group-issues";
import {
  tWgIssues,
  translateWgIssuesText,
  useWgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";
import {
  getIssueViewDetailLabels,
  IssueViewDetailBody,
  IssueViewDetailTitle,
  toIssueViewDetailDataFromWgIssue,
  type IssueViewDetailReportTab,
} from "@/features/pswg/shared/issue-view-detail";

const ISSUE_LIST_PATH = "/pswg/wg-issues";
const REPORT_TABS: IssueViewDetailReportTab[] = [
  { id: "s1", label: "Report S1" },
  { id: "s2", label: "Report S2" },
];

type IssueDetailScreenProps = {
  issueId: number;
};

export function IssueDetailScreen({ issueId }: IssueDetailScreenProps) {
  const router = useRouter();
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const language = useWgIssuesLanguage();
  const { detail, error, isLoading } = useWorkingGroupIssueDetail(
    issueId,
    tWgIssues(language, "notAvailable"),
  );

  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 },
        }}
      >
        <IssueDetailHeader
          isDark={isDark}
          language={language}
          onBack={() => router.push(ISSUE_LIST_PATH)}
          status={detail?.status ?? "In Progress"}
        />

        {isLoading ? <IssueDetailLoading /> : null}
        {!isLoading && error ? <IssueDetailError message={error} /> : null}

        {!isLoading && !error && detail ? (
          <>
            <IssueViewDetailTitle isDark={isDark} title={detail.title} />
            <IssueViewDetailBody
              data={toIssueViewDetailDataFromWgIssue(detail)}
              isDark={isDark}
              labels={getIssueViewDetailLabels(language)}
              reportTabs={REPORT_TABS}
              status={
                <StatusBadge status={detail.status} language={language} />
              }
              translateText={(value) => translateWgIssuesText(language, value)}
            />
          </>
        ) : null}
      </Box>
    </Box>
  );
}