'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
import { Logo } from '@/components/chrome/Logo';
import { TimeToggle } from '@/components/chrome/TimeToggle';
import { AdminError, adminFetch, getAdminToken, setAdminToken } from '@/lib/admin-fetch';

const NAV: [string, string][] = [
  ['/admin', 'Overview'],
  ['/admin/targets', 'Targets'],
  ['/admin/probes', 'Probes'],
  ['/admin/config', 'Scoring config'],
  ['/admin/baselines', 'Baselines'],
  ['/admin/raw', 'Raw explorer'],
  ['/admin/incidents', 'Incidents review'],
  ['/admin/annotations', 'Annotations'],
  ['/admin/replay', 'Replay'],
  ['/admin/boost', 'Boost'],
];

const AuthCtx = createContext<{ authed: boolean; logout: () => void }>({ authed: false, logout: () => {} });
export const useAdminAuth = () => useContext(AuthCtx);

/** Token gate: the token lives in sessionStorage only and is validated against /api/admin/overview. */
export function AdminShell({ children }: { children: ReactNode }) {
  const [state, setState] = useState<'checking' | 'locked' | 'ok'>('checking');
  const [input, setInput] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const path = usePathname();

  const verify = useCallback(async (token: string) => {
    setAdminToken(token);
    try {
      await adminFetch('/overview');
      setState('ok');
      setErr(null);
    } catch (e) {
      setAdminToken('');
      setState('locked');
      setErr(e instanceof AdminError && e.status === 401 ? 'Invalid token.' : 'Admin API unreachable.');
    }
  }, []);

  useEffect(() => {
    const t = getAdminToken();
    // Defer to a microtask so no state is set synchronously inside the effect body.
    void Promise.resolve().then(() => (t ? verify(t) : setState('locked')));
  }, [verify]);

  const logout = useCallback(() => {
    setAdminToken('');
    setState('locked');
  }, []);

  return (
    <AuthCtx.Provider value={{ authed: state === 'ok', logout }}>
      <div className="flex min-h-screen flex-col">
        <header className="border-b border-line">
          <div className="mx-auto flex h-[var(--header-h)] max-w-[1600px] items-center gap-4 px-3 sm:px-5">
            <Link href="/admin" className="flex items-center gap-2 text-[14px] font-medium tracking-tight text-ink">
              <Logo size={20} color="var(--warn)" />
              InternetPressure <span className="label text-warn">admin</span>
            </Link>
            <div className="ml-auto flex items-center gap-3">
              <TimeToggle className="hidden sm:inline-flex" />
              <Link href="/" className="hidden text-[11.5px] text-ink-2 hover:text-ink sm:inline">
                public site →
              </Link>
              {state === 'ok' && (
                <button type="button" onClick={logout} className="rounded-[3px] border border-line px-2 py-1 text-[11px] text-ink-2 hover:text-ink">
                  lock
                </button>
              )}
            </div>
          </div>
          {state === 'ok' && (
            <nav aria-label="Admin" className="scroll-x mx-auto flex max-w-[1600px] gap-1 px-3 sm:px-5">
              {NAV.map(([href, label]) => {
                const active = href === '/admin' ? path === '/admin' : path.startsWith(href);
                return (
                  <Link key={href} href={href} aria-current={active ? 'page' : undefined} className={`whitespace-nowrap px-2 py-2 text-[11.5px] tracking-[0.04em] ${active ? 'text-ink' : 'text-ink-2 hover:text-ink'}`} style={active ? { boxShadow: 'inset 0 -1px 0 var(--warn)' } : undefined}>
                    {label}
                  </Link>
                );
              })}
            </nav>
          )}
        </header>
        <main className="mx-auto w-full max-w-[1600px] flex-1 px-3 py-5 sm:px-5">
          {state === 'checking' && <p className="text-[12px] text-ink-3">Checking token…</p>}
          {state === 'locked' && (
            <form
              className="mx-auto mt-[12vh] max-w-[380px]"
              onSubmit={(e) => {
                e.preventDefault();
                if (input.trim()) void verify(input.trim());
              }}
            >
              <p className="label">Restricted</p>
              <h1 className="mt-1 text-[22px] font-medium tracking-tight">Admin console</h1>
              <p className="mt-1 text-[12.5px] text-ink-2">Enter the admin token. It is kept in this tab&apos;s session storage only and sent as X-IP-Admin-Token.</p>
              <input type="password" value={input} onChange={(e) => setInput(e.target.value)} autoFocus autoComplete="off" placeholder="token" className="num mt-4 h-10 w-full rounded-[4px] border border-line bg-panel px-3 text-[14px] text-ink placeholder:text-ink-3" aria-label="Admin token" />
              {err && <p className="mt-2 text-[12px] text-bad">{err}</p>}
              <button type="submit" className="mt-3 h-9 w-full rounded-[4px] bg-warn text-[13px] font-medium text-bg hover:opacity-90">
                Unlock
              </button>
            </form>
          )}
          {state === 'ok' && children}
        </main>
      </div>
    </AuthCtx.Provider>
  );
}