import { BadgeCheck, LogOut, Moon, ShieldHalf, Sun } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useAuth } from "react-oidc-context";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { t } from "../../lib/i18n";
import LanguageSelector from "../common/LanguageSelector";
import { Toaster } from "../ui/toaster";

const navItems = [
  {
    labelKey: "ui.dev.nav.clients",
    labelFallback: "Clients",
    to: "/clients",
    icon: ShieldHalf,
  },
];

function AppLayout() {
  const auth = useAuth();
  const navigate = useNavigate();
  const profileMenuRef = useRef<HTMLDivElement>(null);
  const [theme, setTheme] = useState<"light" | "dark">(() => {
    const stored = window.localStorage.getItem("admin_theme");
    return stored === "dark" ? "dark" : "light";
  });
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
  const [isRefreshingSession, setIsRefreshingSession] = useState(false);
  const [nowMs, setNowMs] = useState(() => Date.now());

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

  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 timer = window.setInterval(() => {
      setNowMs(Date.now());
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  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);
    };
  }, []);

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

  const profileName =
    auth.user?.profile?.name?.toString().trim() ||
    auth.user?.profile?.preferred_username?.toString().trim() ||
    auth.user?.profile?.nickname?.toString().trim() ||
    t("ui.dev.profile.unknown_name", "Unknown User");
  const profileEmail =
    auth.user?.profile?.email?.toString().trim() ||
    t("ui.dev.profile.unknown_email", "unknown@example.com");
  const profileInitial = profileName.charAt(0).toUpperCase();
  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 handleRefreshSessionExpiry = async () => {
    if (isRefreshingSession) {
      return;
    }
    setIsRefreshingSession(true);
    try {
      await auth.signinSilent();
      setNowMs(Date.now());
      setIsProfileMenuOpen(false);
    } catch (error) {
      console.error("Failed to refresh session expiry:", error);
    } finally {
      setIsRefreshingSession(false);
    }
  };

  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 flex flex-col justify-between">
        <div>
          <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.dev.brand", "Baron 로그인")}
                </p>
                <h1 className="text-lg font-semibold">
                  {t("ui.dev.console_title", "Developer Console")}
                </h1>
              </div>
            </div>
            <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
              <BadgeCheck size={14} />
              {t("ui.dev.scope_badge", "Scoped to /dev")}
            </div>
          </div>
          <nav className="px-2 pb-4 md:px-3 md:pb-8">
            <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
              <span className="rounded-full border border-border px-3 py-1">
                {t("ui.dev.env_badge", "Env: dev")}
              </span>
            </div>
            <div className="flex flex-col gap-1">
              {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
                <NavLink
                  key={to}
                  to={to}
                  className={({ isActive }) =>
                    [
                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
                      isActive
                        ? "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(labelKey, labelFallback)}</span>
                </NavLink>
              ))}
            </div>
          </nav>
        </div>

        <div>
          <div className="px-3 pt-4 border-t border-border/50">
            <button
              type="button"
              onClick={handleLogout}
              className="w-full flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
            >
              <LogOut size={18} />
              <span>{t("ui.dev.nav.logout", "Logout")}</span>
            </button>
          </div>
          <div className="hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block">
            <p>{t("msg.dev.sidebar.notice", "개발자 전용 콘솔입니다.")}</p>
            <p>
              {t(
                "msg.dev.sidebar.notice_detail",
                "클라이언트 애플리케이션 등록 및 관리를 수행할 수 있습니다.",
              )}
            </p>
          </div>
        </div>
      </aside>

      <div className="relative">
        <header className="sticky top-0 z-20 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.dev.header.plane", "Dev Plane")}
              </p>
              <span className="text-lg font-semibold">
                {t("ui.dev.header.subtitle", "Manage your applications")}
              </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>
              <span
                className={[
                  "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
                  sessionToneClass,
                ].join(" ")}
              >
                {sessionText}
              </span>
              <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", "계정 메뉴 열기")}
                >
                  <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>
                </button>
                {isProfileMenuOpen ? (
                  <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 rounded-lg border border-border px-3 py-2">
                      <p className="truncate text-sm font-semibold text-foreground">
                        {profileName}
                      </p>
                      <p className="truncate text-xs text-muted-foreground">
                        {profileEmail}
                      </p>
                    </div>
                    <button
                      type="button"
                      role="menuitem"
                      className="mt-2 w-full rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20 disabled:cursor-not-allowed disabled:opacity-60"
                      onClick={handleRefreshSessionExpiry}
                      disabled={isRefreshingSession}
                    >
                      {isRefreshingSession
                        ? t(
                            "ui.dev.session.refreshing",
                            "세션 만료 시간 갱신 중...",
                          )
                        : t("ui.dev.session.refresh", "세션 만료 시간 갱신")}
                    </button>
                  </div>
                ) : null}
              </div>
            </div>
          </div>
        </header>
        <main className="px-5 py-6 md:px-10 md:py-10">
          <Outlet />
        </main>
      </div>
      <Toaster />
    </div>
  );
}

export default AppLayout;