"use client";

import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import GroupsOutlinedIcon from "@mui/icons-material/GroupsOutlined";
import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import ToggleOnOutlinedIcon from "@mui/icons-material/ToggleOnOutlined";

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;
};

type InformationRowProps = {
  label: string;
  value: React.ReactNode;
  icon: React.ReactNode;
};

function InformationRow({
  label,
  value,
  icon,
}: InformationRowProps) {
  return (
    <Box
      sx={{
        minHeight: 72,

        px: 2,
        py: 1.25,

        display: "flex",
        alignItems: "center",

        gap: 1.5,

        borderBottom: "1px solid",
        borderColor: "divider",

        "&:last-child": {
          borderBottom: 0,
        },
      }}
    >
      <Box
        sx={{
          width: 30,
          height: 30,

          flexShrink: 0,

          display: "grid",
          placeItems: "center",

          color: "primary.main",

          "& svg": {
            fontSize: 22,
          },
        }}
      >
        {icon}
      </Box>

      <Box
        sx={{
          minWidth: 0,
          flex: 1,
        }}
      >
        <Typography
          sx={{
            color: "text.secondary",

            fontSize: 12.5,
            fontWeight: 500,
          }}
        >
          {label}
        </Typography>

        <Box
          sx={{
            mt: 0.25,

            color: "text.primary",

            fontSize: 14.5,
            fontWeight: 600,

            overflowWrap: "anywhere",
          }}
        >
          {value}
        </Box>
      </Box>
    </Box>
  );
}

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

  const { language } =
    useAppLanguage();

  const isKhmer =
    language === "kh";

  const organization =
    profile.organization;

  const labels = isKhmer
    ? {
        title:
          "ព័ត៌មានលម្អិតរបស់ស្ថាប័ន",

        name:
          "ឈ្មោះស្ថាប័ន",

        type:
          "ប្រភេទស្ថាប័ន",

        coChair:
          "សហប្រធាន",

        description:
          "ការពិពណ៌នា",

        related:
          "ស្ថាប័នពាក់ព័ន្ធ",

        users:
          "អ្នកប្រើប្រាស់",

        status:
          "ស្ថានភាព",

        systemLogo:
          "រូបសញ្ញាប្រព័ន្ធ",

        active:
          "សកម្ម",

        inactive:
          "អសកម្ម",
      }
    : {
        title:
          "Organization Details",

        name:
          "Organization Name",

        type:
          "Organization Type",

        coChair:
          "Co-Chair",

        description:
          "Description",

        related:
          "Related Organization",

        users:
          "Users",

        status:
          "Status",

        systemLogo:
          "System Logo",

        active:
          "Active",

        inactive:
          "Inactive",
      };

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

  // ============================================================
  // SYSTEM LOGO
  // ============================================================

  const systemLogoUrl =
    resolveMyOrganizationAssetUrl(
      profile.systemLogo,
    );

  return (
    <Paper
      elevation={0}
      sx={{
        mt: 3,

        overflow: "hidden",

        bgcolor: "background.paper",
        backgroundImage: "none",

        border: "1px solid",
        borderColor: "divider",
        borderRadius: 2,
      }}
    >
      {/* Header */}
      <Box
        sx={{
          minHeight: 62,

          px: 2.5,

          display: "flex",
          alignItems: "center",

          gap: 1,

          borderBottom: "1px solid",
          borderColor: "divider",
        }}
      >
        <BusinessOutlinedIcon
          color="primary"
        />

        <Typography
          component="h2"
          sx={{
            fontSize: 15,
            fontWeight: 700,
          }}
        >
          {labels.title}
        </Typography>
      </Box>

      {/* Content */}
      <Box
        sx={{
          p: 2,

          display: "grid",

          gridTemplateColumns: {
            xs: "1fr",
            lg: "repeat(2, minmax(0, 1fr))",
          },

          gap: 1.25,
        }}
      >
        {/* ====================================================
            LEFT COLUMN
        ==================================================== */}

        <Box
          sx={{
            overflow: "hidden",

            border: "1px solid",
            borderColor: "divider",
            borderRadius: 1.5,
          }}
        >
          <InformationRow
            icon={
              <BusinessOutlinedIcon />
            }
            label={
              labels.name
            }
            value={
              organization.name ||
              "—"
            }
          />

          <InformationRow
            icon={
              <BusinessOutlinedIcon />
            }
            label={
              labels.type
            }
            value={
              organization
                .stakeholderType
                ?.name ||
              "—"
            }
          />

          <InformationRow
            icon={
              <PersonOutlineOutlinedIcon />
            }
            label={
              labels.coChair
            }
            value={
              organization.coChair ||
              "—"
            }
          />

          <InformationRow
            icon={
              <DescriptionOutlinedIcon />
            }
            label={
              labels.description
            }
            value={
              organization.description ||
              "—"
            }
          />
        </Box>

        {/* ====================================================
            RIGHT COLUMN
        ==================================================== */}

        <Box
          sx={{
            overflow: "hidden",

            border: "1px solid",
            borderColor: "divider",
            borderRadius: 1.5,
          }}
        >
          {/* Related Organization */}

          <InformationRow
            icon={
              <LinkOutlinedIcon />
            }
            label={
              labels.related
            }
            value={
              relatedOrganization
            }
          />

          {/* Users */}

          <InformationRow
            icon={
              <GroupsOutlinedIcon />
            }
            label={
              labels.users
            }
            value={
              organization.users
                ?.length ??
              0
            }
          />

          {/* Status */}

          <InformationRow
            icon={
              <ToggleOnOutlinedIcon />
            }
            label={
              labels.status
            }
            value={
              <Chip
                size="small"
                label={
                  organization.active
                    ? labels.active
                    : labels.inactive
                }
                sx={{
                  color:
                    organization.active
                      ? theme.palette.success.dark
                      : theme.palette.text.secondary,

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

                  fontWeight: 700,
                }}
              />
            }
          />

          {/* ==================================================
              SYSTEM LOGO
          ================================================== */}

          <InformationRow
            icon={
              <ImageOutlinedIcon />
            }
            label={
              labels.systemLogo
            }
            value={
              systemLogoUrl ? (
                <Box
                  sx={{
                    mt: 0.75,

                    width: 150,
                    height: 80,

                    p: 1,

                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",

                    bgcolor: "common.white",

                    border: "1px solid",
                    borderColor: "divider",

                    borderRadius: 1.5,

                    overflow: "hidden",
                  }}
                >
                  <Box
                    component="img"
                    src={systemLogoUrl}
                    alt="G-PSF System Logo"
                    sx={{
                      width: "100%",
                      height: "100%",

                      display: "block",

                      objectFit: "contain",
                    }}
                  />
                </Box>
              ) : (
                <Box
                  sx={{
                    mt: 0.75,

                    width: 150,
                    height: 80,

                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",

                    gap: 0.75,

                    color: "text.secondary",

                    border: "1px dashed",
                    borderColor: "divider",

                    borderRadius: 1.5,
                  }}
                >
                  <ImageOutlinedIcon
                    sx={{
                      fontSize: 24,
                    }}
                  />

                  <Typography
                    sx={{
                      fontSize: 12,
                      color: "text.secondary",
                    }}
                  >
                    {isKhmer
                      ? "មិនទាន់មាន"
                      : "No logo"}
                  </Typography>
                </Box>
              )
            }
          />
        </Box>
      </Box>
    </Paper>
  );
}