"use client";

import PictureAsPdfRoundedIcon from "@mui/icons-material/PictureAsPdfRounded";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import type {
  MeetingRequest,
  MeetingRequestIssue,
} from "../../meeting-request-data";
import {
  emptyPrintText,
  formatPrintDate,
  getMeetingPrimaryAgency,
  getMeetingPrimaryAgencyLogo,
  getMeetingStatusLabel,
  getPrintValue,
} from "./meeting-print-helpers";
import { MeetingPrintInfoItem } from "./meeting-print-info-item";
import { MeetingPrintIssueTable } from "./meeting-print-issue-table";
import { MeetingPrintStyles } from "./meeting-print-styles";
import {
  AccountCircleIcon,
  EmailIcon,
  GovernmentAgencyIcon,
  HyperlinkIcon,
  SubmitDateIcon,
  WarningIcon,
} from "@/components/ui/icon";

type MeetingPrintViewProps = {
  meetingRequest: MeetingRequest;
  issues: MeetingRequestIssue[];
  meetingDate?: string;
  meetingTime?: string;
  meetingLocation?: string;
  documentSize?: string;
  printVariant?: "default" | "calendar";
  printStatus?: string;
};

export function MeetingPrintView({
  meetingRequest,
  issues,
  meetingDate,
  meetingTime,
  meetingLocation,
  documentSize,
  printVariant = "default",
  printStatus,
}: MeetingPrintViewProps) {
  const primaryAgencyLogo = getMeetingPrimaryAgencyLogo(meetingRequest);

  return (
    <>
      <MeetingPrintStyles />

      <Box className={`meeting-print-root meeting-print-root--${printVariant}`}>
        <Box className="meeting-print-page">
          <Typography
            className="meeting-print-title font-kh"
            component="h1"
            sx={{
              fontSize: "40px",
              fontWeight: 700,
              lineHeight: 1.35,
              color: "#181D27",
            }}
          >
            {meetingRequest.title}
          </Typography>

          <Box className="meeting-print-title-divider" aria-hidden />

          <Typography
            className="meeting-print-section-title"
            component="h2"
            sx={{ fontSize: "28px", fontWeight: 700, color: "#181D27" }}
          >
            Submit Details
          </Typography>

          <Box className="meeting-print-info-grid">
            <MeetingPrintInfoItem
              label="WG Meeting"
              value={meetingRequest.privateSectorWG}
              icon={<AccountCircleIcon />}
            />
            <MeetingPrintInfoItem
              label="Submitted Date"
              value={formatPrintDate(meetingRequest.requestedDate)}
              icon={<SubmitDateIcon />}
            />
            <MeetingPrintInfoItem
              label="Meeting Request"
              icon={<HyperlinkIcon />}
            >
              <Box className="meeting-print-document-chip">
                <PictureAsPdfRoundedIcon className="meeting-print-pdf-icon" />
                <Box>
                  <Typography className="meeting-print-document-name">
                    {getPrintValue(meetingRequest.documentName)}
                  </Typography>
                  {documentSize && documentSize !== "0 B" ? (
                    <Typography className="meeting-print-document-size">
                      {documentSize}
                    </Typography>
                  ) : null}
                </Box>
              </Box>
            </MeetingPrintInfoItem>
            <MeetingPrintInfoItem
              label="Government Agency"
              icon={<GovernmentAgencyIcon />}
            >
              <Box className="meeting-print-agency-value">
                {primaryAgencyLogo ? (
                  <Box
                    alt={getMeetingPrimaryAgency(meetingRequest)}
                    className="meeting-print-agency-logo"
                    component="img"
                    src={primaryAgencyLogo}
                  />
                ) : null}
                <span>{getMeetingPrimaryAgency(meetingRequest)}</span>
              </Box>
            </MeetingPrintInfoItem>
            <MeetingPrintInfoItem label="Status" icon={<WarningIcon />}>
              <Box className="meeting-print-status">
                {getMeetingStatusLabel(printStatus ?? meetingRequest.status)}
              </Box>
            </MeetingPrintInfoItem>
            <MeetingPrintInfoItem
              label="Sent by"
              value={meetingRequest.submittedBy ?? meetingRequest.requestedBy}
              icon={<EmailIcon />}
            />
          </Box>

          <Box className="meeting-print-section-divider" aria-hidden />

          <Typography
            className="meeting-print-section-title"
            component="h2"
            sx={{ fontSize: "28px", fontWeight: 700, color: "#181D27" }}
          >
            Meeting Information
          </Typography>

          <Box className="meeting-print-meeting-info">
            <Typography>Date:</Typography>
            <Typography>
              {meetingDate ?? formatPrintDate(meetingRequest.requestedDate)}
            </Typography>
            <Typography>Time:</Typography>
            <Typography>{meetingTime ?? emptyPrintText}</Typography>
            <Typography>Location:</Typography>
            <Typography>{meetingLocation ?? emptyPrintText}</Typography>
          </Box>

          <Box className="meeting-print-section-divider" aria-hidden />

          <Typography
            className="meeting-print-section-title"
            component="h2"
            sx={{ fontSize: "28px", fontWeight: 700, color: "#181D27" }}
          >
            Descriptions
          </Typography>

          <Typography className="meeting-print-description font-kh">
            {getPrintValue(meetingRequest.description)}
          </Typography>

          <Box className="meeting-print-section-divider" aria-hidden />

          <Typography
            className="meeting-print-section-title meeting-print-list-title"
            component="h2"
            sx={{ fontSize: "28px", fontWeight: 700, color: "#181D27" }}
          >
            List of Issues
          </Typography>

          {issues.map((issue, index) => (
            <MeetingPrintIssueTable
              key={issue.id}
              issue={issue}
              issueNumber={index + 1}
            />
          ))}
        </Box>
      </Box>
    </>
  );
}