"use client";

import type { ReactNode } from "react";

import BadgeOutlinedIcon from "@mui/icons-material/BadgeOutlined";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";

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

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

type OrganizationContactPersonCardProps = {
  organization: MyOrganization;
};

type PersonRowProps = {
  icon: ReactNode;
  label: string;
  value: ReactNode;
};

function PersonRow({
  icon,
  label,
  value,
}: PersonRowProps) {
  return (
    <Stack
      component="div"
      direction="row"
      spacing={1.5}
      sx={{
        px: 2,
        py: 2,
        alignItems: "flex-start",
      }}
    >
      <Box
        sx={{
          width: 40,
          height: 40,
          borderRadius: 2,
          bgcolor: "rgba(33, 150, 243, 0.12)",
          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.35,
          }}
        >
          {label}
        </Typography>

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

export function OrganizationContactPersonCard({
  organization,
}: OrganizationContactPersonCardProps) {
  const contactPersonName =
    organization.contactPersonName?.trim() || "—";

  const contactPersonEmail =
    organization.contactPersonEmail?.trim() || "";

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

  const contactPersonPhone =
    organization.contactPersonPhone?.trim() || "";

  return (
    <Paper
      elevation={0}
      sx={{
        gridColumn: {
          xs: "auto",
          xl: "1 / -1",
        },
        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",
        }}
      >
        <PersonOutlineOutlinedIcon color="primary" />

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

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            md: "repeat(2, minmax(0, 1fr))",
          },
        }}
      >
        <Box
          sx={{
            borderRight: {
              xs: 0,
              md: "1px solid",
            },
            borderColor: "divider",
          }}
        >
          <PersonRow
            icon={
              <PersonOutlineOutlinedIcon fontSize="small" />
            }
            label="Contact Person Name"
            value={contactPersonName}
          />

          <Divider />

          <PersonRow
            icon={
              <EmailOutlinedIcon fontSize="small" />
            }
            label="Contact Person Email"
            value={
              contactPersonEmail ? (
                <Link
                  href={`mailto:${contactPersonEmail}`}
                  color="inherit"
                  underline="hover"
                >
                  {contactPersonEmail}
                </Link>
              ) : (
                "—"
              )
            }
          />
        </Box>

        <Box>
          <PersonRow
            icon={
              <BadgeOutlinedIcon fontSize="small" />
            }
            label="Contact Person Position"
            value={contactPersonPosition}
          />

          <Divider />

          <PersonRow
            icon={
              <PhoneOutlinedIcon fontSize="small" />
            }
            label="Contact Person Phone"
            value={
              contactPersonPhone ? (
                <Link
                  href={`tel:${contactPersonPhone}`}
                  color="inherit"
                  underline="hover"
                >
                  {contactPersonPhone}
                </Link>
              ) : (
                "—"
              )
            }
          />
        </Box>
      </Box>
    </Paper>
  );
}