"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { toKhmerDigits } from "@/lib/number-utils";

import type { MeetingSummaryPrintModel } from "./meeting-summary-print-mock-data";

const CDC_LOGO = "/images/print/cdc-logo.png";
const LEFT_LOGO = dashboardAssets.primaryAgencyAvatar;

type Props = {
  model: MeetingSummaryPrintModel;
  preview?: boolean;
};

function KhmerBold({ children }: { children: ReactNode }) {
  return (
    <Box component="span" sx={{ fontWeight: 700 }}>
      {children}
    </Box>
  );
}

type SignatureBlockProps = {
  dateLine: string;
  convertedDateLine: string;
  roleLines: string[];
  position: string;
  name: string;
};

function SignatureBlock({
  dateLine,
  convertedDateLine,
  roleLines,
  position,
  name,
}: SignatureBlockProps) {
  return (
    <Box className="ms-khmer-print-signature-block">
      <Typography className="font-kh ms-khmer-print-signature-date">
        {dateLine}
      </Typography>
      <Typography className="font-kh ms-khmer-print-signature-date">
        {convertedDateLine}
      </Typography>

      <Box className="ms-khmer-print-signature-role">
        {roleLines.map((line) => (
          <Typography
            key={line}
            className="font-kh ms-khmer-print-signature-role-line"
          >
            {line}
          </Typography>
        ))}
        {position ? (
          <Typography className="font-kh ms-khmer-print-signature-role-line">
            {position}
          </Typography>
        ) : null}
      </Box>

      <Box className="ms-khmer-print-signature-space" aria-hidden />

      <Typography className="font-kh ms-khmer-print-signature-name">
        {name}
      </Typography>
    </Box>
  );
}

export function MeetingSummaryKhmerPrintDocument({ model, preview }: Props) {
  const lunarDateLine = model.meetingLunarDateText;
  const convertedDateLine = `ត្រូវនឹង${model.meetingGregorianDateText}`;
  return (
    <Box
      className={`ms-khmer-print-page${preview ? " ms-khmer-print-page--preview" : ""}`}
    >
      <Box className="ms-khmer-print-header">
        <Typography className="font-kh moul-regular ms-khmer-print-motto">
          <KhmerBold>ព្រះរាជាណាចក្រកម្ពុជា</KhmerBold>
        </Typography>
        <Typography className="font-kh moul-regular ms-khmer-print-motto">
          <KhmerBold>ជាតិសាសនា ព្រះមហាក្សត្រ</KhmerBold>
        </Typography>
        <Box className="ms-khmer-print-ornament" aria-hidden>
          ────୨ৎ────
        </Box>

        <Box className="ms-khmer-print-logo-band">
          <Box className="ms-khmer-print-logo-band-inner">
            <Box
              component="img"
              src={LEFT_LOGO}
              alt="Primary agency"
              loading="eager"
              className="ms-khmer-print-logo ms-khmer-print-logo--agency"
            />

            <Box className="ms-khmer-print-title-block">
              <Typography className="font-kh ms-khmer-print-title">
                របាយការណ៍លទ្ធផលកិច្ចប្រជុំ
              </Typography>
              <Typography className="font-kh ms-khmer-print-subtitle">
                ក្រុមការងារតាមវិស័យផ្នែក <KhmerBold>{model.sectorKh}</KhmerBold>
              </Typography>
              <Typography className="font-kh ms-khmer-print-subtitle">
                ទីកន្លែងប្រជុំ <KhmerBold>{model.locationKh}</KhmerBold>
              </Typography>
              <Typography className="font-kh ms-khmer-print-subtitle">
                ថ្ងៃទី <KhmerBold>{model.meetingDayKh}</KhmerBold> ខែ{" "}
                <KhmerBold>{model.meetingMonthKh}</KhmerBold> ឆ្នាំ
                <KhmerBold>{model.meetingYearKh}</KhmerBold>
              </Typography>
            </Box>

            <Box
              component="img"
              src={CDC_LOGO}
              alt="CDC"
              loading="eager"
              className="ms-khmer-print-logo ms-khmer-print-logo--cdc"
            />
          </Box>
        </Box>
      </Box>

      <Typography className="font-kh ms-khmer-print-intro">
        {model.introKh}
      </Typography>

      <Box className="ms-khmer-print-section-spacer" aria-hidden />

      {model.issues.map((issue, index) => (
        <Box key={issue.number}>
          {index > 0 ? (
            <Box className="ms-khmer-print-issue-spacer" aria-hidden />
          ) : null}

          <Box className="ms-khmer-print-issue">
            <Box className="ms-khmer-print-issue-title-wrap">
              <Typography className="ms-khmer-print-issue-title" component="p">
                {toKhmerDigits(issue.number)}. {issue.titleEn}
              </Typography>
            </Box>

            <table className="ms-khmer-print-table">
              <thead>
                <tr>
                  <th className="font-kh">ព័ត៌មានកិច្ចប្រជុំ</th>
                  <th className="font-kh">ពិពណ៌នា</th>
                </tr>
              </thead>
              <tbody>
                {issue.rows.map((row) => (
                  <tr key={row.labelKh}>
                    <td className="font-kh ms-khmer-print-table-label">
                      {row.labelKh}
                    </td>
                    <td
                      className="font-kh ms-khmer-print-table-value"
                      style={
                        row.minHeight ? { minHeight: row.minHeight } : undefined
                      }
                    >
                      {row.value}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Box>
        </Box>
      ))}

      <Box className="ms-khmer-print-signatures">
        <SignatureBlock
          dateLine={lunarDateLine}
          convertedDateLine={convertedDateLine}
          roleLines={[
            "អ្នកធ្វើរបាយការណ៍កិច្ចប្រជុំក្រុមការងារ",
            "កំណត់ហេតុកិច្ចប្រជុំ",
          ]}
          position={model.participants.pswgReporter.position}
          name={model.participants.pswgReporter.name}
        />
        <SignatureBlock
          dateLine={lunarDateLine}
          convertedDateLine={convertedDateLine}
          roleLines={[
            "អ្នកត្រួតពិនិត្យរបាយការណ៍កិច្ចប្រជុំ",
            "កំណត់ហេតុកិច្ចប្រជុំ",
          ]}
          position={model.participants.pswgRepresentative.position}
          name={model.participants.pswgRepresentative.name}
        />
        <SignatureBlock
          dateLine={lunarDateLine}
          convertedDateLine={convertedDateLine}
          roleLines={[
            `អនុប្រធាន និងសហប្រធានក្រុមការងារតាមវិស័យផ្នែក ${model.sectorKh}`,
          ]}
          position={model.participants.ministryReporter.position}
          name={model.participants.ministryReporter.name}
        />
        <SignatureBlock
          dateLine={lunarDateLine}
          convertedDateLine={convertedDateLine}
          roleLines={[`សហប្រធានក្រុមការងារតាមវិស័យផ្នែក ${model.sectorKh}`]}
          position={model.participants.ministryRepresentative.position}
          name={model.participants.ministryRepresentative.name}
        />
      </Box>
    </Box>
  );
}