"use client";

import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import RefreshOutlinedIcon from "@mui/icons-material/RefreshOutlined";

import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";

import NextLink from "next/link";
import { useRouter } from "next/navigation";

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

import { useMyOrganization } from "../hook/use-my-organization";

import { OrganizationInformationTabs } from "./organization-information-tabs";
import { OrganizationProfileCard } from "./organization-profile-card";

export function MyOrganizationView() {
  const router = useRouter();
  const { language } = useAppLanguage();

  const isKhmer = language === "kh";

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

  const labels = isKhmer
    ? {
        home: "ទំព័រដើម",
        title: "ស្ថាប័នរបស់ខ្ញុំ",
        description:
          "មើល និងគ្រប់គ្រងព័ត៌មានប្រវត្តិរូបស្ថាប័នរបស់អ្នក។",
        edit: "កែប្រវត្តិរូប",
        retry: "ព្យាយាមម្តងទៀត",
        loadError: "មិនអាចទាញយកព័ត៌មានស្ថាប័នបានទេ។",
      }
    : {
        home: "Home",
        title: "My Organization",
        description:
          "View and manage your organization profile.",
        edit: "Edit Profile",
        retry: "Retry",
        loadError: "Unable to load organization profile.",
      };

  const {
    profile,
    isLoading,
    error,
    refetch,
  } = useMyOrganization();

  if (isLoading) {
    return (
      <Box
        sx={{
          minHeight: 500,
          display: "grid",
          placeItems: "center",
        }}
      >
        <CircularProgress />
      </Box>
    );
  }

  if (error || !profile) {
    return (
      <Box
        sx={{
          p: {
            xs: 2,
            md: 3,
          },
          fontFamily,
        }}
      >
        <Alert
          severity="error"
          action={
            <Button
              color="inherit"
              size="small"
              startIcon={<RefreshOutlinedIcon />}
              onClick={() => {
                void refetch();
              }}
              sx={{
                fontFamily,
                textTransform: "none",
              }}
            >
              {labels.retry}
            </Button>
          }
          sx={{
            fontFamily,
          }}
        >
          {error ?? labels.loadError}
        </Alert>
      </Box>
    );
  }

  return (
    <Box
      sx={{
        width: "100%",
        px: {
          xs: 2,
          sm: 3,
          lg: 3.5,
        },
        py: {
          xs: 2.5,
          sm: 3,
        },
        fontFamily,

        "& .MuiTypography-root": {
          fontFamily,
        },

        "& .MuiButton-root": {
          fontFamily,
          textTransform: "none",
        },

        "& .MuiBreadcrumbs-root": {
          fontFamily,
        },
      }}
    >
      <Breadcrumbs
        separator={
          <ArrowForwardIosRoundedIcon
            sx={{
              fontSize: 10,
              color: "text.disabled",
            }}
          />
        }
        sx={{
          mb: 0.75,

          "& .MuiBreadcrumbs-ol": {
            alignItems: "center",
          },
        }}
      >
        <Link
          component={NextLink}
          href="/"
          underline="hover"
          sx={{
            color: "text.secondary",
            fontFamily,
            fontSize: isKhmer ? 13 : 12.5,
          }}
        >
          {labels.home}
        </Link>

        <Typography
          component="span"
          sx={{
            color: "text.secondary",
            fontSize: isKhmer ? 13 : 12.5,
          }}
        >
          {labels.title}
        </Typography>
      </Breadcrumbs>

      <Box
        sx={{
          mb: 2.25,
          display: "flex",
          alignItems: {
            xs: "stretch",
            sm: "center",
          },
          justifyContent: "space-between",
          flexDirection: {
            xs: "column",
            sm: "row",
          },
          gap: 2,
        }}
      >
        <Box
          sx={{
            minWidth: 0,
            flex: 1,
          }}
        >
          <Typography
            component="h1"
            sx={{
              color: "text.primary",
              fontSize: isKhmer
                ? {
                    xs: 25,
                    sm: 29,
                  }
                : {
                    xs: 28,
                    sm: 31,
                  },
              lineHeight: isKhmer ? 1.6 : 1.2,
              fontWeight: isKhmer ? 600 : 700,
              letterSpacing: isKhmer ? 0 : "-0.02em",
            }}
          >
            {labels.title}
          </Typography>

          <Typography
            sx={{
              mt: isKhmer ? 0.15 : 0.65,
              color: "text.secondary",
              fontSize: isKhmer ? 14 : 13.5,
              lineHeight: isKhmer ? 1.85 : 1.5,
            }}
          >
            {labels.description}
          </Typography>
        </Box>

        <Button
          type="button"
          variant="contained"
          startIcon={
            <EditOutlinedIcon
              sx={{
                fontSize: 18,
              }}
            />
          }
          onClick={() => {
            router.push("/my-organization/edit");
          }}
          sx={{
            width: {
              xs: "100%",
              sm: "auto",
            },
            minWidth: isKhmer ? 168 : 154,
            height: isKhmer ? 48 : 44,
            px: isKhmer ? 2.25 : 2,
            py: 0,
            flexShrink: 0,
            borderRadius: 1.25,
            fontSize: isKhmer ? 13.5 : 13,
            fontWeight: 600,
            lineHeight: isKhmer ? 1.7 : 1.4,
            whiteSpace: "nowrap",
            color: "common.white",
            boxShadow: "none",

            "& .MuiButton-startIcon": {
              ml: 0,
              mr: isKhmer ? 0.9 : 0.75,
            },

            "&:hover": {
              boxShadow: "none",
            },
          }}
        >
          {labels.edit}
        </Button>
      </Box>

      <OrganizationProfileCard
        profile={profile}
      />

      <OrganizationInformationTabs
        profile={profile}
      />
    </Box>
  );
}