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

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { ExportButton } from "@/components/ui/export-button";
import {
  getMeetingRequestFont,
  i18n,
  type UiLang,
} from "@/features/pswg/meeting-request/meeting-request-i18n";

import type { MeetingRequestsViewMode } from "./meeting-requests-view-tabs";

type MeetingRequestsHeaderProps = {
  view?: MeetingRequestsViewMode;
  language?: UiLang;
  onCreate?: () => void;
};

export function MeetingRequestsHeader({
  view = "table",
  language = "km",
  onCreate,
}: MeetingRequestsHeaderProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const t = i18n(language);

  const isCalendar = view === "calendar";
  const title = isCalendar ? t.calendar : t.meetingRequests;
  const breadcrumb = isCalendar
    ? t.breadcrumbCalendar
    : t.breadcrumbMeetingRequests;

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "flex-start", md: "flex-end" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 3 },
        flexWrap: "wrap",
        minHeight: { xs: "auto", md: 95 },
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          gap: 1.875,
          minHeight: { xs: "auto", md: 95 },
          py: { xs: 0, md: 0.5 },
        }}
      >
        <Typography
          sx={{
            color: isDark ? "#ffffff" : "#0a0a0a",
            fontSize: { xs: 28, md: 32 },
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.02em",
            fontFamily: getMeetingRequestFont(language),
          }}
        >
          {title}
        </Typography>

        <Typography
          sx={{
            color: isDark ? alpha("#ffffff", 0.72) : "#252b37",
            fontSize: 12,
            fontWeight: 500,
            lineHeight: 1,
            fontFamily: getMeetingRequestFont(language),
          }}
        >
          {breadcrumb}
        </Typography>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: { xs: 1.5, md: 2.75 },
          flexWrap: "wrap",
          justifyContent: { xs: "flex-start", md: "flex-end" },
        }}
      >
        <ExportButton sx={{ fontFamily: getMeetingRequestFont(language) }}>
          {t.exportAsXlsx}
        </ExportButton>

        <Button
          variant="contained"
          onClick={onCreate}
          startIcon={
            <DashboardAssetIcon
              src={dashboardAssets.closeLargeWhite}
              width={12.73}
              height={12.73}
              sx={{ transform: "rotate(45deg)" }}
            />
          }
          sx={{
            height: 40,
            px: 1.5,
            minWidth: 184,
            bgcolor: "#1a64a8",
            fontSize: 13,
            fontWeight: 500,
            borderRadius: "6px",
            color: "#edf8fd",
            boxShadow: "none",
            fontFamily: getMeetingRequestFont(language),
            "& .MuiButton-startIcon": {
              mr: 0.625,
            },
            "&:hover": {
              bgcolor: isDark ? "#2878bf" : "#15548e",
              boxShadow: "none",
            },
          }}
        >
          {t.newMeetingRequest}
        </Button>
      </Box>
    </Box>
  );
}