"use client";

import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import FaxOutlinedIcon from "@mui/icons-material/FaxOutlined";
import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
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 { ReactNode } from "react";

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

type OrganizationContactCardProps = {
  organization: MyOrganization;
};

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

function ContactRow({
  icon,
  label,
  value,
}: ContactRowProps) {
  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: "action.hover",
          color: "text.secondary",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        {icon}
      </Box>

      <Box
        sx={{
          flex: 1,
          minWidth: 0,
          display: "flex",
          justifyContent: "space-between",
          gap: 2,
          flexDirection: {
            xs: "column",
            sm: "row",
          },
        }}
      >
        <Typography color="text.secondary">
          {label}
        </Typography>

        <Box
          sx={{
            textAlign: {
              xs: "left",
              sm: "right",
            },
            overflowWrap: "anywhere",
          }}
        >
          {value}
        </Box>
      </Box>
    </Stack>
  );
}

export function OrganizationContactCard({
  organization,
}: OrganizationContactCardProps) {
  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",
        }}
      >
        <PhoneOutlinedIcon color="primary" />

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

      <ContactRow
        icon={<LanguageOutlinedIcon fontSize="small" />}
        label="Website"
        value={
          organization.website ? (
            <Link
              href={organization.website}
              target="_blank"
              rel="noreferrer"
              underline="hover"
            >
              {organization.website}
            </Link>
          ) : (
            "—"
          )
        }
      />

      <Divider />

      <ContactRow
        icon={<EmailOutlinedIcon fontSize="small" />}
        label="Email"
        value={
          organization.email ? (
            <Link
              href={`mailto:${organization.email}`}
              underline="hover"
              color="inherit"
            >
              {organization.email}
            </Link>
          ) : (
            "—"
          )
        }
      />

      <Divider />

      <ContactRow
        icon={<PhoneOutlinedIcon fontSize="small" />}
        label="Phone"
        value={
          organization.phone ? (
            <Link
              href={`tel:${organization.phone}`}
              underline="hover"
              color="inherit"
            >
              {organization.phone}
            </Link>
          ) : (
            "—"
          )
        }
      />

      <Divider />

      <ContactRow
        icon={<FaxOutlinedIcon fontSize="small" />}
        label="Fax"
        value={organization.fax || "—"}
      />

      <Divider />

      <ContactRow
        icon={<LocationOnOutlinedIcon fontSize="small" />}
        label="Address"
        value={
          <Typography
            sx={{
              maxWidth: 420,
              fontSize: 14,
              lineHeight: 1.7,
            }}
          >
            {organization.addressEn || "—"}
          </Typography>
        }
      />
    </Paper>
  );
}