"use client";

import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
import PictureAsPdfOutlinedIcon from "@mui/icons-material/PictureAsPdfOutlined";
import QuestionAnswerOutlinedIcon from "@mui/icons-material/QuestionAnswerOutlined";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Divider from "@mui/material/Divider";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import type { PlenaryApiItem } from "../plenary-data";

type Props = {
  plenary: PlenaryApiItem;
};

function formatDate(value: string | null | undefined): string {
  if (!value) {
    return "-";
  }

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    return "-";
  }

  return new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "long",
    year: "numeric",
    timeZone: "UTC",
  }).format(date);
}

function InfoItem({
  icon,
  label,
  children,
}: {
  icon: React.ReactNode;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1.2,
        minHeight: 34,
      }}
    >
      <Box
        sx={{
          width: 20,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "text.secondary",
        }}
      >
        {icon}
      </Box>

      <Typography
        sx={{
          minWidth: 132,
          color: "text.secondary",
          fontSize: 13,
        }}
      >
        {label}
      </Typography>

      <Box
        sx={{
          minWidth: 0,
          fontSize: 13,
          fontWeight: 600,
        }}
      >
        {children}
      </Box>
    </Box>
  );
}

export function PlenaryDetailInfo({ plenary }: Props) {
  const theme = useTheme();

  const isSent = plenary.statusCode === "SENT";

  return (
    <Box>
      <Typography
        sx={{
          mb: 2,
          fontSize: {
            xs: 22,
            md: 27,
          },
          fontWeight: 800,
        }}
      >
        {plenary.name}
      </Typography>

      <Divider sx={{ mb: 2.5 }} />

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            md: "1fr 1fr",
          },
          gap: {
            xs: 1.5,
            md: 3,
          },
        }}
      >
        <Box>
          <InfoItem
            icon={
              <CalendarMonthOutlinedIcon
                sx={{ fontSize: 16 }}
              />
            }
            label="Deadline"
          >
            <Typography
              component="span"
              sx={{
                fontSize: 13,
                fontWeight: 600,
              }}
            >
              {formatDate(plenary.deadline)}
            </Typography>
          </InfoItem>

          <InfoItem
            icon={
              <CalendarMonthOutlinedIcon
                sx={{ fontSize: 16 }}
              />
            }
            label="Meeting Date"
          >
            <Typography
              component="span"
              sx={{
                fontSize: 13,
                fontWeight: 600,
              }}
            >
              {formatDate(plenary.meetingDate)}
            </Typography>
          </InfoItem>

          <InfoItem
            icon={
              <DescriptionOutlinedIcon
                sx={{ fontSize: 16 }}
              />
            }
            label="Status"
          >
            <Chip
              label={plenary.status}
              size="small"
              sx={{
                minWidth: 82,
                height: 22,
                fontSize: 12,
                fontWeight: 700,
                color: isSent ? "#16A34A" : "#D97706",
                bgcolor: alpha(
                  isSent ? "#22C55E" : "#F59E0B",
                  0.1,
                ),
                border: `1px solid ${alpha(
                  isSent ? "#22C55E" : "#F59E0B",
                  0.22,
                )}`,
              }}
            />
          </InfoItem>
        </Box>

        <Box>
          <InfoItem
            icon={
              <QuestionAnswerOutlinedIcon
                sx={{ fontSize: 16 }}
              />
            }
            label="Number of RGC Decision"
          >
            <Typography
              component="span"
              sx={{
                fontSize: 13,
                fontWeight: 600,
              }}
            >
              {plenary.numberOfRgcDecisions}
            </Typography>
          </InfoItem>

          <InfoItem
            icon={
              <LinkOutlinedIcon
                sx={{ fontSize: 16 }}
              />
            }
            label="Attachment"
          >
            {plenary.documentReference ? (
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 0.8,
                  minWidth: 0,
                }}
              >
                <PictureAsPdfOutlinedIcon
                  sx={{
                    flexShrink: 0,
                    color: "#EF4444",
                    fontSize: 18,
                  }}
                />

                <Typography
                  sx={{
                    maxWidth: 250,
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    fontSize: 13,
                    fontWeight: 700,
                  }}
                >
                  {plenary.documentReference}
                </Typography>
              </Box>
            ) : (
              <Typography
                sx={{
                  color: "text.secondary",
                  fontSize: 13,
                }}
              >
                -
              </Typography>
            )}
          </InfoItem>
        </Box>
      </Box>

      <Box
        sx={{
          mt: 2.5,
          height: 1,
          bgcolor: alpha(theme.palette.text.primary, 0.08),
        }}
      />
    </Box>
  );
}