import { useRef, useState, useEffect } from "react";
import { Bell, Check, LogOut, Settings, UserCircle } from "lucide-react";
import type { ActingContextRuntimeUiCapability, ApiSettings, AuthInfo, AuthTenantMembership, AuthUpdate, LoginResponse, SearchRuntimeUiCapability, ViewsRuntimeUiCapability } from "../types";
import HelpMenu from "./HelpMenu";
import LanguageMenu from "./LanguageMenu";
import LoginModal from "../features/auth/LoginModal";
import DismissibleAlert from "../components/DismissibleAlert";
import { useGuardedNavigate, useUnsavedChanges } from "../components/UnsavedChangesGuard";
import { useSharedNotificationSummary } from "../api/notificationSummary";
import { logout, switchTenant } from "../api/auth";
import { hasAnyScope } from "../utils/permissions";
import { usePlatformLanguage } from "../i18n/LanguageContext";
import { usePlatformModules, usePlatformUiCapability } from "../platform/ModuleContext";
import { useEffectiveView } from "../platform/ViewContext";

type Props = {
  settings: ApiSettings;
  auth: AuthInfo | null;
  onSettingsChange: (settings: ApiSettings) => void;
  onAuthChange: (auth: AuthUpdate | null, accessToken?: string) => void;
  maintenanceMode?: {enabled: boolean;message?: string | null;};
  backendReachable?: boolean;
};

export default function Titlebar({ settings, auth, onAuthChange, maintenanceMode, backendReachable = true }: Props) {
  const navigate = useGuardedNavigate();
  const { requestNavigation } = useUnsavedChanges();
  const [accountOpen, setAccountOpen] = useState(false);
  const [tenantOpen, setTenantOpen] = useState(false);
  const [loginOpen, setLoginOpen] = useState(false);
  const [switchingTenantId, setSwitchingTenantId] = useState<string | null>(null);
  const [tenantError, setTenantError] = useState("");
  const accountRef = useRef<HTMLDivElement>(null);
  const tenantRef = useRef<HTMLDivElement>(null);
  const { translateText } = usePlatformLanguage();
  const modules = usePlatformModules();
  const projection = useEffectiveView();
  const viewsRuntime = usePlatformUiCapability<ViewsRuntimeUiCapability>("views.runtime");
  const ViewSelector = viewsRuntime?.Selector ?? null;
  const actingRuntime = usePlatformUiCapability<ActingContextRuntimeUiCapability>("access.actingContext");
  const ActingContextSelector = actingRuntime?.Selector ?? null;
  const searchRuntime = usePlatformUiCapability<SearchRuntimeUiCapability>("search.runtime");
  const GlobalSearch = searchRuntime?.GlobalSearch ?? null;
  const canUseGlobalSearch = Boolean(
    searchRuntime &&
    (
      !searchRuntime.anyOf?.length ||
      hasAnyScope(auth, searchRuntime.anyOf)
    )
  );
  const showGlobalSearch = Boolean(auth && GlobalSearch && canUseGlobalSearch);

  const activeTenant = auth?.active_tenant ?? auth?.tenant ?? null;
  const tenants = auth?.tenants ?? (activeTenant ? [activeTenant] : []);
  const displayUserName = auth?.user?.display_name || auth?.user?.email || translateText("i18n:govoplan-core.sign_in.ada2e9e9");
  const canSwitchTenant = tenants.length > 1;
  const canAdministerTenants = hasAnyScope(auth, [
  "system:tenants:read",
  "system:tenants:create",
  "system:tenants:update",
  "system:tenants:suspend"]
  );
  const showTenantControl = Boolean(activeTenant && (canSwitchTenant || canAdministerTenants));
  const showContextSelectors = Boolean(
    auth && ((activeTenant && showTenantControl) || ViewSelector || ActingContextSelector)
  );
  const notificationsAvailable = modules.some((module) => module.id === "notifications" && module.routes?.some((route) => route.path === "/notifications"));
  const notificationSummary = useSharedNotificationSummary(settings, {
    enabled: Boolean(auth && notificationsAvailable),
    scopeKey: "current-session",
    intervalMs: 60_000,
    refreshKey: `${activeTenant?.id ?? ""}:${auth?.user?.id ?? ""}`
  }).summary;
  const unreadNotificationCount = notificationSummary?.show_unread_badge === false ?
    0 :
    Math.max(0, Number(notificationSummary?.unread) || 0);
  const notificationBadgeLabel = unreadNotificationCount > 99 ? "99+" : String(unreadNotificationCount);

  useEffect(() => {
    function onPointerDown(event: MouseEvent) {
      const target = event.target as Node;
      if (accountRef.current && !accountRef.current.contains(target)) {
        setAccountOpen(false);
      }
      if (tenantRef.current && !tenantRef.current.contains(target)) {
        setTenantOpen(false);
      }
    }
    window.addEventListener("mousedown", onPointerDown);
    return () => window.removeEventListener("mousedown", onPointerDown);
  }, []);

  function handleLogin(response: LoginResponse) {
    onAuthChange(response, "");
  }

  async function performLogout() {
    try {
      await logout(settings);
    } catch {

      // Logout is best effort; clear local session either way.
    }
    onAuthChange(null, "");
    setAccountOpen(false);
  }

  async function performTenantSelect(tenant: AuthTenantMembership) {
    setSwitchingTenantId(tenant.id);
    setTenantError("");
    try {
      const next = await switchTenant(settings, tenant.id);
      // Keep the current URL. The tenant-keyed route tree reloads in the new
      // context; permission and resource boundaries then retain the page or
      // fall back to the nearest accessible parent.
      onAuthChange(next);
      setTenantOpen(false);
    } catch (error) {
      setTenantError(error instanceof Error ? error.message : translateText("i18n:govoplan-core.tenant_switch_failed.c325b20b"));
    } finally {
      setSwitchingTenantId(null);
    }
  }

  function handleLogout() {
    requestNavigation(() => {void performLogout();});
  }

  function handleTenantSelect(tenant: AuthTenantMembership) {
    if (!auth || tenant.id === activeTenant?.id || switchingTenantId) {
      setTenantOpen(false);
      return;
    }
    requestNavigation(() => {void performTenantSelect(tenant);});
  }

  function handleAccountSettings() {
    setAccountOpen(false);
    navigate("/settings?section=profile");
  }

  function openMaintenanceSettings() {
    navigate("/admin?section=system-settings");
  }

  function openNotificationCenter() {
    navigate("/notifications");
  }

  return (
    <header className={`titlebar${showGlobalSearch ? " has-global-search" : ""}`}>
      {!backendReachable ?
      <div
        className="backend-offline-topbar-alert"
        role="status"
        aria-live="polite"
        title="System not reachable / offline!">
          System not reachable / offline!
        </div> :
      maintenanceMode?.enabled &&
      <button
        type="button"
        className="maintenance-topbar-link"
        title={maintenanceMode.message || translateText("i18n:govoplan-core.open_maintenance_mode_settings.99b41249")}
        onClick={openMaintenanceSettings}>
        
          {translateText("i18n:govoplan-core.maintenance_mode_enabled.4fb4a37d")}
        </button>
      }

      <div className="titlebar-leading">
        {auth && showContextSelectors &&
        <div className="titlebar-context-selectors">
          {activeTenant && showTenantControl &&
          <div className="tenant-selector" ref={tenantRef}>
            <span className="tenant-label">{translateText("i18n:govoplan-core.tenant_label_prefix")}</span>
            {canSwitchTenant ?
          <>
                <button className="tenant-name-button" onClick={() => setTenantOpen(!tenantOpen)}>
                  <strong>{activeTenant.name}</strong>
                  <span className="tenant-caret">▾</span>
                </button>
                {tenantOpen &&
            <div className="dropdown-menu tenant-menu">
                    {tenants.map((tenant) => {
                const active = tenant.id === activeTenant.id;
                return (
                  <button
                    key={tenant.id}
                    className={`dropdown-item ${active ? "active" : ""}`}
                    onClick={() => void handleTenantSelect(tenant)}
                    disabled={Boolean(switchingTenantId)}>

                          <span>{switchingTenantId === tenant.id ? translateText("i18n:govoplan-core.switching.ca40b0ec") : tenant.name}</span>
                          {active && <Check size={16} />}
                        </button>);

              })}
                    {tenantError && <DismissibleAlert tone="danger" compact dismissible={false} className="dropdown-error">{tenantError}</DismissibleAlert>}
                  </div>
            }
              </> :

          <strong>{activeTenant.name}</strong>
          }
          </div>
          }
          {ViewSelector &&
          <ViewSelector settings={settings} auth={auth} projection={projection} />
          }
          {ActingContextSelector &&
          <ActingContextSelector settings={settings} auth={auth} onAuthChange={onAuthChange} />
          }
        </div>
        }
      </div>

      {auth && GlobalSearch && canUseGlobalSearch &&
      <div className="titlebar-global-search">
          <GlobalSearch settings={settings} auth={auth} />
        </div>
      }

      <div className="titlebar-actions">
        <LanguageMenu />
        <HelpMenu auth={auth} />

        {auth && notificationsAvailable &&
        <button className="titlebar-icon-link titlebar-notification-button" onClick={openNotificationCenter} title={translateText("i18n:govoplan-core.notifications.753a22b2")} aria-label={translateText("i18n:govoplan-core.notifications.753a22b2")}>
            <Bell size={18} />
            {unreadNotificationCount > 0 &&
          <span className="titlebar-notification-badge" aria-label={`${unreadNotificationCount} unread`}>
                {notificationBadgeLabel}
              </span>
          }
          </button>
        }

        <div className="context-menu-wrap" ref={accountRef}>
          <button className="account-pill" onClick={() => setAccountOpen(!accountOpen)}>
            <UserCircle size={22} />
            <span>{displayUserName}</span>
            <span className="tenant-caret">▾</span>
          </button>
          {accountOpen &&
          <div className="dropdown-menu account-menu">
              {auth ?
            <>
                  {auth.user &&
                  <div className="account-menu-header">
                    <strong>{auth.user.display_name || auth.user.email}</strong>
                    <span>{auth.user.email}</span>
                  </div>
                  }
                  <button className="dropdown-item" onClick={handleAccountSettings}><Settings size={16} /> {translateText("i18n:govoplan-core.account_settings.82cf8a5f")}</button>
                  <button className="dropdown-item" onClick={handleLogout}><LogOut size={16} /> {translateText("i18n:govoplan-core.sign_out.dc1649a1")}</button>
                </> :

            <button className="dropdown-item" onClick={() => {setLoginOpen(true);setAccountOpen(false);}}><UserCircle size={16} /> {translateText("i18n:govoplan-core.sign_in.ada2e9e9")}</button>
            }
            </div>
          }
        </div>
      </div>

      {loginOpen && <LoginModal settings={settings} onClose={() => setLoginOpen(false)} onLogin={handleLogin} />}
    </header>);

}
