"use client";

import type { ReactNode } from "react";

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

import {
  ArrowReloadIcon,
  HyperlinkIcon,
  LocationOnIcon,
  NotedBookEditIcon,
  NotedBookIcon,
  PdfIcon,
  SubmitDateIcon,
  WarningIcon,
} from "@/components/ui/icon";
import { MeetingSummaryStatusBadge } from "@/components/ui/meeting-summary-status-badge";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import { DocumentFileName } from "@/components/ui/document-file-name";
import { DocumentLink } from "@/components/ui/document-link";
import {
  formatFileSize,
  getDisplayFileName,
  type UploadedFileMetadata,
} from "@/lib/document-file";

import type { MinistryProgressReportDetail } from "../../progress-report-detail-data";

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

function InfoItem({ icon, label, children }: InfoItemProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: "20px 200px minmax(0, 1fr)",
        columnGap: "11px",
        alignItems: "center",
        minHeight: 27,
        mb: 1.5,
      }}
    >
      <Box
        sx={{
          width: 20,
          height: 20,
          color: isDark ? "#98a2b3" : "#717680",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          overflow: "hidden",
          flexShrink: 0,
          "& svg": {
            fontSize: 20,
            width: 20,
            height: 20,
          },
        }}
      >
        {icon}
      </Box>

      <Typography
        noWrap
        sx={{
          fontSize: 13,
          fontWeight: 400,
          lineHeight: "22px",
          color: isDark ? "#d0d5dd" : "#717680",
        }}
      >
        {label} :
      </Typography>

      <Box sx={{ minWidth: 0 }}>{children}</Box>
    </Box>
  );
}

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

function DocumentValue({ file }: { file: UploadedFileMetadata | null }) {
  const { language } = useAppLanguage();

  if (!file) {
    return <ValueText>-</ValueText>;
  }

  const displayName = getDisplayFileName(file.name, "Document");

  return (
    <DocumentLink file={file} sx={{ display: "inline-flex", minWidth: 0 }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
        <PdfIcon sx={{ fontSize: 20 }} />
        <Box sx={{ minWidth: 0 }}>
          <DocumentFileName
            name={displayName}
            fontSize={13}
            fontWeight={600}
            sx={{ color: "text.primary" }}
          />
          <Typography
            sx={{
              mt: 0.25,
              fontSize: 10,
              lineHeight: "12px",
              color: "text.secondary",
            }}
          >
            {formatFileSize(file.size, language)}
          </Typography>
        </Box>
      </Box>
    </DocumentLink>
  );
}

type Props = {
  detail: MinistryProgressReportDetail;
};

export function ProgressReportDetailInfoSection({ detail }: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const sectionTitleSx = {
    fontSize: 18,
    fontWeight: 700,
    lineHeight: "24px",
    color: isDark ? "#f9fafb" : "#181d27",
    mb: 2,
  } as const;

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
        gap: { xs: 3, lg: 8 },
        minWidth: 0,
      }}
    >
      <Box sx={{ minWidth: 0 }}>
        <Typography sx={sectionTitleSx}>
          {detail.ministryShortName} Information
        </Typography>

        <InfoItem icon={<SubmitDateIcon />} label="Submitted Date">
          <ValueText>{detail.submittedDate}</ValueText>
        </InfoItem>

        <InfoItem icon={<NotedBookIcon />} label="Prepared By">
          <ValueText>{detail.preparedBy}</ValueText>
        </InfoItem>

        <InfoItem icon={<HyperlinkIcon />} label="Approval Progress Report">
          <DocumentValue file={detail.approvalDocument} />
        </InfoItem>
      </Box>

      <Box sx={{ minWidth: 0 }}>
        <Typography sx={sectionTitleSx}>CDC</Typography>

        <InfoItem icon={<WarningIcon sx={{ fontSize: 18 }} />} label="Status">
          {detail.status === "-" ? (
            <ValueText>-</ValueText>
          ) : (
            <MeetingSummaryStatusBadge status={detail.status} />
          )}
        </InfoItem>

        <InfoItem icon={<NotedBookEditIcon />} label="Reviewed By">
          <ValueText>{detail.reviewedBy}</ValueText>
        </InfoItem>

        <InfoItem icon={<ArrowReloadIcon />} label="Latest Update">
          <ValueText>{detail.latestUpdate}</ValueText>
        </InfoItem>

        <InfoItem icon={<HyperlinkIcon />} label="Request Document">
          <DocumentValue file={detail.requestDocument} />
        </InfoItem>

        <InfoItem icon={<SubmitDateIcon />} label="Meeting date & time">
          <ValueText>{detail.meetingDateTime}</ValueText>
        </InfoItem>

        <InfoItem icon={<LocationOnIcon />} label="Location">
          <ValueText>{detail.location}</ValueText>
        </InfoItem>
      </Box>
    </Box>
  );
}