import { useQuery } from "@tanstack/react-query";
import {
  Building2,
  ChevronDown,
  Key,
  KeyRound,
  LayoutDashboard,
  LogOut,
  Moon,
  Network,
  NotebookTabs,
  ShieldHalf,
  Sun,
  User as UserIcon,
  Users,
} from "lucide-react";
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import { useAuth } from "react-oidc-context";
import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
import { fetchMe } from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import {
  shouldAttemptSlidingSessionRenew,
  shouldAttemptUnlimitedSessionRenew,
} from "../../lib/sessionSliding";
import { buildAuthenticatedOrgChartUrl } from "../../features/users/orgChartPicker";
import LanguageSelector from "../common/LanguageSelector";
import RoleSwitcher from "./RoleSwitcher";

interface NavItem {
  label: string;
  to: string;
  icon: React.ComponentType<{ size?: number | string }>;
  isExternal?: boolean;
}

const staticNavItems: NavItem[] = [
  { label: "ui.admin.nav.overview", to: "/", icon: LayoutDashboard },
  { label: "ui.admin.nav.users", to: "/users", icon: Users },
  { label: "ui.admin.nav.api_keys", to: "/api-keys", icon: Key },
  { label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
  { label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
];

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 isDevRoleOverrideEnabled =
    import.meta.env.MODE === "development" ||
    (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
      ._IS_TEST_MODE === true;
  const isMockRoleEnabled =
    isDevRoleOverrideEnabled &&
    window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
  const mockRoleOverride = isMockRoleEnabled
    ? window.localStorage.getItem("X-Mock-Role")
    : null;
  const [theme, setTheme] = useState<"light" | "dark">(() => {
    const stored = window.localStorage.getItem("admin_theme");
    return stored === "dark" ? "dark" : "light";
  });
  const [isProfileOpen, setIsProfileOpen] = useState(false);
  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
    return stored !== "false";
  });
  const [nowMs, setNowMs] = useState(() => Date.now());

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

  const {
    data: profile,
    isLoading: isProfileLoading,
    error: profileError,
  } = useQuery({
    queryKey: ["me"],
    queryFn: async () => {
      console.debug("[AppLayout] Fetching profile...");
      try {
        const data = await fetchMe();
        console.debug("[AppLayout] Profile fetched successfully:", data.email);
        return data;
      } catch (err) {
        console.error("[AppLayout] Failed to fetch profile:", err);
        throw err;
      }
    },
    enabled:
      (auth.isAuthenticated && !auth.isLoading) ||
      import.meta.env.MODE === "development" ||
      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
        ._IS_TEST_MODE === true,
  });

  const navItems = React.useMemo(() => {
    const items = [...staticNavItems];
    const isTest =
      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
        ._IS_TEST_MODE === true;
    const effectiveRole = mockRoleOverride || profile?.role;

    const isSuperAdmin = isTest || effectiveRole === "super_admin";
    const isTenantAdmin = effectiveRole === "tenant_admin";
    const manageableCount = profile?.manageableTenants?.length ?? 0;
    const orgfrontUrl = buildAuthenticatedOrgChartUrl(
      import.meta.env.ORGFRONT_URL || "http://localhost:5175",
    );

    const filteredItems = items.filter((item) => {
      if (isTest) return true;
      if (item.to === "/api-keys") return isSuperAdmin;
      return true;
    });

    if (isSuperAdmin) {
      filteredItems.splice(1, 0, {
        label: "ui.admin.nav.tenants",
        to: "/tenants",
        icon: Building2,
      });
      filteredItems.splice(2, 0, {
        label: "ui.admin.nav.org_chart",
        to: orgfrontUrl,
        icon: Network,
        isExternal: true,
      });
    } else if (isTenantAdmin || manageableCount > 0) {
      if (manageableCount <= 1 && profile?.tenantId) {
        filteredItems.splice(1, 0, {
          label: "ui.admin.nav.my_tenant",
          to: `/tenants/${profile.tenantId}`,
          icon: Building2,
        });
      } else if (manageableCount > 1) {
        filteredItems.splice(1, 0, {
          label: "ui.admin.nav.tenants",
          to: "/tenants",
          icon: Building2,
        });
      }
      filteredItems.splice(
        manageableCount <= 1 && profile?.tenantId ? 2 : 2,
        0,
        {
          label: "ui.admin.nav.org_chart",
          to: orgfrontUrl,
          icon: Network,
          isExternal: true,
        },
      );
    } else {
      // 일반 사용자(Tenant Member)도 조직도 메뉴를 볼 수 있도록 추가합니다.
      filteredItems.splice(1, 0, {
        label: "ui.admin.nav.org_chart",
        to: orgfrontUrl,
        icon: Network,
        isExternal: true,
      });
    }

    return filteredItems;
  }, [mockRoleOverride, profile]);

  const handleLogout = () => {
    if (
      window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
    ) {
      window.localStorage.removeItem("admin_session");
      auth.removeUser();
      navigate("/login");
    }
  };

  useEffect(() => {
    const isTest =
      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
        ._IS_TEST_MODE === true;

    console.debug("[AppLayout] Auth state check:", {
      isLoading: auth.isLoading,
      isAuthenticated: auth.isAuthenticated,
      isTest,
    });

    if (!auth.isLoading && !auth.isAuthenticated && !isTest) {
      console.warn("[AppLayout] Not authenticated, redirecting to /login");
      navigate("/login");
    }
  }, [auth.isLoading, auth.isAuthenticated, navigate]);

  useEffect(() => {
    if (auth.user?.access_token) {
      window.localStorage.setItem("admin_session", auth.user.access_token);
    }
  }, [auth.user]);

  useEffect(() => {
    const root = document.documentElement;
    root.classList.remove("light", "dark");
    if (theme === "light") {
      root.classList.add("light");
    } else {
      root.classList.add("dark");
    }
    window.localStorage.setItem("admin_theme", theme);
  }, [theme]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        profileMenuRef.current &&
        !profileMenuRef.current.contains(event.target as Node)
      ) {
        setIsProfileOpen(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("세션 자동 연장에 실패했습니다.", 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("세션 무제한 유지 갱신에 실패했습니다.", 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("세션 자동 연장에 실패했습니다.", 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 profileName =
    profile?.name?.trim() ||
    auth.user?.profile.name?.toString().trim() ||
    auth.user?.profile.preferred_username?.toString().trim() ||
    t("ui.dev.profile.unknown_name", "Unknown User");
  const profileEmail =
    profile?.email?.trim() ||
    auth.user?.profile.email?.toString().trim() ||
    t("ui.dev.profile.unknown_email", "unknown@example.com");
  const profileInitial = profileName.charAt(0).toUpperCase();
  const profileRoleKey = mockRoleOverride || profile?.role || "user";
  const expiresAtSec = auth.user?.expires_at;
  const remainingMs =
    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
  const remainingTotalSec =
    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
  const remainingMinutes =
    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
  const remainingSeconds =
    remainingTotalSec !== null ? remainingTotalSec % 60 : null;

  let sessionToneClass =
    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
  let sessionText = t("ui.dev.session.active", "세션 활성");

  if (remainingMs === null) {
    sessionToneClass = "border-border bg-card text-muted-foreground";
    sessionText = t("ui.dev.session.unknown", "알 수 없음");
  } else if (remainingMs <= 0) {
    sessionToneClass =
      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
    sessionText = t("ui.dev.session.expired", "세션 만료");
  } else if (
    remainingMinutes !== null &&
    remainingSeconds !== null &&
    remainingMinutes <= 5
  ) {
    sessionToneClass =
      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
    sessionText = t(
      "ui.dev.session.expiring",
      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
      {
        minutes: remainingMinutes,
        seconds: remainingSeconds,
      },
    );
  } else {
    sessionText = t(
      "ui.dev.session.remaining",
      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
      {
        minutes: remainingMinutes ?? 0,
        seconds: remainingSeconds ?? 0,
      },
    );
  }

  const handleSessionExpiryToggle = () => {
    setIsSessionExpiryEnabled((prev) => {
      const next = !prev;
      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
      return next;
    });
  };

  if (auth.isLoading) {
    return (
      <div className="flex h-screen items-center justify-center bg-background">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary/30 border-t-primary" />
      </div>
    );
  }

  return (
    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
        <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
          <div className="flex items-center gap-3 md:flex-col md:items-start">
            <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
              <ShieldHalf size={20} />
            </div>
            <div>
              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
                {t("ui.admin.brand", "Baron 로그인")}
              </p>
              <h1 className="text-lg font-semibold">
                {t("ui.admin.title", "Admin Control")}
              </h1>
            </div>
          </div>
        </div>
        <nav className="px-2 pb-4 md:px-3 md:pb-8">
          <div className="flex flex-col gap-1">
            {navItems.map((item: NavItem) => {
              const { label, to, icon: Icon, isExternal } = item;
              const isOrgChart = location.pathname === "/tenants/org-chart";
              const isTenantsRoot = to === "/tenants";
              const isCustomActive = isTenantsRoot
                ? location.pathname.startsWith("/tenants") && !isOrgChart
                : to === "/"
                  ? location.pathname === "/"
                  : location.pathname.startsWith(to);

              if (isExternal) {
                return (
                  <a
                    key={to}
                    href={to}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-muted/10 hover:text-foreground"
                  >
                    <Icon size={18} />
                    <span>{t(label, label)}</span>
                  </a>
                );
              }

              return (
                <NavLink
                  key={to}
                  to={to}
                  className={() =>
                    [
                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
                      isCustomActive
                        ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
                        : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
                    ].join(" ")
                  }
                >
                  <Icon size={18} />
                  <span>{t(label, label)}</span>
                </NavLink>
              );
            })}
          </div>

          <div className="border-t border-border/50 px-3 pt-4">
            <button
              type="button"
              onClick={handleLogout}
              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
            >
              <LogOut size={18} />
              <span>{t("ui.admin.nav.logout", "Logout")}</span>
            </button>
          </div>
        </nav>
      </aside>

      <div className="relative min-w-0">
        <header className="sticky top-0 z-50 border-b border-border bg-background/90 backdrop-blur">
          <div className="flex items-center justify-between px-5 py-4 md:px-8">
            <div className="flex flex-col gap-1">
              <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
                {t("ui.admin.header.plane", "ADMIN PLANE")}
              </p>
              <span className="text-lg font-semibold">
                {t("ui.admin.header.subtitle", "Manage your organization")}
              </span>
            </div>

            <div className="flex items-center gap-2 text-sm">
              <LanguageSelector />
              <button
                type="button"
                onClick={toggleTheme}
                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
                aria-label={t("ui.common.theme_toggle", "테마 전환")}
              >
                {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
                {theme === "light"
                  ? t("ui.common.theme_light", "Light")
                  : t("ui.common.theme_dark", "Dark")}
              </button>
              {isSessionExpiryEnabled ? (
                <span
                  className={[
                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
                    sessionToneClass,
                  ].join(" ")}
                >
                  {sessionText}
                </span>
              ) : null}
              <div className="relative" ref={profileMenuRef}>
                <button
                  type="button"
                  onClick={() => setIsProfileOpen((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={isProfileOpen}
                  aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
                >
                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
                    {profileInitial}
                  </div>
                  <div className="hidden min-w-0 text-left md:block">
                    <p className="truncate text-xs font-medium text-foreground">
                      {profileName}
                    </p>
                    <p className="truncate text-[11px] text-muted-foreground">
                      {profileEmail}
                    </p>
                  </div>
                  <ChevronDown
                    size={14}
                    className={`transition-transform duration-200 ${isProfileOpen ? "rotate-180" : ""}`}
                  />
                </button>

                {isProfileOpen ? (
                  <div
                    role="menu"
                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
                  >
                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                      {t("ui.dev.profile.menu_title", "Account")}
                    </p>
                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
                      <div>
                        <p className="truncate text-sm font-semibold text-foreground">
                          {profileName}
                        </p>
                        <p className="truncate text-xs text-muted-foreground">
                          {profileEmail}
                        </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.${profileRoleKey}`,
                            profileRoleKey.toUpperCase(),
                          )}
                        </span>
                      </div>
                    </div>

                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <p className="text-sm font-medium text-foreground">
                            {t("ui.dev.session.auto_extend", "세션 만료 관리")}
                          </p>
                          <p className="text-xs text-muted-foreground">
                            {isSessionExpiryEnabled
                              ? sessionText
                              : t(
                                  "ui.dev.session.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>

                    {profile?.manageableTenants &&
                    profile.manageableTenants.length > 0 ? (
                      <div className="mt-2 rounded-lg border border-border px-3 py-3">
                        <p className="mb-2 text-xs uppercase tracking-[0.16em] text-muted-foreground">
                          {t(
                            "ui.admin.profile.manageable_tenants",
                            "Manageable Tenants",
                          )}
                        </p>
                        <div className="max-h-40 space-y-1 overflow-y-auto pr-1">
                          {profile.manageableTenants.map((tenant) => (
                            <button
                              key={tenant.id}
                              type="button"
                              onClick={() => {
                                setIsProfileOpen(false);
                                navigate(`/tenants/${tenant.id}`);
                              }}
                              className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition hover:bg-muted/20"
                            >
                              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
                                {tenant.type === "USER_GROUP" ? (
                                  <Users size={13} />
                                ) : (
                                  <Building2 size={13} />
                                )}
                              </div>
                              <div className="min-w-0">
                                <p className="truncate font-medium">
                                  {tenant.name}
                                </p>
                                <p className="truncate text-xs text-muted-foreground">
                                  {tenant.slug}
                                </p>
                              </div>
                            </button>
                          ))}
                        </div>
                      </div>
                    ) : null}

                    <button
                      type="button"
                      onClick={() => {
                        setIsProfileOpen(false);
                        navigate(
                          `/users/${profile?.id || auth.user?.profile.sub}`,
                        );
                      }}
                      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"
                    >
                      <UserIcon size={16} className="text-muted-foreground" />
                      <span>{t("ui.userfront.nav.profile", "내 정보")}</span>
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        setIsProfileOpen(false);
                        handleLogout();
                      }}
                      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"
                    >
                      <LogOut size={16} />
                      <span>{t("ui.admin.nav.logout", "Logout")}</span>
                    </button>
                  </div>
                ) : null}
              </div>
            </div>
          </div>
        </header>
        <main className="min-w-0 px-5 py-6 md:px-10 md:py-10">
          <Outlet />
        </main>
        <RoleSwitcher />
      </div>
    </div>
  );
}

export default AppLayout;