import type { ComponentProps } from "react";

import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
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 {
  getMeetingRequestFont,
  i18n,
  type UiLang,
} from "@/features/pswg/meeting-request/meeting-request-i18n";

export type MeetingRequestsViewMode = "table" | "calendar";

type DashboardIconSrc = ComponentProps<typeof DashboardAssetIcon>["src"];

type MeetingRequestsViewTabsProps = {
  activeView: MeetingRequestsViewMode;
  language?: UiLang;
  onViewChange?: (view: MeetingRequestsViewMode) => void;
  onChange?: (view: MeetingRequestsViewMode) => void;
};

function ViewTabButton({
  active,
  label,
  width,
  icon,
  language,
  onClick,
}: {
  active: boolean;
  label: string;
  width: number;
  icon: DashboardIconSrc;
  language: UiLang;
  onClick: () => void;
}) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <ButtonBase
      onClick={onClick}
      sx={{
        width,
        height: 40,
        borderRadius: "6px",
        bgcolor: active
          ? "#1a64a8"
          : isDark
            ? alpha("#ffffff", 0.08)
            : "#ffffff",
        border: active
          ? "1px solid #1a64a8"
          : `1px solid ${
              isDark ? alpha("#ffffff", 0.12) : alpha("#000000", 0.06)
            }`,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 1.25,
      }}
    >
      <DashboardAssetIcon src={icon} width={20} height={20} />

      <Typography
        sx={{
          color: active
            ? "#ffffff"
            : isDark
              ? alpha("#ffffff", 0.72)
              : "#717680",
          fontSize: 12,
          fontWeight: 500,
          whiteSpace: "nowrap",
          fontFamily: getMeetingRequestFont(language),
        }}
      >
        {label}
      </Typography>
    </ButtonBase>
  );
}

export function MeetingRequestsViewTabs({
  activeView,
  language = "km",
  onViewChange,
  onChange,
}: MeetingRequestsViewTabsProps) {
  const handleViewChange = onViewChange ?? onChange;
  const t = i18n(language);

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
      <ViewTabButton
        active={activeView === "table"}
        label={t.allMeetingRequest}
        width={187}
        icon={dashboardAssets.meetingRequestsTabCalendar}
        language={language}
        onClick={() => handleViewChange?.("table")}
      />

      <ViewTabButton
        active={activeView === "calendar"}
        label={t.calendar}
        width={134}
        icon={dashboardAssets.meetingRequestsTabCalendarDays}
        language={language}
        onClick={() => handleViewChange?.("calendar")}
      />
    </Box>
  );
}