"use client";

import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";

import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";

import {
  alpha,
  useTheme,
} from "@mui/material/styles";

import { useAppLanguage } from "@/components/providers/app-language-provider";

import {
  resolveMyOrganizationAssetUrl,
} from "../service/my-organization-service";

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

type Props = {
  profile: MyOrganizationProfile;
};

export function OrganizationProfileCard({
  profile,
}: Props) {
  const theme =
    useTheme();

  const { language } =
    useAppLanguage();

  const isKhmer =
    language === "kh";

  const fontFamily =
    isKhmer
      ? '"Battambang", "Kantumruy Pro", sans-serif'
      : '"Inter", "Segoe UI", Arial, sans-serif';

  const organization =
    profile.organization;

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

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

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

  const logoUrl =
    resolveMyOrganizationAssetUrl(
      organization.logo,
    );

  return (
    <Paper
      elevation={0}
      sx={{
        width:
          "100%",

        p: {
          xs: 2,
          sm: 2.5,
        },

        display:
          "flex",

        flexDirection: {
          xs: "column",
          md: "row",
        },

        alignItems: {
          xs: "stretch",
          md: "center",
        },

        gap: 2.5,

        bgcolor:
          "background.paper",

        backgroundImage:
          "none",

        border:
          "1px solid",

        borderColor:
          "divider",

        borderRadius:
          2,

        fontFamily,
      }}
    >
      {/* Organization logo */}
      <Box
        sx={{
          width: {
            xs: 150,
            sm: 170,
          },

          height: {
            xs: 150,
            sm: 170,
          },

          p: 1,

          alignSelf: {
            xs: "center",
            md: "auto",
          },

          flexShrink: 0,

          bgcolor:
            "common.white",

          border:
            "1px solid",

          borderColor:
            "divider",

          borderRadius:
            2,

          display:
            "grid",

          placeItems:
            "center",

          overflow:
            "hidden",
        }}
      >
        {logoUrl ? (
          <Box
            component="img"
            src={logoUrl}
            alt={`${organizationName} logo`}
            sx={{
              width:
                "100%",

              height:
                "100%",

              objectFit:
                "contain",
            }}
          />
        ) : (
          <BusinessOutlinedIcon
            sx={{
              fontSize:
                58,

              color:
                "text.secondary",
            }}
          />
        )}
      </Box>

      <Box
        sx={{
          minWidth:
            0,

          flex:
            1,
        }}
      >
        <Chip
          size="small"
          label={
            organization.active
              ? isKhmer
                ? "សកម្ម"
                : "Active"
              : isKhmer
                ? "អសកម្ម"
                : "Inactive"
          }
          sx={{
            mb:
              1.25,

            color:
              organization.active
                ? theme.palette.success.dark
                : theme.palette.text.secondary,

            bgcolor:
              organization.active
                ? alpha(
                    theme.palette.success.main,
                    0.14,
                  )
                : theme.palette.action.hover,

            fontWeight:
              700,
          }}
        />

        <Typography
          component="h2"
          sx={{
            color:
              "text.primary",

            fontFamily,

            fontSize: {
              xs: 23,
              sm: 27,
            },

            fontWeight:
              700,

            lineHeight:
              isKhmer
                ? 1.65
                : 1.3,
          }}
        >
          {organizationName}
        </Typography>

        <Typography
          sx={{
            mt:
              0.75,

            color:
              "primary.main",

            fontSize:
              14.5,

            fontWeight:
              600,
          }}
        >
          {organizationType}
        </Typography>

        <Typography
          sx={{
            mt:
              1,

            color:
              "text.secondary",

            fontSize:
              14,

            lineHeight:
              1.6,
          }}
        >
          {isKhmer
            ? "សហប្រធាន៖ "
            : "Co-Chair: "}
          {coChair}
        </Typography>
      </Box>
    </Paper>
  );
}