import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { setView } from "@/features/Settings/SettingsSlice";
import { Logout } from "@/features/User/oidcAuth";
import logo from "@/static/header-logo.svg";
import { getInitials, stringToGradient } from "@/utils/avatarUtils";
import { getUserDisplayName } from "@/utils/userUtils";
import { redirectTo } from "@/utils/navigation";
import { CalendarApi } from "@fullcalendar/core";
import {
  Avatar,
  Box,
  Button,
  ButtonGroup,
  Divider,
  FormControl,
  IconButton,
  Menu,
  MenuItem,
  Popover,
  Select,
  Typography,
} from "@linagora/twake-mui";
import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import LogoutIcon from "@mui/icons-material/Logout";
import RefreshIcon from "@mui/icons-material/Refresh";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import React, { useEffect, useState } from "react";
import { push } from "redux-first-history";
import { useI18n } from "twake-i18n";
import SearchBar from "./EventSearchBar";
import "./Menubar.styl";

export type AppIconProps = {
  name: string;
  link: string;
  icon: string;
};

export type MenubarProps = {
  calendarRef: React.RefObject<CalendarApi | null>;
  onRefresh: () => void;
  currentDate: Date;
  onDateChange?: (date: Date) => void;
  currentView: string;
  onViewChange?: (view: string) => void;
  isIframe?: boolean;
};

export function Menubar({
  calendarRef,
  onRefresh,
  currentDate,
  onDateChange,
  currentView,
  onViewChange,
  isIframe,
}: MenubarProps) {
  const { t } = useI18n(); // deliberately NOT using f()
  const user = useAppSelector((state) => state.user.userData);
  const applist: AppIconProps[] = window.appList ?? [];
  const supportLink = window.SUPPORT_URL;
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [userMenuAnchorEl, setUserMenuAnchorEl] = useState<null | HTMLElement>(
    null
  );
  const dispatch = useAppDispatch();

  useEffect(() => {
    if (!user) {
      dispatch(push("/"));
    }
  }, [dispatch, user]);

  if (!user) {
    return null;
  }
  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleNavigation = async (action: "prev" | "next" | "today") => {
    if (!calendarRef.current) return;
    await dispatch(setView("calendar"));
    switch (action) {
      case "prev":
        calendarRef.current.prev();
        break;
      case "next":
        calendarRef.current.next();
        break;
      case "today":
        calendarRef.current.today();
        break;
    }

    // Notify parent about date change after navigation
    if (onDateChange) {
      const newDate = calendarRef.current.getDate();
      onDateChange(newDate);
    }
  };

  const handleViewChange = async (view: string) => {
    if (!calendarRef.current) return;
    await dispatch(setView("calendar"));

    calendarRef.current.changeView(view);

    // Notify parent about view change
    if (onViewChange) {
      onViewChange(view);
    }

    // Notify parent about date change after view change
    if (onDateChange) {
      const newDate = calendarRef.current.getDate();
      onDateChange(newDate);
    }
  };

  const open = Boolean(anchorEl);
  const userMenuOpen = Boolean(userMenuAnchorEl);

  const handleUserMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    setUserMenuAnchorEl(event.currentTarget);
  };

  const handleUserMenuClose = () => {
    setUserMenuAnchorEl(null);
  };

  const handleSettingsClick = () => {
    dispatch(setView("settings"));
    handleUserMenuClose();
  };

  const handleLogoutClick = async () => {
    const logoutUrl = await Logout();
    sessionStorage.removeItem("tokenSet");
    redirectTo(logoutUrl.href);
    handleUserMenuClose();
  };

  // Use i18n for month names instead of date-fns
  const monthIndex = currentDate.getMonth();
  const year = currentDate.getFullYear();
  const monthName = t(`months.standalone.${monthIndex}`);
  const dateLabel = `${monthName} ${year}`;

  return (
    <>
      <header className="menubar">
        <div className="left-menu">
          {!isIframe && (
            <div className="menu-items">
              <MainTitle
                calendarRef={calendarRef}
                currentView={currentView}
                onViewChange={onViewChange}
                onDateChange={onDateChange}
              />
            </div>
          )}
          <div className="menu-items">
            <div className="navigation-controls">
              <ButtonGroup
                variant="outlined"
                size="medium"
                sx={{
                  "& button:first-of-type": {
                    borderRadius: "12px 0 0 12px",
                  },
                  "& button:last-of-type": {
                    borderRadius: "0 12px 12px 0",
                  },
                }}
              >
                <Button
                  sx={{ width: 20 }}
                  onClick={() => handleNavigation("prev")}
                >
                  <ChevronLeftIcon sx={{ height: 20 }} />
                </Button>
                <Button onClick={() => handleNavigation("today")}>
                  {t("menubar.today")}
                </Button>
                <Button
                  sx={{ width: 20 }}
                  onClick={() => handleNavigation("next")}
                >
                  <ChevronRightIcon sx={{ height: 20 }} />
                </Button>
              </ButtonGroup>
            </div>
          </div>
          <div className="menu-items">
            <div className="current-date-time">
              <p>{dateLabel}</p>
            </div>
          </div>
        </div>
        <div className="right-menu">
          <div className="search-container">
            <SearchBar />
          </div>
          <div className="menu-items">
            <IconButton
              className="refresh-button"
              onClick={onRefresh}
              aria-label={t("menubar.refresh")}
              title={t("menubar.refresh")}
              sx={{ mr: 1 }}
            >
              <RefreshIcon />
            </IconButton>
          </div>
          <div className="menu-items">
            <FormControl
              size="small"
              style={{ minWidth: 120, marginRight: 16 }}
              className="select-display"
            >
              <Select
                value={currentView}
                onChange={(e) => handleViewChange(e.target.value)}
                variant="outlined"
                aria-label={t("menubar.viewSelector")}
                sx={{
                  borderRadius: "12px",
                  marginLeft: 1,
                  "& fieldset": { borderRadius: "12px" },
                }}
              >
                <MenuItem value="dayGridMonth">
                  {t("menubar.views.month")}
                </MenuItem>
                <MenuItem value="timeGridWeek">
                  {t("menubar.views.week")}
                </MenuItem>
                <MenuItem value="timeGridDay">
                  {t("menubar.views.day")}
                </MenuItem>
              </Select>
            </FormControl>
          </div>
          {!isIframe && (
            <>
              {supportLink && (
                <div className="menu-items">
                  <IconButton
                    component="a"
                    href={supportLink}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ marginRight: 8 }}
                    aria-label={t("menubar.help")}
                    title={t("menubar.help")}
                  >
                    <HelpOutlineIcon />
                  </IconButton>
                </div>
              )}

              <div className="menu-items">
                {applist.length > 0 && (
                  <IconButton
                    onClick={handleOpen}
                    style={{ marginRight: 8 }}
                    aria-label={t("menubar.apps")}
                    title={t("menubar.apps")}
                  >
                    <WidgetsOutlinedIcon />
                  </IconButton>
                )}
              </div>
            </>
          )}

          <div className="menu-items">
            <IconButton
              onClick={!isIframe ? handleUserMenuClick : handleSettingsClick}
              aria-label={isIframe ? t("menubar.settings") : undefined}
            >
              {!isIframe ? (
                <Avatar
                  color={stringToGradient(getUserDisplayName(user))}
                  size="m"
                  aria-label={t("menubar.userProfile")}
                >
                  {getInitials(getUserDisplayName(user))}
                </Avatar>
              ) : (
                <SettingsOutlinedIcon />
              )}
            </IconButton>
          </div>
        </div>
      </header>
      <Popover
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        PaperProps={{
          sx: {
            minWidth: 230,
            mt: 2,
            p: "14px 8px",
            borderRadius: "14px",
          },
        }}
      >
        <div className="app-grid">
          {applist.map((prop: AppIconProps) => (
            <AppIcon key={prop.name} prop={prop} />
          ))}
        </div>
      </Popover>

      <Menu
        open={userMenuOpen}
        anchorEl={userMenuAnchorEl}
        onClose={handleUserMenuClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        PaperProps={{
          sx: {
            minWidth: 280,
            mt: 1,
            padding: "0 !important",
            borderRadius: "14px",
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            padding: "24px",
          }}
        >
          <Avatar
            color={stringToGradient(getUserDisplayName(user))}
            size="l"
            sx={{ marginBottom: "8px" }}
          >
            {getInitials(getUserDisplayName(user))}
          </Avatar>
          <Typography
            sx={{
              color: "#424244",
              fontFamily: "Inter",
              fontSize: 22,
              fontWeight: 600,
            }}
          >
            {getUserDisplayName(user)}
          </Typography>
          <Typography
            sx={{
              fontSize: 14,
              fontWeight: 500,
            }}
          >
            {user?.email}
          </Typography>
        </Box>
        <MenuItem onClick={handleSettingsClick} sx={{ py: 1.5 }}>
          <SettingsOutlinedIcon
            sx={{
              mr: 2,
              color: "rgba(28, 27, 31, 0.48)",
              fontSize: 20,
            }}
          />
          {t("menubar.settings") || "Settings"}
        </MenuItem>
        <Divider />
        <MenuItem onClick={handleLogoutClick} sx={{ py: 1.5 }}>
          <LogoutIcon
            sx={{
              mr: 2,
              color: "rgba(28, 27, 31, 0.48)",
              fontSize: 20,
            }}
          />
          {t("menubar.logout") || "Logout"}
        </MenuItem>
      </Menu>
    </>
  );
}

export type MainTitleProps = {
  calendarRef: React.RefObject<CalendarApi | null>;
  currentView: string;
  onViewChange?: (view: string) => void;
  onDateChange?: (date: Date) => void;
};

export function MainTitle({
  calendarRef,
  currentView,
  onViewChange,
  onDateChange,
}: MainTitleProps) {
  const { t } = useI18n();
  const dispatch = useAppDispatch();

  const handleLogoClick = async () => {
    if (!calendarRef.current) return;

    await dispatch(setView("calendar"));

    if (currentView !== "timeGridWeek") {
      calendarRef.current.changeView("timeGridWeek");
      if (onViewChange) {
        onViewChange("timeGridWeek");
      }
    }

    calendarRef.current.today();

    if (onDateChange) {
      const newDate = calendarRef.current.getDate();
      onDateChange(newDate);
    }
  };

  return (
    <div className="menubar-item tc-home">
      <img
        className="logo"
        src={logo}
        alt={t("menubar.logoAlt")}
        onClick={handleLogoClick}
      />
    </div>
  );
}

function AppIcon({ prop }: { prop: AppIconProps }) {
  return (
    <Box
      component="a"
      href={prop.link}
      target="_blank"
      rel="noreferrer"
      sx={{
        textDecoration: "none",
        color: "inherit",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        p: "8px 12px 5px",
        borderRadius: "14px",
        "&:hover": {
          backgroundColor: "action.hover",
        },
      }}
    >
      <Box
        component="img"
        src={prop.icon}
        alt={prop.name}
        sx={{ maxWidth: 42, height: 42 }}
      />
      <Typography sx={{ mt: 0.75, textAlign: "center", fontSize: 12 }}>
        {prop.name}
      </Typography>
    </Box>
  );
}
