"use client";

import type { ReactNode } from "react";

import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
import ShortTextOutlinedIcon from "@mui/icons-material/ShortTextOutlined";
import TranslateOutlinedIcon from "@mui/icons-material/TranslateOutlined";

import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

import type {
  MyOrganization,
  OrganizationType,
} from "../types/my-organization-types";

type OrganizationDetailsCardProps = {
  organization: MyOrganization;
};

type DetailRowProps = {
  icon: ReactNode;
  label: string;
  value: ReactNode;
  iconBackground?: string;
};

function DetailRow({
  icon,
  label,
  value,
  iconBackground = "rgba(33, 150, 243, 0.15)",
}: DetailRowProps) {
  return (
    <Stack
      component="div"
      direction="row"
      spacing={2}
      sx={{
        px: 2,
        py: 2,
        alignItems: "flex-start",
      }}
    >
      <Box
        sx={{
          width: 42,
          height: 42,
          borderRadius: 2,
          bgcolor: iconBackground,
          color: "primary.light",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        {icon}
      </Box>

      <Box
        sx={{
          minWidth: 0,
          flex: 1,
        }}
      >
        <Typography
          variant="body2"
          color="text.secondary"
          sx={{
            mb: 0.5,
          }}
        >
          {label}
        </Typography>

        <Box
          sx={{
            fontSize: 15,
            lineHeight: 1.7,
            color: "text.primary",
            overflowWrap: "anywhere",
          }}
        >
          {value}
        </Box>
      </Box>
    </Stack>
  );
}

function organizationTypeLabel(
  type?: OrganizationType | null,
): string {
  if (!type) {
    return "—";
  }

  const labels: Record<OrganizationType, string> = {
    PSWG: "PSWG",
    MINISTRY: "Ministry",
    CDC_SECRETARIAT: "CDC Secretariat",
    CEFP: "CEFP",
    CDC_GPSF: "CDC G-PSF",
  };

  return labels[type] ?? "—";
}

function formatEstablishedDate(
  value?: string | null,
): string {
  if (!value) {
    return "—";
  }

  const date = new Date(value);

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

  return new Intl.DateTimeFormat("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  }).format(date);
}

export function OrganizationDetailsCard({
  organization,
}: OrganizationDetailsCardProps) {
  const establishedDate =
    formatEstablishedDate(
      organization.establishedDate,
    );

  const organizationType =
    organizationTypeLabel(
      organization.type,
    );

  const shortName =
    organization.shortName?.trim() ||
    "—";

  const nameKh =
    organization.nameKh?.trim() ||
    "—";

  const nameEn =
    organization.nameEn?.trim() ||
    organization.name?.trim() ||
    "—";

  const description =
    organization.descriptionKh?.trim() ||
    organization.descriptionEn?.trim() ||
    organization.description?.trim() ||
    "—";

  return (
    <Paper
      elevation={0}
      sx={{
        borderRadius: 3,
        border: "1px solid",
        borderColor: "divider",
        overflow: "hidden",
        backgroundImage: "none",
      }}
    >
      <Box
        sx={{
          px: 2.5,
          py: 2,
          display: "flex",
          alignItems: "center",
          gap: 1.25,
          borderBottom: "1px solid",
          borderColor: "divider",
        }}
      >
        <BusinessOutlinedIcon color="primary" />

        <Typography
          component="div"
          sx={{
            fontWeight: 700,
          }}
        >
          Organization Details
        </Typography>
      </Box>

      <DetailRow
        icon={
          <BusinessOutlinedIcon fontSize="small" />
        }
        label="Organization Type"
        value={organizationType}
      />

      <Divider />

      <DetailRow
        icon={
          <ShortTextOutlinedIcon fontSize="small" />
        }
        label="Short Name"
        value={shortName}
        iconBackground="rgba(34, 197, 94, 0.15)"
      />

      <Divider />

      <DetailRow
        icon={
          <TranslateOutlinedIcon fontSize="small" />
        }
        label="Organization Name (Khmer)"
        value={
          <Typography
            component="div"
            sx={{
              fontFamily:
                '"Battambang", "Khmer OS Battambang", sans-serif',
              fontSize: 15,
              lineHeight: 1.8,
            }}
          >
            {nameKh}
          </Typography>
        }
        iconBackground="rgba(249, 115, 22, 0.15)"
      />

      <Divider />

      <DetailRow
        icon={
          <LanguageOutlinedIcon fontSize="small" />
        }
        label="Organization Name (English)"
        value={nameEn}
        iconBackground="rgba(139, 92, 246, 0.15)"
      />

      <Divider />

      <DetailRow
        icon={
          <CalendarMonthOutlinedIcon fontSize="small" />
        }
        label="Established Date"
        value={establishedDate}
        iconBackground="rgba(14, 165, 233, 0.15)"
      />

      <Divider />

      <DetailRow
        icon={
          <DescriptionOutlinedIcon fontSize="small" />
        }
        label="Description"
        value={
          <Typography
            component="div"
            sx={{
              fontFamily:
                '"Battambang", "Khmer OS Battambang", sans-serif',
              fontSize: 14,
              lineHeight: 1.9,
              whiteSpace: "pre-wrap",
              overflowWrap: "anywhere",
            }}
          >
            {description}
          </Typography>
        }
        iconBackground="rgba(168, 85, 247, 0.15)"
      />
    </Paper>
  );
}