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

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

import {
  AccountCircleIcon,
  CategoryOfIssuesIcon,
  HyperlinkIcon,
  SubmitDateIcon,
  WarningIcon,
} from "@/components/ui/icon";
import { IssueStatusBadge } from "@/components/ui/issue-status-badge";
import type { IssueStatus } from "@/features/pswg/working-group-issues/wg-issues-data";
import {
  translateWgIssuesText,
  type WgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

import type { CdcIssueMatrixDetailMock } from "../cdc-issue-matrix-detail-mock";
import type { CdcIssueMatrixTranslation } from "../cdc-issue-matrix-i18n";

import {
  CdcIssueMatrixDetailField,
  CdcIssueMatrixDetailValue,
  CdcIssueMatrixDetailValueSlot,
} from "./cdc-issue-matrix-detail-field";

const LEFT_COLUMN_LABEL_WIDTH = 165;
const RIGHT_COLUMN_LABEL_WIDTH = 188;

type CdcIssueMatrixSubmitDetailProps = {
  data: CdcIssueMatrixDetailMock;
  isDark: boolean;
  labels: CdcIssueMatrixTranslation["detail"]["submitDetailLabels"];
  wgLanguage: WgIssuesLanguage;
};

export function CdcIssueMatrixSubmitDetail({
  data,
  isDark,
  labels,
  wgLanguage,
}: CdcIssueMatrixSubmitDetailProps) {
  return (
    <Box sx={{ mt: 3 }}>
      <Typography
        sx={{
          color: isDark ? alpha("#ffffff", 0.9) : "#414651",
          fontSize: 16,
          fontWeight: 700,
          lineHeight: 1.35,
        }}
      >
        {labels.submitDetail}
      </Typography>

      <Box
        sx={{
          mt: 2,
          display: "grid",
          gridTemplateColumns: { xs: "1fr", md: "repeat(2, minmax(0, 1fr))" },
          columnGap: { xs: 0, md: 8, lg: 12 },
          rowGap: { xs: 2, md: 0 },
          alignItems: "start",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: 2,
            minWidth: 0,
          }}
        >
          <CdcIssueMatrixDetailField
            icon={<AccountCircleIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.ministryName}
            labelWidth={LEFT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValue isDark={isDark}>
              {data.ministryName}
            </CdcIssueMatrixDetailValue>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<AccountCircleIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.submittedBy}
            labelWidth={LEFT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValue isDark={isDark}>
              {data.submittedBy}
            </CdcIssueMatrixDetailValue>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<SubmitDateIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.submissionDate}
            labelWidth={LEFT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValue isDark={isDark}>
              {data.submissionDate}
            </CdcIssueMatrixDetailValue>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<WarningIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.status}
            labelWidth={LEFT_COLUMN_LABEL_WIDTH}
          >
            <IssueStatusBadge
              status={data.status}
              label={translateWgIssuesText(
                wgLanguage,
                data.status as IssueStatus,
              )}
            />
          </CdcIssueMatrixDetailField>
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: 2,
            minWidth: 0,
          }}
        >
          <CdcIssueMatrixDetailField
            icon={<CategoryOfIssuesIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.categoryOfIssues}
            labelWidth={RIGHT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValueSlot>
              <CdcIssueMatrixDetailValue isDark={isDark}>
                {data.category}
              </CdcIssueMatrixDetailValue>
            </CdcIssueMatrixDetailValueSlot>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<HyperlinkIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.issueDocument}
            labelWidth={RIGHT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValueSlot
              leading={
                <PictureAsPdfRoundedIcon
                  sx={{ color: "#f04438", fontSize: 20 }}
                />
              }
            >
              <Box sx={{ minWidth: 0 }}>
                <Typography
                  sx={{
                    color: isDark ? "#ffffff" : "#252b37",
                    fontSize: 12,
                    fontWeight: 500,
                    lineHeight: 1.35,
                    wordBreak: "break-word",
                  }}
                >
                  {data.issueDocument.name}
                </Typography>
                <Typography
                  sx={{
                    mt: 0.5,
                    color: isDark ? alpha("#ffffff", 0.62) : "#414651",
                    fontSize: 8,
                    fontWeight: 400,
                    lineHeight: 1.24,
                  }}
                >
                  {data.issueDocument.sizeLabel}
                </Typography>
              </Box>
            </CdcIssueMatrixDetailValueSlot>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<AccountCircleIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.ministry}
            labelWidth={RIGHT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValueSlot
              leading={
                <Avatar
                  src={data.ministry.logo ?? undefined}
                  sx={{
                    width: 19,
                    height: 19,
                    bgcolor: isDark ? "#1f2937" : "#eef4ff",
                    color: isDark ? "#ffffff" : "#175cd3",
                    fontSize: 10,
                    fontWeight: 700,
                  }}
                >
                  {data.ministry.name.charAt(0)}
                </Avatar>
              }
            >
              <CdcIssueMatrixDetailValue isDark={isDark}>
                {data.ministry.name}
              </CdcIssueMatrixDetailValue>
            </CdcIssueMatrixDetailValueSlot>
          </CdcIssueMatrixDetailField>

          <CdcIssueMatrixDetailField
            icon={<CategoryOfIssuesIcon sx={{ fontSize: 20 }} />}
            isDark={isDark}
            label={labels.plenaryEscalation}
            labelWidth={RIGHT_COLUMN_LABEL_WIDTH}
          >
            <CdcIssueMatrixDetailValueSlot>
              <CdcIssueMatrixDetailValue isDark={isDark}>
                {data.plenaryEscalation}
              </CdcIssueMatrixDetailValue>
            </CdcIssueMatrixDetailValueSlot>
          </CdcIssueMatrixDetailField>
        </Box>
      </Box>
    </Box>
  );
}