import { useEffect, useMemo, useRef, useState } from 'react'
import { visibleSections, type Permission } from './sections'
import { toTrail, writeRoute, readRoute, translateLegacyRoute, plainClick } from './route'
import { ChangePassword } from '../screens/modals/ChangePassword'
import { ChangeTheme } from '../screens/modals/ChangeTheme'
import { Configure2FA } from '../screens/modals/Configure2FA'
import { CreateApiToken } from '../screens/modals/CreateApiToken'
import { MyProfile } from '../screens/modals/MyProfile'
import { Dashboard } from '../screens/dashboard/Dashboard'
import { DnsClient } from '../screens/dnsclient/DnsClient'
import { About } from '../screens/about/About'
import { Apps } from '../screens/apps/Apps'
import { Cache } from '../screens/lists/Lists'
import { Blocking } from '../screens/blocking/Blocking'
import { Settings, type RecordSettings, type ServerInfo } from '../screens/settings/Settings'
import { Zones } from '../screens/zones/Zones'
import { Dhcp } from '../screens/dhcp/Dhcp'
import { Logs } from '../screens/logs/Logs'
import { Admin } from '../screens/admin/Admin'
import { SlotProvider } from './ChromeSlot'
import {
  HandoffContext,
  targetNode,
  type DnsClientRequest,
  type Handoff,
  type QueryLogsRequest,
} from './handoff'
import styles from './Shell.module.css'
import { Icon, type IconName } from '../ui/Icon'
import { publicUrl } from './base'
import { Menu } from '../ui/Menu'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { ThisServerName } from '../ui/ClusterNodeSelect'
import { FooterLinks } from '../ui/FooterLinks'
import { Versions } from './Versions'
import { BlockingMark } from './BlockingMark'
import { useBlockingMark } from '../screens/blocking/blocking-state'
import { Confirm } from '../ui/Confirm'
import { Notifier } from '../ui/Notifier'
import type { Notice } from '../lib/notice'
import {
  silenceUpdateNotification,
  unsilenceUpdateNotification,
  updateNotificationSilenced,
} from '../api/user'

type ModalId = 'profile' | 'password' | 'twofa' | 'token' | 'theme'

/** One glyph per section. No icon dependency: the server's CSP does not allow a
 *  CDN and an icon font would have to ship as a file in www/. */
/* The section icons live in `ui/Icon`, drawn; here we only say which one each
   section carries. Blocking carries Blocked's: it is the section that took its place. */
/*
The sidebar's three groups. It is not a new taxonomy: it is upstream's own order,
with a gap where the kind of task already changed. What you operate daily, what you
configure and what you consult.
*/
const GROUPS: { name: string; ids: string[] }[] = [
  { name: 'DNS', ids: ['dashboard', 'zones', 'cache', 'blocking', 'apps', 'dnsclient'] },
  { name: 'Server', ids: ['settings', 'dhcp', 'admin', 'logs', 'about'] },
]

/* The sidebar's own preferences, per browser, as the canvas keeps them: the rail
   and the pinned sections. A browser that refuses storage starts from the defaults. */
function stored<T>(key: string, fallback: T): T {
  try {
    const v = localStorage.getItem(key)
    return v == null ? fallback : (JSON.parse(v) as T)
  } catch {
    return fallback
  }
}
function keep(key: string, value: unknown) {
  try {
    localStorage.setItem(key, JSON.stringify(value))
  } catch {
    /* nothing to do */
  }
}

const ICONS: Record<string, IconName> = {
  dashboard: 'dashboard', zones: 'zones', cache: 'cache', blocking: 'blocked',
  apps: 'apps', dnsclient: 'dnsclient', settings: 'settings',
  dhcp: 'dhcp', admin: 'admin', logs: 'logs', about: 'about',
}

export interface ShellSession {
  token: string
  displayName: string
  username: string
  /** `Local`, `RemoteSSO` or `RemoteLDAP` since v15.5 (flat in `user/session/get`
   *  and `user/login`, WebServiceAuthApi.cs:74). */
  type?: string
  /** Obsolete since v15.5 (line 75): still sent, no longer read. */
  isSsoUser?: boolean
  /** Omitted for a `RemoteSSO` user (lines 77-82). */
  totpEnabled?: boolean
  info?: {
    version: string
    uptimestamp: string
    dnsServerDomain: string
    permissions?: Record<string, Permission>
    clusterInitialized?: boolean
    /** Only on an initialised cluster (WebServiceAuthApi.cs:104-106). */
    clusterDomain?: string
    clusterNodes?: { name: string; type: string }[]
    /* The record defaults the zone forms show (WebServiceAuthApi.cs:96-100). */
    defaultRecordTtl?: number
    defaultNsRecordTtl?: number
    defaultSoaRecordTtl?: number
    useSoaSerialDateScheme?: boolean
    dnssecValidation?: boolean
  }
}

export function Shell({
  session,
  onLogout,
  forcePasswordChange = false,
}: {
  session: ShellSession
  onLogout: () => void
  /** A factory-credentials login: Change Password opens at once with `admin` filled in (auth.js:283-284). */
  forcePasswordChange?: boolean
}) {
  const permissions = session.info?.permissions
  // Memoised: if it is recreated on every render, the `hashchange` resubscribes on each.
  const sections = useMemo(() => visibleSections(permissions), [permissions])
  /* The starting section comes from the address bar if it carries one, and only
     if not, from the first visible one. See `app/route.ts` for the reasoning. */
  /* Read once, on mount. `/allowed/` and `/blocked/` are Blocking's Rules tab now:
     the bar is rewritten (`replaceState`) before the route is read, here in the
     initialiser and not in the render body, so the side effect runs once; see
     `app/route.ts`. */
  const [initialRoute] = useState(() => {
    translateLegacyRoute()
    return readRoute(sections)
  })
  const [active, setActive] = useState(() => initialRoute?.section ?? sections[0]?.id ?? 'about')
  const [drawer, setDrawer] = useState(false)
  const [rail, setRail] = useState(() => stored<boolean>('shell.rail', false))
  const [shut, setShut] = useState<string[]>([])
  const [pins, setPins] = useState<string[]>(() => stored<string[]>('shell.pins', []))
  const [palette, setPalette] = useState(false)
  function toggleRail() {
    setRail((v) => {
      keep('shell.rail', !v)
      return !v
    })
  }
  function togglePin(id: string) {
    setPins((v) => {
      const next = v.includes(id) ? v.filter((x) => x !== id) : [...v, id]
      keep('shell.pins', next)
      return next
    })
  }
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault()
        setPalette((v) => !v)
      }
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [])
  const [modal, setModal] = useState<ModalId | null>(forcePasswordChange ? 'password' : null)
  /* The factory password travels only with the opening the login caused; from the
     user menu `showChangePasswordModal()` is called with nothing (main.js). */
  const [forcedCurrentPassword, setForcedCurrentPassword] = useState<string | undefined>(
    forcePasswordChange ? 'admin' : undefined,
  )
  const [sub, setSub] = useState<string | null>(initialRoute?.sub ?? null)
  const [displayName, setDisplayName] = useState(session.displayName)
  const [totpEnabled, setTotpEnabled] = useState(session.totpEnabled ?? false)

  /*
  Silencing the update notice (`main.js:702-732`), which this console could read
  and not write: `checkForUpdate` already refused to call the endpoint while the
  preference was on, but nothing could ever turn it on, so the branch was
  unreachable and the user had no way to stop being told. Restored on 2026-09-04,
  checking About against upstream.

  It is a per-browser preference and not a server setting, which is why it lives
  in `localStorage` and why silencing it on your laptop does not silence it
  anywhere else.
  */
  const [silenced, setSilenced] = useState(() => updateNotificationSilenced())
  const [askSilence, setAskSilence] = useState(false)
  const [chromeNotice, setChromeNotice] = useState<Notice | null>(null)
  /*
  Once hidden in a session, the mark does not come back, and that is upstream's
  behaviour, not an oversight of ours: `disableUpdateNotification` calls
  `$("#lnkUpdateAvailable").hide()` and `enableUpdateNotification` never shows it
  again. You get the notice back by logging in again. Replicated as it stands, the
  same way `Quick Add`'s substring comparison is.
  */
  const [markHidden, setMarkHidden] = useState(false)

  function silence() {
    setAskSilence(false)
    silenceUpdateNotification()
    setSilenced(true)
    setMarkHidden(true)
    setChromeNotice({
      type: 'success',
      title: 'Notification Disabled!',
      text: 'Update notification was disabled successfully.',
    })
  }

  /* Enabling does NOT re-check, exactly as upstream: it writes the preference and
     says so. The next check is the next login. */
  function unsilence() {
    unsilenceUpdateNotification()
    setSilenced(false)
    setChromeNotice({
      type: 'success',
      title: 'Notification Enabled!',
      text: 'Update notification was enabled successfully.',
    })
  }

  function open(id: ModalId) {
    setModal(id)
  }

  /*
  `sessionData.info` is not fixed at login upstream: every load of this server's
  settings, and every save or restore of them, rewrites its domain, version and
  start time and redraws the tab title, the header and About
  (`updateDnsSettingsDataAndGui`, main.js:1158-1166). Settings reports them here.
  */
  const [serverInfo, setServerInfo] = useState<ServerInfo | null>(null)
  /* The record defaults, from login until Settings loads them again
     (main.js:1194-1196 and 1228). */
  const [recordSettings, setRecordSettings] = useState<RecordSettings | null>(null)
  const info = session.info && serverInfo ? { ...session.info, ...serverInfo } : session.info

  // main.js: the document title carries the server domain and the version.
  const title = info ? `${info.dnsServerDomain} - Technitium DNS Server v${info.version}` : null
  useEffect(() => {
    if (title != null) document.title = title
  }, [title])

  const current = sections.find((s) => s.id === active) ?? sections[0]
  /* Whether blocking is off or paused, marked on its entry (`BlockingMark.tsx`). */
  const blockingNow = useBlockingMark(session.token, permissions, sections.some((s) => s.id === 'blocking'))

  /*
  The jumps other screens' row menus make (`app/handoff.ts`). The section switch
  and the request land in the same render, so the target mounts already holding
  it; the effect below then forgets it, because the target has taken what it
  needs, and coming back later through the sidebar must find a clean screen.

  A section the user cannot see is not opened: there would be no screen to land
  on.
  */
  const [pending, setPending] = useState<
    { dnsclient: DnsClientRequest } | { logs: QueryLogsRequest } | null
  >(null)
  useEffect(() => {
    if (pending != null) setPending(null)
  }, [pending])

  const handoff = useMemo<Handoff>(() => {
    const visible = (id: string) => sections.some((s) => s.id === id)
    return {
      queryDnsServer(domain, type, node) {
        if (!visible('dnsclient')) return
        setPending({ dnsclient: { domain, type: type ?? 'A', node: targetNode(node) } })
        setActive('dnsclient')
        setSub(null)
        setDrawer(false)
      },
      showQueryLogs(domain, clientIp, node, filters) {
        if (!visible('logs')) return
        setPending({ logs: { domain, clientIp, node: targetNode(node), ...(filters != null ? { filters } : {}) } })
        setActive('logs')
        setSub('Query Logs')
        setDrawer(false)
      },
      canShowQueryLogs: visible('logs'),
    }
  }, [sections])

  /*
  The effective sub. A section with sub-sections is ALWAYS in one of them, so
  `null` means "the first one".

  It is resolved here and not in each branch (there were five loose
  `sub ?? 'General'`, and the sidebar repeated the same workaround to decide what
  to mark) because a rule spread around is precisely the one that goes out of
  sync: the menu said "General" and the address bar said `/settings/`, which is
  half a page.
  */
  const currentSub = current?.subs != null ? (sub ?? current.subs[0] ?? null) : null

  /*
  The URL follows the state, and the state follows the URL. The guard is in
  `writeRoute`, which does not touch history if the route is already the current
  one: without it, responding to `popstate` by setting the state would write the
  route again.
  */
  // The first write normalises the URL and must leave no history entry.
  const firstRender = useRef(true)

  const activeRef = useRef({ section: current?.id ?? 'about', sub })
  useEffect(() => {
    if (current == null) return
    activeRef.current = { section: current.id, sub: currentSub }
    writeRoute({ section: current.id, sub: currentSub }, firstRender.current)
    firstRender.current = false
  }, [current, sub, currentSub])

  useEffect(() => {
    function onChanged() {
      translateLegacyRoute()
      const r = readRoute(sections)
      if (r == null) {
        // A route that does not resolve left the bar and the screen saying different
        // things. The screen rules: the URL is corrected.
        writeRoute({ section: activeRef.current.section, sub: activeRef.current.sub }, true)
        return
      }
      /*
      A half address (`/settings/`, with no sub) is completed here and not in the
      effect that writes the route: on going "back" the state does not change
      (`sub` was already `null`), so that effect does not run again and the bar was
      left saying half a page.

      And it is completed by replacing: pushing would leave a new entry pointing at
      where we already are, and the back button would go round in circles.
      */
      const section = sections.find((x) => x.id === r.section)
      const own = r.sub ?? section?.subs?.[0] ?? null
      if (own !== r.sub) writeRoute({ section: r.section, sub: own }, true)

      setActive((v) => (v === r.section ? v : r.section))
      setSub((v) => (v === own ? v : own))
    }
    window.addEventListener('popstate', onChanged)
    return () => window.removeEventListener('popstate', onChanged)
  }, [sections])

  const pinned = sections.filter((sec) => pins.includes(sec.id))

  function go(id: string, to: string | null) {
    setActive(id)
    setSub(to)
    setDrawer(false)
    setPalette(false)
  }

  function navRow(sec: (typeof sections)[number], where: 'pin' | 'main') {
    const here = sec.id === current?.id
    const first = sec.subs?.[0] ?? null
    const pin = pins.includes(sec.id)
    return (
      <div className={styles.nrow} key={`${where}-${sec.id}`}>
        <a
          className={styles.s}
          href={toTrail({ section: sec.id, sub: first })}
          data-active={here}
          aria-current={here ? 'page' : undefined}
          title={sec.id === 'blocking' ? blockingNow?.label : rail ? sec.label : undefined}
          onClick={(e) => {
            if (!plainClick(e)) return
            e.preventDefault()
            go(sec.id, first)
          }}
        >
          <span className={styles.ico}>
            <Icon name={ICONS[sec.id] ?? 'about'} size={16} />
          </span>
          <span className={styles.lbl}>{sec.label}</span>
          {sec.id === 'blocking' && <BlockingMark mark={blockingNow} />}
        </a>
        <button
          type="button"
          className={styles.star}
          data-on={pin}
          aria-pressed={pin}
          aria-label={`${pin ? 'Unpin' : 'Pin'} ${sec.label}`}
          onClick={() => togglePin(sec.id)}
        >
          {pin ? '\u2605' : '\u2606'}
        </button>
      </div>
    )
  }

  const group = GROUPS.find((g) => current != null && g.ids.includes(current.id))?.name
  const crumbs = ['Home', group, current?.label, currentSub].filter((x): x is string => !!x)

  return (
    <HandoffContext.Provider value={handoff}>
    <ThisServerName.Provider value={info?.dnsServerDomain ?? session.info?.dnsServerDomain ?? ''}>
    <SlotProvider>
      {(slot) => (
    <div className={styles.shell} data-rail={rail}>
      {drawer && (
        <button
          type="button"
          className={styles.veil}
          aria-label="Close menu"
          onClick={() => setDrawer(false)}
        />
      )}

      <aside className={styles.side} data-open={drawer}>
        <div className={styles.sbrand}>
          <img className={styles.mark} src={publicUrl('img/logo.png')} alt="" width={32} height={32} />
          <span className={`${styles.lbl} ${styles.bname}`}>
            <b>Technitium DNS</b>
            <small>console {__CONSOLE_VERSION__}</small>
          </span>
          <span className={`${styles.lbl} ${styles.updown}`} aria-hidden="true"><Icon name="chevronDown" size={14} /></span>
        </div>
        <button type="button" className={styles.sbsearch} onClick={() => setPalette(true)} aria-label="Search">
          <Icon name="menu" size={14} />
          <span className={styles.lbl}>Search and commands</span>
          <kbd className={styles.lbl}>{'\u2318K'}</kbd>
        </button>
        <nav className={styles.slist} role="navigation" aria-label="Sections">
          {/*
          This is a navigation menu, and until now it claimed to be a `tablist`.

          It was declared as tabs when the console had no addresses: twelve
          `role="tab"` over a single panel. Once it gained real routes
          (`app/route.ts`) the description stopped being true (the ARIA guidance is
          explicit: if activating the element leads to another URL, it is a link,
          not a tab), and on top of that the sub-sections hung INSIDE the `tablist`
          as loose buttons, which is a child that role does not allow. It announced
          "tab 3 of 12" and navigated.

          Now they are links with real `href`s: they open in a new tab, they are
          copied and bookmarked. The plain click is intercepted by the application
          (there is no reload); the modifier click is passed through to the
          browser, which is what the routes existing as files is for. The active
          section is marked with `data-active` (that is visual state) and
          `aria-current="page"` is reserved for ONE thing: the page you are on,
          which is the sub-section when there is one.
          */}
          {pinned.length > 0 && (
            <div className={styles.group}>
              <div className={styles.grph}>Pinned</div>
              {pinned.map((sec) => navRow(sec, 'pin'))}
            </div>
          )}
          {GROUPS.map((group) => {
            const items = sections.filter((sec) => group.ids.includes(sec.id))
            if (items.length === 0) return null
            const closed = shut.includes(group.name)
            return (
              <div className={styles.group} key={group.name}>
                <button
                  type="button"
                  className={styles.grph}
                  aria-expanded={!closed}
                  onClick={() => setShut((v) => (closed ? v.filter((x) => x !== group.name) : [...v, group.name]))}
                >
                  {group.name}
                  <span className={styles.caret} data-shut={closed}><Icon name="chevronDown" size={12} /></span>
                </button>
                {!closed && items.map((sec) => navRow(sec, 'main'))}
              </div>
            )
          })}
        </nav>

        {/* The server and the account, at the foot. When narrow you reach it via the drawer. */}
        <div className={styles.footSide}>
          {/*
          Upstream's footer links, recovered.

          Upstream has them in a `div#footer` hanging off the `body`, so they are
          visible on ALL its screens, the login one included: Technitium, Blog,
          Donate, DNS Client and GitHub. There were none here, and two of them
          (technitium.com and dnsclient.net) appeared nowhere else in the console:
          they had been lost entirely.

          "About" is not repeated because in this redesign it is a sidebar section,
          right above.
          */}
          {/*
          What is running, and whether there is anything newer. The server's
          domain heads it because the block is about that server, which is the
          pairing upstream makes in its panel title.
          */}
          <Menu
            label={displayName}
            text={displayName}
            anchor="left"
            asRow
            lead={<span className={styles.av} aria-hidden="true">{displayName.slice(0, 2).toUpperCase()}</span>}
          >
            {(close) => (
              <>
                <button type="button" onClick={() => { close(); open('profile') }}>
                  My Profile
                </button>
                {/* main.js:71-87 (v15.5.1) switches on `sessionData.type`:
                    `RemoteSSO` hides both, `RemoteLDAP` hides only the password
                    (the directory owns it, the 2FA is still this server's) and
                    `Local` or anything else shows both. */}
                {session.type !== 'RemoteSSO' && session.type !== 'RemoteLDAP' && (
                  <button type="button" onClick={() => { close(); open('password') }}>
                    Change Password
                  </button>
                )}
                {session.type !== 'RemoteSSO' && (
                  <button type="button" onClick={() => { close(); open('twofa') }}>
                    Configure 2FA
                  </button>
                )}
                <button type="button" onClick={() => { close(); open('token') }}>
                  Create API Token
                </button>
                {/* index.html:71: after the account's own entries, before the
                    update notification. */}
                <button type="button" onClick={() => { close(); open('theme') }}>
                  Change Theme
                </button>
                {/*
                One entry and not two: upstream declares both and hides one
                (`index.html:72-73`, `initUpdateNotificationMenu`), which is how
                you write a toggle in jQuery. The literal of each is upstream's.
                */}
                {silenced ? (
                  <button type="button" onClick={() => { close(); unsilence() }}>
                    Enable Update Notification
                  </button>
                ) : (
                  <button type="button" onClick={() => { close(); setAskSilence(true) }}>
                    Disable Update Notification
                  </button>
                )}
                <button type="button" onClick={() => { close(); onLogout() }}>
                  Logout
                </button>
              </>
            )}
          </Menu>
        </div>
      </aside>

      <div className={styles.main}>
        {/*
        On a WIDE screen there is no header: it only carried the server domain and
        the account menu, both pinned to the right edge, and it measured 1224×52
        with 78 % of the width empty (952 px out of 1224), pushing every section's
        title down to `y=76`. Both things move down to the foot of the sidebar,
        which had 377 px free, 42 % of its height.

        On a NARROW screen it is needed, because the sidebar is a closed drawer and
        its trigger has to live outside.
        */}
        <header className={styles.rtop}>
          <button
            type="button"
            className={styles.hamburger}
            aria-label="Menu"
            aria-expanded={drawer}
            onClick={() => (window.matchMedia('(max-width: 900px)').matches ? setDrawer((v) => !v) : toggleRail())}
          >
            <Icon name="menu" size={18} />
          </button>
          <div className={styles.crumbs} role="group" aria-label="Breadcrumb">
            {crumbs.map((c, i) => (
              <span key={i} data-last={i === crumbs.length - 1}>{c}</span>
            ))}
          </div>
          <Popover>
            <PopoverTrigger className={styles.status} data-attention={blockingNow != null} aria-label="Server status">
              <i className={styles.pdot} data-tone={blockingNow?.tone ?? 'ok'} />
              <span className={styles.lbl}>{blockingNow != null ? 'Attention' : (info?.dnsServerDomain ?? 'Server')}</span>
            </PopoverTrigger>
            <PopoverContent align="end" className={styles.pop}>
              <dl>
                <dt>Server</dt><dd>{info?.dnsServerDomain ?? '-'}</dd>
                <dt>Version</dt><dd>{info?.version ?? '-'}</dd>
                <dt>Up since</dt><dd>{info?.uptimestamp ? new Date(info.uptimestamp).toLocaleString() : '-'}</dd>
                <dt>Blocking</dt><dd>{blockingNow ? blockingNow.label.replace(/^Blocking,?\s*/, '') : 'Enabled'}</dd>
              </dl>
              <Versions
            token={session.token}
            serverVersion={info?.version}
            domain={info?.dnsServerDomain}
            markHidden={markHidden}
            canCheckConsole={permissions?.DnsClient?.canView === true}
          />

            </PopoverContent>
          </Popover>
        </header>

        {/* Neither `tabpanel` nor `aria-labelledby`: ever since each section has its
            own URL this is not a panel being switched, it is the page. */}
        <main className={styles.body} id="panel-section">
        {/*
      The chrome slot: the chrome provides the PLACE, the screen provides the
      control. See `ChromeSlot.tsx`: the node selector belongs to each screen,
      with its memory and its options, and none of them hears about the others.

      It stays empty while nobody uses it, and then it takes up nothing: it is a
      `div` with no content.
        */}
        <div ref={slot} className={styles.chromeSlot} />
        {/* The chrome's own alert slot. Upstream's `showAlert` with no
            destination is a page-level alert, and until now the chrome had
            nowhere to put one. */}
        <Notifier notice={chromeNotice} onClose={() => setChromeNotice(null)} />
        {current?.id === 'dashboard' ? (
          <Dashboard
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
          />
        ) : current?.id === 'dnsclient' ? (
          <DnsClient
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            request={pending != null && 'dnsclient' in pending ? pending.dnsclient : undefined}
          />
        ) : current?.id === 'about' ? (
          <About info={info} />
        ) : current?.id === 'apps' ? (
          <Apps token={session.token} />
        ) : current?.id === 'cache' ? (
          <Cache token={session.token} nodes={session.info?.clusterNodes ?? []} clusterInitialised={session.info?.clusterInitialized === true} />
        ) : current?.id === 'blocking' ? (
          <Blocking
            token={session.token}
            sub={currentSub}
            onSubChange={setSub}
            permissions={permissions}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            serverDomain={info?.dnsServerDomain}
          />
        ) : current?.id === 'zones' ? (
          <Zones
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            canModify={permissions?.Zones?.canModify !== false}
            canDelete={permissions?.Zones?.canDelete !== false}
            clusterDomain={session.info?.clusterDomain}
            useSoaSerialDateScheme={(recordSettings ?? session.info)?.useSoaSerialDateScheme === true}
            dnssecValidation={(recordSettings ?? session.info)?.dnssecValidation !== false}
            recordTtls={{
              defaultRecordTtl: (recordSettings ?? session.info)?.defaultRecordTtl ?? 3600,
              defaultNsRecordTtl: (recordSettings ?? session.info)?.defaultNsRecordTtl ?? 14400,
              defaultSoaRecordTtl: (recordSettings ?? session.info)?.defaultSoaRecordTtl ?? 900,
            }}
          />
        ) : current?.id === 'dhcp' ? (
          <Dhcp
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            sub={currentSub ?? 'Leases'}
            onSubChange={setSub}
            canModify={permissions?.DhcpServer?.canModify !== false}
            canDelete={permissions?.DhcpServer?.canDelete !== false}
          />
        ) : current?.id === 'logs' ? (
          /* "Delete All Stats" lives on the Logs screen but asks for the
             Dashboard's permission (WebServiceLogsApi.cs:135). Not an oversight. */
          <Logs
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            sub={currentSub ?? 'View Logs'}
            onSubChange={setSub}
            canDeleteLogs={permissions?.Logs?.canDelete !== false}
            canDeleteStats={permissions?.Dashboard?.canDelete !== false}
            request={pending != null && 'logs' in pending ? pending.logs : undefined}
          />
        ) : current?.id === 'admin' ? (
          /* No permission props on purpose: upstream hides and disables nothing
             inside Administration, only the whole section (main.js:165). */
          <Admin token={session.token} sub={currentSub ?? 'Sessions'} onSubChange={setSub} />
        ) : current?.id === 'settings' ? (
          /* main.js:906-930: three different permissions in a single bar:
             saving requires Settings.canModify, flushing the cache
             Cache.canDelete, and backup/restore Settings.canDelete. */
          <Settings
            token={session.token}
            nodes={session.info?.clusterNodes ?? []}
            clusterInitialised={session.info?.clusterInitialized === true}
            sub={currentSub ?? 'General'}
            onSubChange={setSub}
            canModify={permissions?.Settings?.canModify !== false}
            canFlushCache={permissions?.Cache?.canDelete !== false}
            canBackup={permissions?.Settings?.canDelete !== false}
            serverDomain={session.info?.dnsServerDomain}
            onServerInfo={setServerInfo}
            onRecordSettings={setRecordSettings}
          />
        ) : null}
        </main>

        {/*
        Upstream's links, at the foot of the page and not in the side panel.

        Upstream hangs them off a `div#footer` on the `body`, below everything:
        they are destinations you go to when you have finished, not navigation you
        use while working. In the side panel they sat between the sections and the
        account, competing with both; here they close the page, which is where
        they were.
        */}
        <footer className={styles.footMain}>
          <FooterLinks />
        </footer>
      </div>

      <CommandDialog open={palette} onOpenChange={setPalette} title="Search" description="Go to a section or an account action">
        <Command>
          <CommandInput placeholder="Go to..." />
          <CommandList>
            <CommandEmpty>Nothing found.</CommandEmpty>
            <CommandGroup heading="Sections">
              {sections.flatMap((sec) => [
                <CommandItem key={sec.id} value={sec.label} onSelect={() => go(sec.id, sec.subs?.[0] ?? null)}>
                  <Icon name={ICONS[sec.id] ?? 'about'} size={16} /> {sec.label}
                </CommandItem>,
                ...(sec.subs ?? []).map((sb) => (
                  <CommandItem key={`${sec.id}/${sb}`} value={`${sec.label} ${sb}`} onSelect={() => go(sec.id, sb)}>
                    <Icon name="chevronRight" size={14} /> {sec.label} / {sb}
                  </CommandItem>
                )),
              ])}
            </CommandGroup>
            <CommandGroup heading="Account">
              <CommandItem value="My Profile" onSelect={() => { setPalette(false); open('profile') }}>My Profile</CommandItem>
              <CommandItem value="Change Theme" onSelect={() => { setPalette(false); open('theme') }}>Change Theme</CommandItem>
              <CommandItem value="Logout" onSelect={() => { setPalette(false); onLogout() }}>Logout</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>

      <MyProfile
        open={modal === 'profile'}
        onOpenChange={(o) => setModal(o ? 'profile' : null)}
        token={session.token}
        onSaved={setDisplayName}
        onNotice={setChromeNotice}
      />
      <ChangePassword
        open={modal === 'password'}
        onOpenChange={(o) => {
          setModal(o ? 'password' : null)
          if (!o) setForcedCurrentPassword(undefined)
        }}
        totpEnabled={totpEnabled}
        token={session.token}
        username={session.username}
        currentPassword={forcedCurrentPassword}
        onNotice={setChromeNotice}
      />
      <Configure2FA
        open={modal === 'twofa'}
        onOpenChange={(o) => setModal(o ? 'twofa' : null)}
        token={session.token}
        username={session.username}
        onChanged={setTotpEnabled}
        onNotice={setChromeNotice}
      />
      <CreateApiToken
        open={modal === 'token'}
        onOpenChange={(o) => setModal(o ? 'token' : null)}
        username={session.username}
        token={session.token}
      />
      <ChangeTheme
        open={modal === 'theme'}
        onOpenChange={(o) => setModal(o ? 'theme' : null)}
      />

      {/* Upstream asks with a native `confirm()`; this console asks with its own,
          and the sentence is upstream's, whole. */}
      <Confirm
        open={askSilence}
        title="Disable Update Notification"
        text={
          'Disabling update notification will prevent the Web Console from showing new update notification when you login. You will have to manually find out if a new update is available.\n\nAre you sure you want to disable update notification?'
        }
        label="Disable"
        onClose={() => setAskSilence(false)}
        onConfirm={silence}
      />
    </div>
      )}
    </SlotProvider>
    </ThisServerName.Provider>
    </HandoffContext.Provider>
  )
}