import type { ReactNode } from "react";

import Avatar from "@mui/material/Avatar";
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 {
  AccountCircleIcon,
  CategoryOfIssuesIcon,
  HyperlinkIcon,
  SubmitDateIcon,
  WarningIcon,
} from "@/components/ui/icon";
import { getDocumentUrl } from "@/lib/document-file";

import {
  IssueViewDetailField,
  IssueViewDetailValue,
} from "./issue-view-detail-field";
import type {
  IssueViewDetailData,
  IssueViewDetailLabels,
} from "./issue-view-detail-types";
import { formatIssueDate, toBackendUrl } from "./issue-view-detail-utils";

const SUBMIT_DETAIL_LABEL_WIDTH = 230;

function AgencyValue({
  isDark,
  logo,
  name,
}: {
  isDark: boolean;
  logo: string | null;
  name: string;
}) {
  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
      <Avatar
        src={toBackendUrl(logo)}
        sx={{
          width: 24,
          height: 24,
          bgcolor: isDark ? "#1f2937" : "#eef4ff",
          color: isDark ? "#ffffff" : "#175cd3",
          fontSize: 11,
          fontWeight: 700,
        }}
      >
        {name.charAt(0)}
      </Avatar>

      <Typography
        sx={{
          minWidth: 0,
          color: isDark ? alpha("#ffffff", 0.88) : "#252b37",
          fontSize: 13,
          fontWeight: 500,
          lineHeight: 1.4,
        }}
      >
        {name}
      </Typography>
    </Box>
  );
}

function AttachmentValue({
  attachment,
  attachmentSizeLabel,
  isDark,
  notAvailable,
}: {
  attachment: string | null;
  attachmentSizeLabel?: string;
  isDark: boolean;
  notAvailable: string;
}) {
  if (!attachment) {
    return (
      <IssueViewDetailValue isDark={isDark}>
        {notAvailable}
      </IssueViewDetailValue>
    );
  }

  return (
    <Link
      href={getDocumentUrl(attachment)}
      target="_blank"
      rel="noopener"
      underline="none"
      sx={{
        display: "inline-flex",
        alignItems: "center",
        minWidth: 0,
        width: "100%",
      }}
    >
      <DocumentFileAttachment
        value={attachment}
        fileSize={attachmentSizeLabel}
        iconSize={26}
        emptyLabel={notAvailable}
      />
    </Link>
  );
}

type IssueViewDetailSubmittedDetailProps = {
  data: IssueViewDetailData;
  isDark: boolean;
  labels: IssueViewDetailLabels;
  status: ReactNode;
  translateText?: (value: string) => string;
  attachmentSizeLabel?: string;
};

export function IssueViewDetailSubmittedDetail({
  data,
  isDark,
  labels,
  status,
  translateText = (value) => value,
  attachmentSizeLabel,
}: IssueViewDetailSubmittedDetailProps) {
  const notAvailable = labels.notAvailable;

  return (
    <Box sx={{ mt: 3 }}>
      <Typography
        sx={{
          color: isDark ? "#ffffff" : "#181d27",
          fontSize: 18,
          fontWeight: 700,
          lineHeight: 1.35,
        }}
      >
        {labels.submittedDetail}
      </Typography>

      <Box
        sx={{
          mt: 2,
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            md: "repeat(2, minmax(0, 1fr))",
            lg: "repeat(3, minmax(0, 1fr))",
          },
          columnGap: { xs: 2, md: 4, lg: 5 },
          rowGap: 2.5,
          alignItems: "center",
        }}
      >
        <IssueViewDetailField
          icon={<AccountCircleIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.governmentPrimaryAgency}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          <AgencyValue
            isDark={isDark}
            logo={data.primaryAgencyLogo}
            name={data.primaryAgencyName}
          />
        </IssueViewDetailField>

        <IssueViewDetailField
          icon={<SubmitDateIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.submittedDate}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          <IssueViewDetailValue isDark={isDark}>
            {formatIssueDate(data.submittedDate) ?? notAvailable}
          </IssueViewDetailValue>
        </IssueViewDetailField>

        <IssueViewDetailField
          icon={<SubmitDateIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.meetingDate}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          <IssueViewDetailValue isDark={isDark}>
            {data.meetingDate ?? notAvailable}
          </IssueViewDetailValue>
        </IssueViewDetailField>

        <IssueViewDetailField
          icon={<CategoryOfIssuesIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.category}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          <IssueViewDetailValue isDark={isDark}>
            {translateText(data.category)}
          </IssueViewDetailValue>
        </IssueViewDetailField>

        <IssueViewDetailField
          icon={<WarningIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.status}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          {status}
        </IssueViewDetailField>

        <IssueViewDetailField
          icon={<HyperlinkIcon sx={{ fontSize: 20 }} />}
          isDark={isDark}
          label={labels.meetingReferenceDocument}
          labelWidth={SUBMIT_DETAIL_LABEL_WIDTH}
        >
          <AttachmentValue
            attachment={data.attachment}
            attachmentSizeLabel={attachmentSizeLabel}
            isDark={isDark}
            notAvailable={notAvailable}
          />
        </IssueViewDetailField>
      </Box>
    </Box>
  );
}