import { useQuery } from "@tanstack/react-query";
import {
  BadgeCheck,
  ChevronDown,
  ClipboardCheck,
  LayoutDashboard,
  LogOut,
  Moon,
  NotebookTabs,
  ShieldHalf,
  Sun,
  User as UserIcon,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useAuth } from "react-oidc-context";
import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
import {
  type ShellTranslator,
  applyShellTheme,
  buildShellProfileSummary,
  buildShellSessionStatus,
  readShellSessionExpiryEnabled,
  readShellTheme,
  shellLayoutClasses,
  writeShellSessionExpiryEnabled,
} from "../../../../common/shell";
import { fetchMe } from "../../features/auth/authApi";
import { t } from "../../lib/i18n";
import { resolveProfileRole } from "../../lib/role";
import {
  shouldAttemptSlidingSessionRenew,
  shouldAttemptUnlimitedSessionRenew,
} from "../../lib/sessionSliding";
import LanguageSelector from "../common/LanguageSelector";
import { Toaster } from "../ui/toaster";

const navItems = [
  {
    labelKey: "ui.dev.nav.overview",
    labelFallback: "Overview",
    to: "/",
    icon: LayoutDashboard,
  },
  {
    labelKey: "ui.dev.nav.developer_request",
    labelFallback: "Developer Access Request",
    to: "/developer-requests",
    icon: ClipboardCheck,
  },
  {
    labelKey: "ui.dev.nav.clients",
    labelFallback: "Clients",
    to: "/clients",
    icon: ShieldHalf,
  },
  {
    labelKey: "ui.dev.nav.audit_logs",
    labelFallback: "Audit Logs",
    to: "/audit-logs",
    icon: NotebookTabs,
  },
];

type SessionStatusProps = {
  expiresAtSec?: number | null;
  t: ShellTranslator;
};

function useSessionStatus({ expiresAtSec, t }: SessionStatusProps) {
  const [nowMs, setNowMs] = useState(() => Date.now());

  useEffect(() => {
    const timer = window.setInterval(() => {
      setNowMs(Date.now());
    }, 1000);

    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return buildShellSessionStatus({ expiresAtSec, nowMs, t });
}

function SessionStatusBadge(props: SessionStatusProps) {
  const sessionStatus = useSessionStatus(props);

  return (
    <span
      className={[
        shellLayoutClasses.sessionBadge,
        sessionStatus.toneClass,
      ].join(" ")}
    >
      {sessionStatus.text}
    </span>
  );
}

function SessionStatusText(props: SessionStatusProps) {
  const sessionStatus = useSessionStatus(props);

  return <>{sessionStatus.text}</>;
}

function AppLayout() {
  const auth = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const profileMenuRef = useRef<HTMLDivElement>(null);
  const isRenewInFlightRef = useRef(false);
  const lastRenewAttemptAtRef = useRef(0);
  const lastVisitedRouteRef = useRef<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(
    readShellSessionExpiryEnabled,
  );
  const hasAccessToken = Boolean(auth.user?.access_token);
  const { data: profile } = useQuery({
    queryKey: ["userMe"],
    queryFn: fetchMe,
    enabled: hasAccessToken,
  });

  const handleLogout = () => {
    if (
      window.confirm(
        t("msg.dev.logout_confirm", "Are you sure you want to log out?"),
      )
    ) {
      auth.removeUser();
      navigate("/login");
    }
  };

  useEffect(() => {
    applyShellTheme(theme);
  }, [theme]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        profileMenuRef.current &&
        !profileMenuRef.current.contains(event.target as Node)
      ) {
        setIsProfileMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  useEffect(() => {
    const maybeRenewSession = async () => {
      const now = Date.now();
      if (
        !shouldAttemptSlidingSessionRenew({
          expiresAtSec: auth.user?.expires_at,
          nowMs: now,
          isEnabled: isSessionExpiryEnabled,
          isAuthenticated: auth.isAuthenticated,
          isLoading: auth.isLoading,
          isRenewInFlight: isRenewInFlightRef.current,
          lastAttemptAtMs: lastRenewAttemptAtRef.current,
        })
      ) {
        return;
      }

      isRenewInFlightRef.current = true;
      lastRenewAttemptAtRef.current = now;

      try {
        await auth.signinSilent();
      } catch (error) {
        console.error("Silent session renewal failed.", error);
      } finally {
        isRenewInFlightRef.current = false;
      }
    };

    const handleUserAction = () => {
      void maybeRenewSession();
    };

    window.addEventListener("pointerdown", handleUserAction);
    window.addEventListener("keydown", handleUserAction);

    return () => {
      window.removeEventListener("pointerdown", handleUserAction);
      window.removeEventListener("keydown", handleUserAction);
    };
  }, [
    auth,
    auth.isAuthenticated,
    auth.isLoading,
    auth.user?.expires_at,
    isSessionExpiryEnabled,
  ]);

  useEffect(() => {
    const maybeKeepSessionAlive = async () => {
      const now = Date.now();
      if (
        !shouldAttemptUnlimitedSessionRenew({
          expiresAtSec: auth.user?.expires_at,
          nowMs: now,
          isEnabled: isSessionExpiryEnabled,
          isAuthenticated: auth.isAuthenticated,
          isLoading: auth.isLoading,
          isRenewInFlight: isRenewInFlightRef.current,
          lastAttemptAtMs: lastRenewAttemptAtRef.current,
        })
      ) {
        return;
      }

      isRenewInFlightRef.current = true;
      lastRenewAttemptAtRef.current = now;

      try {
        await auth.signinSilent();
      } catch (error) {
        console.error("Unlimited session keepalive renewal failed.", error);
      } finally {
        isRenewInFlightRef.current = false;
      }
    };

    const timer = window.setInterval(() => {
      void maybeKeepSessionAlive();
    }, 30_000);

    void maybeKeepSessionAlive();

    return () => {
      window.clearInterval(timer);
    };
  }, [
    auth,
    auth.isAuthenticated,
    auth.isLoading,
    auth.user?.expires_at,
    isSessionExpiryEnabled,
  ]);

  useEffect(() => {
    const routeKey = `${location.pathname}${location.search}${location.hash}`;
    if (lastVisitedRouteRef.current === null) {
      lastVisitedRouteRef.current = routeKey;
      return;
    }

    if (lastVisitedRouteRef.current === routeKey) {
      return;
    }

    lastVisitedRouteRef.current = routeKey;

    const now = Date.now();
    if (
      !shouldAttemptSlidingSessionRenew({
        expiresAtSec: auth.user?.expires_at,
        nowMs: now,
        isEnabled: isSessionExpiryEnabled,
        isAuthenticated: auth.isAuthenticated,
        isLoading: auth.isLoading,
        isRenewInFlight: isRenewInFlightRef.current,
        lastAttemptAtMs: lastRenewAttemptAtRef.current,
      })
    ) {
      return;
    }

    isRenewInFlightRef.current = true;
    lastRenewAttemptAtRef.current = now;

    void auth
      .signinSilent()
      .catch((error) => {
        console.error("Silent session renewal failed.", error);
      })
      .finally(() => {
        isRenewInFlightRef.current = false;
      });
  }, [
    auth,
    auth.isAuthenticated,
    auth.isLoading,
    auth.user?.expires_at,
    isSessionExpiryEnabled,
    location.hash,
    location.pathname,
    location.search,
  ]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  const profileSummary = buildShellProfileSummary({
    profileName:
      profile?.name ||
      auth.user?.profile?.name?.toString() ||
      auth.user?.profile?.preferred_username?.toString() ||
      auth.user?.profile?.nickname?.toString(),
    profileEmail: profile?.email || auth.user?.profile?.email?.toString(),
    fallbackName: t("ui.dev.profile.unknown_name", "Unknown User"),
    fallbackEmail: t("ui.dev.profile.unknown_email", "unknown@example.com"),
  });
  const currentRole = resolveProfileRole(
    auth.user?.profile as Record<string, unknown> | undefined,
  );
  const displayRoleKey = profile?.role || currentRole;
  const handleSessionExpiryToggle = () => {
    setIsSessionExpiryEnabled((prev) => {
      const next = !prev;
      writeShellSessionExpiryEnabled(next);
      return next;
    });
  };

  return (
    <div className={shellLayoutClasses.root}>
      <aside className={shellLayoutClasses.aside}>
        <div>
          <div className={shellLayoutClasses.brandSection}>
            <div className={shellLayoutClasses.brandWrap}>
              <div className={shellLayoutClasses.brandIcon}>
                <ShieldHalf size={20} />
              </div>
              <div>
                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
                  {t("ui.dev.brand", "Baron Sign In")}
                </p>
                <h1 className="text-lg font-semibold">
                  {t("ui.dev.console_title", "Developer Console")}
                </h1>
              </div>
            </div>
            <div className={shellLayoutClasses.scopeBadge}>
              <BadgeCheck size={14} />
              {t("ui.dev.scope_badge", "Scoped to /dev")}
            </div>
          </div>
          <nav className={shellLayoutClasses.navWrap}>
            <div className={shellLayoutClasses.navMeta}>
              <span className="rounded-full border border-border px-3 py-1">
                {t("ui.dev.env_badge", "Env: dev")}
              </span>
            </div>
            <div className={shellLayoutClasses.navList}>
              {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
                <NavLink
                  key={to}
                  to={to}
                  end={to === "/"}
                  className={({ isActive }) =>
                    [
                      shellLayoutClasses.navItemBase,
                      isActive
                        ? shellLayoutClasses.navItemActive
                        : shellLayoutClasses.navItemIdle,
                    ].join(" ")
                  }
                >
                  <Icon size={18} />
                  <span>{t(labelKey, labelFallback)}</span>
                </NavLink>
              ))}
            </div>
          </nav>
        </div>

        <div>
          <div className="border-t border-border/50 px-3 pt-4">
            <button
              type="button"
              onClick={handleLogout}
              className={shellLayoutClasses.logoutButton}
            >
              <LogOut size={18} />
              <span>{t("ui.dev.nav.logout", "Logout")}</span>
            </button>
          </div>
          <div className={shellLayoutClasses.sidebarFooterNotice}>
            <p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
            <p>
              {t(
                "msg.dev.sidebar.notice_detail",
                "Register and manage client applications.",
              )}
            </p>
          </div>
        </div>
      </aside>

      <div className={shellLayoutClasses.content}>
        <header className={shellLayoutClasses.header}>
          <div className={shellLayoutClasses.headerInner}>
            <div className={shellLayoutClasses.headerTitleWrap}>
              <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
                {t("ui.dev.header.plane", "Dev Plane")}
              </p>
              <span className="text-lg font-semibold">
                {t("ui.dev.header.subtitle", "Manage your applications")}
              </span>
            </div>
            <div className={shellLayoutClasses.headerActions}>
              <LanguageSelector />
              <button
                type="button"
                onClick={toggleTheme}
                className={shellLayoutClasses.actionButton}
                aria-label={t("ui.common.theme_toggle", "Toggle theme")}
              >
                {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
                {theme === "light"
                  ? t("ui.common.theme_light", "Light")
                  : t("ui.common.theme_dark", "Dark")}
              </button>
              {isSessionExpiryEnabled ? (
                <SessionStatusBadge
                  expiresAtSec={auth.user?.expires_at}
                  t={t}
                />
              ) : null}
              <div className="relative" ref={profileMenuRef}>
                <button
                  type="button"
                  onClick={() => setIsProfileMenuOpen((prev) => !prev)}
                  className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
                  aria-haspopup="menu"
                  aria-expanded={isProfileMenuOpen}
                  aria-label={t(
                    "ui.dev.profile.menu_aria",
                    "Open account menu",
                  )}
                >
                  <div className={shellLayoutClasses.profileInitial}>
                    {profileSummary.initial}
                  </div>
                  <div className="hidden min-w-0 text-left md:block">
                    <p className="truncate text-xs font-medium text-foreground">
                      {profileSummary.name}
                    </p>
                    <p className="truncate text-[11px] text-muted-foreground">
                      {profileSummary.email}
                    </p>
                  </div>
                  <ChevronDown
                    size={14}
                    className={`transition-transform duration-200 ${isProfileMenuOpen ? "rotate-180" : ""}`}
                  />
                </button>
                {isProfileMenuOpen ? (
                  <div role="menu" className={shellLayoutClasses.profileMenu}>
                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                      {t("ui.dev.profile.menu_title", "Account")}
                    </p>
                    <div className={shellLayoutClasses.profileCard}>
                      <div>
                        <p className="truncate text-sm font-semibold text-foreground">
                          {profileSummary.name}
                        </p>
                        <p className="truncate text-xs text-muted-foreground">
                          {profileSummary.email}
                        </p>
                      </div>
                      <div className="flex items-center pt-1">
                        <span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
                          {t(
                            `ui.admin.role.${displayRoleKey}`,
                            displayRoleKey.toUpperCase(),
                          )}
                        </span>
                      </div>
                    </div>

                    <div className={shellLayoutClasses.settingsCard}>
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <p className="text-sm font-medium text-foreground">
                            {t("ui.dev.session.auto_extend", "Session expiry")}
                          </p>
                          <p className="text-xs text-muted-foreground">
                            {isSessionExpiryEnabled ? (
                              <SessionStatusText
                                expiresAtSec={auth.user?.expires_at}
                                t={t}
                              />
                            ) : (
                              t(
                                "ui.dev.session.disabled",
                                "Session expiry disabled",
                              )
                            )}
                          </p>
                        </div>
                        <button
                          type="button"
                          role="switch"
                          aria-checked={isSessionExpiryEnabled}
                          onClick={handleSessionExpiryToggle}
                          className={[
                            "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition",
                            isSessionExpiryEnabled ? "bg-primary" : "bg-muted",
                          ].join(" ")}
                        >
                          <span
                            className={[
                              "inline-block h-5 w-5 rounded-full bg-white transition",
                              isSessionExpiryEnabled
                                ? "translate-x-5"
                                : "translate-x-1",
                            ].join(" ")}
                          />
                        </button>
                      </div>
                    </div>

                    <button
                      type="button"
                      role="menuitem"
                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
                      onClick={() => {
                        navigate("/profile");
                        setIsProfileMenuOpen(false);
                      }}
                    >
                      <UserIcon size={16} className="text-muted-foreground" />
                      <span>{t("ui.dev.profile.title", "My Profile")}</span>
                    </button>
                    <button
                      type="button"
                      role="menuitem"
                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
                      onClick={handleLogout}
                    >
                      <LogOut size={16} />
                      <span>{t("ui.dev.nav.logout", "Logout")}</span>
                    </button>
                  </div>
                ) : null}
              </div>
            </div>
          </div>
        </header>
        <main className={shellLayoutClasses.main}>
          <Outlet />
        </main>
      </div>
      <Toaster />
    </div>
  );
}

export default AppLayout;