"use client";

import type { ReactNode } from "react";

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

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { DocumentLink } from "@/components/ui/document-link";
import { HyperlinkIcon, PdfIcon, SubmitDateIcon } from "@/components/ui/icon";
import { formatDate } from "@/lib/date-utils";
import {
  formatFileSize,
  truncateFileName,
  type UploadedFileMetadata,
} from "@/lib/document-file";
import { formatNumber } from "@/lib/number-utils";

import type { ProgressReportDetail } from "../../progress-report-detail-data";
import type { ProgressReportDetailLabels } from "../../progress-report-i18n";

type InformationItemProps = {
  icon: ReactNode;
  label: string;
  children: ReactNode;
};

function InformationItem({ icon, label, children }: InformationItemProps) {
  return (
    <Box
      sx={{
        minHeight: 22,
        display: "grid",
        gridTemplateColumns: {
          xs: "20px minmax(100px, 140px) minmax(0, 1fr)",
          sm: "20px 150px minmax(0, 1fr)",
        },
        alignItems: "center",
        columnGap: "8px",
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          width: 20,
          height: 20,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "text.secondary",
          "& svg": { fontSize: 20 },
        }}
      >
        {icon}
      </Box>

      <Typography
        noWrap
        sx={{ fontSize: 13, lineHeight: "22px", color: "text.secondary" }}
      >
        {label} :
      </Typography>

      <Box sx={{ minWidth: 0, width: "100%" }}>{children}</Box>
    </Box>
  );
}

function InformationValue({ children }: { children: ReactNode }) {
  return (
    <Typography
      noWrap
      sx={{
        width: "100%",
        fontSize: 13,
        fontWeight: 500,
        lineHeight: "16px",
        color: "text.primary",
      }}
    >
      {children}
    </Typography>
  );
}

function DocumentValue({
  file,
  language,
}: {
  file: UploadedFileMetadata | null;
  language: "en" | "kh" | "km";
}) {
  if (!file) {
    return <InformationValue>-</InformationValue>;
  }

  const shortDisplayName = truncateFileName(file.name);
  const displaySize = formatFileSize(file.size, language);
  return (
    <DocumentLink
      file={file}
      sx={{
        width: "100%",
        minWidth: 0,
        display: "flex",
        alignItems: "center",
        gap: "8px",
        textAlign: "left",
      }}
    >
      <PdfIcon sx={{ fontSize: 20, flexShrink: 0 }} />

      <Box sx={{ minWidth: 0, flex: 1 }}>
        <Typography
          noWrap
          title={file.name}
          sx={{
            fontSize: 12,
            fontWeight: 500,
            lineHeight: "15px",
            color: "text.primary",
          }}
        >
          {shortDisplayName}
        </Typography>
        <Typography
          sx={{
            mt: "2px",
            fontSize: 8,
            lineHeight: "8px",
            color: "text.secondary",
          }}
        >
          {displaySize}
        </Typography>
      </Box>
    </DocumentLink>
  );
}

type ProgressReportDetailInformationProps = {
  report: ProgressReportDetail;
  labels: ProgressReportDetailLabels;
};

export function ProgressReportDetailInformation({
  report,
  labels,
}: ProgressReportDetailInformationProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const { language } = useAppLanguage();

  return (
    <Box sx={{ minWidth: 0 }}>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", md: "repeat(2, minmax(0, 1fr))" },
          columnGap: { xs: 2, md: 8 },
          rowGap: 2,
        }}
      >
        <Box sx={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <InformationItem icon={<SubmitDateIcon />} label={labels.year}>
            <InformationValue>
              {formatNumber(report.year, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<SubmitDateIcon />}
            label={labels.firstMeeting}
          >
            <InformationValue>
              {formatDate(report.firstMeeting, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<SubmitDateIcon />}
            label={labels.firstDeadline}
          >
            <InformationValue>
              {formatDate(report.firstDeadline, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<HyperlinkIcon />}
            label={labels.draftSemester}
          >
            <DocumentValue
              file={report.draftSemesterDocument}
              language={language}
            />
          </InformationItem>
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "12px",
            width: { md: "fit-content" },
            maxWidth: "100%",
            justifySelf: { md: "end" },
          }}
        >
          <InformationItem icon={<SubmitDateIcon />} label={labels.deadline}>
            <InformationValue>
              {formatDate(report.deadline, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<SubmitDateIcon />}
            label={labels.secondMeeting}
          >
            <InformationValue>
              {formatDate(report.secondMeeting, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<SubmitDateIcon />}
            label={labels.secondDeadline}
          >
            <InformationValue>
              {formatDate(report.secondDeadline, language)}
            </InformationValue>
          </InformationItem>

          <InformationItem
            icon={<HyperlinkIcon />}
            label={labels.reportDocument}
          >
            <DocumentValue file={report.reportDocument} language={language} />
          </InformationItem>
        </Box>
      </Box>

      <Box sx={{ mt: "12px" }}>
        <Typography
          sx={{ fontSize: 13, lineHeight: "22px", color: "text.secondary" }}
        >
          {labels.description} :
        </Typography>

        <Paper
          elevation={0}
          sx={{
            mt: "8px",
            minHeight: 76,
            px: 2,
            py: "16px",
            borderRadius: "10px",
            bgcolor: isDark
              ? alpha(theme.palette.background.paper, 0.92)
              : "#ffffff",
          }}
        >
          <Typography
            sx={{
              fontSize: 13,
              lineHeight: "22px",
              color: theme.palette.text.primary,
            }}
          >
            {report.description}
          </Typography>
        </Paper>
      </Box>
    </Box>
  );
}