"use client";

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

import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import { getDocumentUrl } from "@/lib/document-file";
import { CalendarIcon, HyperlinkIcon } from "@/components/ui/icon";

import { IssueViewDetailContentSection } from "./issue-view-detail-content-section";
import {
  ISSUE_VIEW_DETAIL_REPORT_LABELS,
  type IssueViewDetailReport,
} from "./issue-view-detail-report-data";
import type { IssueViewDetailReportTab } from "./issue-view-detail-types";

function ReportMetaLabel({
  isDark,
  label,
}: {
  isDark: boolean;
  label: string;
}) {
  return (
    <Typography
      sx={{
        color: isDark ? alpha("#ffffff", 0.62) : "#717680",
        fontSize: 13,
        fontWeight: 500,
        lineHeight: 1.35,
      }}
    >
      {label}
    </Typography>
  );
}

type IssueViewDetailReportPanelProps = {
  isDark: boolean;
  report: IssueViewDetailReport;
};

export function IssueViewDetailReportPanel({
  isDark,
  report,
}: IssueViewDetailReportPanelProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: "22px",
      }}
    >
      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
        <CalendarIcon
          sx={{
            fontSize: 20,
            mt: "1px",
            color: isDark ? alpha("#ffffff", 0.62) : "#717680",
          }}
        />
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: 1.5,
            minWidth: 0,
          }}
        >
          <ReportMetaLabel
            isDark={isDark}
            label={ISSUE_VIEW_DETAIL_REPORT_LABELS.implementationDate}
          />
          <Typography
            sx={{
              color: isDark ? alpha("#ffffff", 0.88) : "#252b37",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1.35,
            }}
          >
            {report.implementationDate}
          </Typography>
        </Box>
      </Box>

      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: 1.5,
        }}
      >
        <ReportMetaLabel
          isDark={isDark}
          label={ISSUE_VIEW_DETAIL_REPORT_LABELS.referenceName}
        />
        <Box
          sx={{
            width: "100%",
            minHeight: 34,
            display: "flex",
            alignItems: "center",
            px: 1.5,
            py: 1,
            borderRadius: "6px",
            border: `1px solid ${isDark ? alpha("#ffffff", 0.08) : "#f5f5f5"}`,
          }}
        >
          <Typography
            sx={{
              color: isDark ? alpha("#ffffff", 0.82) : "#414651",
              fontSize: 12,
              fontWeight: 400,
              lineHeight: 1.24,
            }}
          >
            {report.referenceName}
          </Typography>
        </Box>
      </Box>

      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
        <HyperlinkIcon
          sx={{
            fontSize: 20,
            mt: "1px",
            color: isDark ? alpha("#ffffff", 0.62) : "#717680",
          }}
        />
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: 1.5,
            minWidth: 0,
          }}
        >
          <ReportMetaLabel
            isDark={isDark}
            label={ISSUE_VIEW_DETAIL_REPORT_LABELS.referenceLink}
          />
          <Box
            // The card opens the document when the ministry attached one, so
            // it behaves like every other attachment on this page.
            component={report.referenceFilePath ? Link : "div"}
            {...(report.referenceFilePath
              ? {
                  href: getDocumentUrl(report.referenceFilePath),
                  target: "_blank",
                  rel: "noopener",
                  underline: "none",
                }
              : {})}
            sx={{
              display: "inline-flex",
              alignItems: "center",
              minHeight: 62,
              px: 2,
              py: 1,
              borderRadius: "12px",
              border: `1px solid ${isDark ? alpha("#ffffff", 0.08) : "#f5f5f5"}`,
              ...(report.referenceFilePath
                ? {
                    cursor: "pointer",
                    "&:hover": {
                      bgcolor: isDark
                        ? alpha("#ffffff", 0.04)
                        : alpha("#000000", 0.02),
                    },
                  }
                : {}),
            }}
          >
            <DocumentFileAttachment
              value={report.referenceFileName}
              fileSize={report.referenceFileSize}
              iconSize={40}
              emptyLabel={report.referenceFileName}
            />
          </Box>
        </Box>
      </Box>

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={0}
        title={ISSUE_VIEW_DETAIL_REPORT_LABELS.progressSolution}
      >
        {report.progressSolution}
      </IssueViewDetailContentSection>

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={0}
        title={ISSUE_VIEW_DETAIL_REPORT_LABELS.solutionIndicators}
      >
        {report.solutionIndicators}
      </IssueViewDetailContentSection>

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={0}
        title={ISSUE_VIEW_DETAIL_REPORT_LABELS.challenges}
      >
        {report.challenges}
      </IssueViewDetailContentSection>

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={0}
        title={ISSUE_VIEW_DETAIL_REPORT_LABELS.requests}
      >
        {report.requests}
      </IssueViewDetailContentSection>

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={0}
        title={ISSUE_VIEW_DETAIL_REPORT_LABELS.rgcDecision}
      >
        {report.rgcDecision}
      </IssueViewDetailContentSection>
    </Box>
  );
}

// One tab per progress report, in the order the API returned them (oldest
// first). An issue nobody has reported on gets no tabs at all.
export function getIssueViewDetailReportTabs(
  isDark: boolean,
  reports: IssueViewDetailReport[],
): IssueViewDetailReportTab[] {
  return reports.map((report) => ({
    id: report.id,
    label: report.label,
    content: <IssueViewDetailReportPanel isDark={isDark} report={report} />,
  }));
}