<script lang="ts">
  import { onMount } from 'svelte';
  import { getApiURL } from '@warkypublic/svelix';
  import {
    buildOAuthAuthorizationURL,
    ensureApiURL,
    exchangeOAuthCode,
    GlobalStateStore,
    setCurrentPath
  } from './shellState';

  type AccessEntry = {
    key_id: string;
    last_accessed_at: string;
    last_path: string;
    user_agent: string;
    request_count: number;
  };

  type StatusResponse = {
    title: string;
    description: string;
    version: string;
    build_date: string;
    commit: string;
    connected_count: number;
    total_known: number;
    connected_window: string;
    oauth_enabled: boolean;
    entries: AccessEntry[];
  };

  type NavItem = {
    id: string;
    label: string;
    description: string;
    disabled?: boolean;
  };

  const navItems: NavItem[] = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      description: 'System overview and status snapshots.'
    },
    {
      id: 'projects',
      label: 'Projects',
      description: 'First management module for AMCS projects.'
    },
    {
      id: 'thoughts',
      label: 'Thoughts',
      description: 'Thought management arrives after projects.',
      disabled: true
    },
    {
      id: 'files',
      label: 'Files',
      description: 'File inventory and attachment views.',
      disabled: true
    }
  ];

  let authMessage = $state('');
  let authError = $state('');
  let authBusy = $state(false);
  let callbackBusy = $state(false);
  let data = $state<StatusResponse | null>(null);
  let loading = $state(false);
  let error = $state('');
  let currentPage = $state<'dashboard' | 'projects'>('dashboard');

  ensureApiURL(import.meta.env.VITE_API_URL);

  const isLoggedIn = $derived(GlobalStateStore.isLoggedIn());
  const currentPath = $derived(typeof window !== 'undefined' ? window.location.pathname : '/');
  const isOAuthCallback = $derived(currentPath === '/oauth/callback');
  const oauthAuthorizeURL = $derived(`${getApiURL()}/oauth/authorize`);

  async function startOAuthLogin(): Promise<void> {
    authBusy = true;
    authError = '';
    authMessage = '';

    try {
      const authorizationURL = await buildOAuthAuthorizationURL();
      window.location.assign(authorizationURL);
    } catch (err) {
      authError = err instanceof Error ? err.message : 'Failed to start OAuth login.';
    } finally {
      authBusy = false;
    }
  }

  async function finishOAuthLogin(): Promise<void> {
    callbackBusy = true;
    authError = '';
    authMessage = '';

    try {
      const params = new URLSearchParams(window.location.search);
      const code = params.get('code');
      const returnedState = params.get('state');
      const oauthError = params.get('error');

      if (oauthError) {
        throw new Error(`OAuth login failed: ${oauthError}`);
      }
      if (!code || !returnedState) {
        throw new Error('OAuth callback is missing code or state.');
      }

      const token = await exchangeOAuthCode(code, returnedState);
      await GlobalStateStore.getState().login(token, {
        username: 'OAuth operator'
      });

      authMessage = 'OAuth login complete. Welcome back.';
      window.history.replaceState({}, '', '/');
      await loadStatus();
    } catch (err) {
      authError = err instanceof Error ? err.message : 'OAuth callback failed.';
    } finally {
      callbackBusy = false;
    }
  }

  async function logout(): Promise<void> {
    await GlobalStateStore.getState().logout();
    authMessage = 'Logged out.';
    authError = '';
  }

  async function loadStatus(): Promise<void> {
    loading = true;
    error = '';

    try {
      const response = await fetch('/api/status');
      if (!response.ok) {
        throw new Error(`Status request failed with ${response.status}`);
      }
      data = (await response.json()) as StatusResponse;
    } catch (err) {
      error = err instanceof Error ? err.message : 'Failed to load status';
    } finally {
      loading = false;
    }
  }

  function formatDate(value: string): string {
    return new Date(value).toLocaleString();
  }

  onMount(async () => {
    if (typeof window !== 'undefined') {
      setCurrentPath(window.location.pathname);
    }

    if (isOAuthCallback) {
      await finishOAuthLogin();
      return;
    }

    if (isLoggedIn) {
      await loadStatus();
    }
  });
</script>

<svelte:head>
  <title>AMCS Admin</title>
</svelte:head>

<div class="min-h-screen bg-slate-950 text-slate-100">
  {#if !isLoggedIn}
    <main class="mx-auto flex min-h-screen max-w-6xl items-center px-4 py-10 sm:px-6 lg:px-8">
      <section class="grid w-full gap-8 lg:grid-cols-[1.15fr_0.85fr]">
        <div class="rounded-3xl border border-cyan-400/20 bg-slate-900/80 p-8 shadow-2xl shadow-slate-950/40">
          <div class="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-sm font-medium text-cyan-200">
            <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
            AMCS Control Interface
          </div>
          <h1 class="mt-6 text-4xl font-semibold tracking-tight text-white">
            {#if isOAuthCallback}
              Completing login
            {:else}
              Login
            {/if}
          </h1>
          <p class="mt-3 max-w-2xl text-base leading-7 text-slate-300">
            Origin-style operator access for the AMCS admin interface. ResolveSpec OAuth is the front door now,
            not the old login shortcut.
          </p>

          <div class="mt-8 grid gap-4 sm:grid-cols-2">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Primary module</p>
              <p class="mt-2 text-2xl font-semibold text-white">Projects</p>
              <p class="mt-2 text-sm text-slate-400">Projects are the first real admin screen in this rollout.</p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p class="text-sm uppercase tracking-[0.2em] text-slate-400">OAuth path</p>
              <p class="mt-2 text-2xl font-semibold text-white">ResolveSpec</p>
              <p class="mt-2 text-sm text-slate-400">Client registration, authorize, callback, token exchange.</p>
            </div>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-slate-900 p-6 shadow-xl shadow-slate-950/30 sm:p-8">
          {#if isOAuthCallback}
            <h2 class="text-xl font-semibold text-white">Authorizing operator session</h2>
            <p class="mt-2 text-sm leading-6 text-slate-400">
              Finishing the ResolveSpec handshake and exchanging the returned code for an AMCS token.
            </p>

            <div class="mt-6 rounded-2xl border border-cyan-400/20 bg-cyan-400/5 px-4 py-6 text-sm text-cyan-100">
              {#if callbackBusy}
                Working the callback doohickey…
              {:else if authError}
                Callback failed. Fix the route or try the login run again.
              {:else}
                Callback processed.
              {/if}
            </div>
          {:else}
            <h2 class="text-xl font-semibold text-white">Operator login</h2>
            <p class="mt-1 text-sm text-slate-400">Authenticate through AMCS ResolveSpec OAuth endpoints.</p>

            <div class="mt-6 space-y-4">
              <button
                type="button"
                class="inline-flex w-full items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20 disabled:cursor-not-allowed disabled:opacity-60"
                onclick={startOAuthLogin}
                disabled={authBusy}
              >
                {#if authBusy}Starting OAuth login…{:else}Login with ResolveSpec OAuth{/if}
              </button>

              <div class="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-slate-300">
                <p class="font-semibold text-white">Routes in play</p>
                <ul class="mt-3 space-y-2 text-slate-400">
                  <li>• discovery: <code class="text-cyan-100">/api/.well-known/oauth-authorization-server</code></li>
                  <li>• registration: <code class="text-cyan-100">/api/oauth/register</code></li>
                  <li>• authorize: <code class="text-cyan-100">{oauthAuthorizeURL}</code></li>
                  <li>• callback: <code class="text-cyan-100">/oauth/callback</code></li>
                  <li>• token: <code class="text-cyan-100">/api/oauth/token</code></li>
                </ul>
              </div>

              {#if authError}
                <p class="text-sm text-rose-300">{authError}</p>
              {/if}
              {#if authMessage}
                <p class="text-sm text-emerald-300">{authMessage}</p>
              {/if}
            </div>
          {/if}
        </div>
      </section>
    </main>
  {:else}
    <div class="grid min-h-screen lg:grid-cols-[17rem_1fr]">
      <aside class="border-r border-white/10 bg-slate-900/90 p-6">
        <div>
          <p class="text-xs uppercase tracking-[0.3em] text-cyan-300">AMCS</p>
          <h1 class="mt-2 text-2xl font-semibold text-white">Admin</h1>
          <p class="mt-2 text-sm text-slate-400">Origin-style shell, starting with Projects.</p>
        </div>

        <nav class="mt-8 space-y-2">
          {#each navItems as item}
            <button
              class={`w-full rounded-2xl border px-4 py-3 text-left transition ${item.disabled ? 'cursor-not-allowed border-white/5 bg-white/[0.02] text-slate-600' : currentPage === item.id ? 'border-cyan-300/30 bg-cyan-400/10 text-cyan-100' : 'border-white/10 bg-white/5 text-slate-200 hover:bg-white/10'}`}
              disabled={item.disabled}
              onclick={() => {
                if (!item.disabled && (item.id === 'dashboard' || item.id === 'projects')) {
                  currentPage = item.id;
                }
              }}
            >
              <div class="text-sm font-semibold">{item.label}</div>
              <div class="mt-1 text-xs text-slate-400">{item.description}</div>
            </button>
          {/each}
        </nav>

        <button
          class="mt-8 inline-flex w-full items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10"
          onclick={logout}
        >
          Logout
        </button>
      </aside>

      <main class="px-4 py-6 sm:px-6 lg:px-8">
        {#if currentPage === 'dashboard'}
          <section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
              <div>
                <h2 class="text-2xl font-semibold text-white">System overview</h2>
                <p class="mt-1 text-sm text-slate-400">Current AMCS status behind the admin shell.</p>
              </div>
              <button
                class="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-white/10"
                onclick={loadStatus}
              >
                Refresh
              </button>
            </div>

            {#if loading}
              <div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400">
                Loading status…
              </div>
            {:else if error}
              <div class="mt-6 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-6 text-sm text-rose-100">
                <p class="font-semibold">Couldn’t load the status snapshot.</p>
                <p class="mt-1 text-rose-100/80">{error}</p>
              </div>
            {:else if data}
              <div class="mt-6 grid gap-4 sm:grid-cols-3">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                  <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Connected users</p>
                  <p class="mt-2 text-3xl font-semibold text-white">{data.connected_count}</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                  <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Known principals</p>
                  <p class="mt-2 text-3xl font-semibold text-white">{data.total_known}</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                  <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Version</p>
                  <p class="mt-2 break-all text-2xl font-semibold text-white">{data.version}</p>
                </div>
              </div>
            {/if}
          </section>
        {:else}
          <section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
              <div>
                <h2 class="text-2xl font-semibold text-white">Projects</h2>
                <p class="mt-1 text-sm text-slate-400">First module scaffold. Grid/Form wiring comes next.</p>
              </div>
              <span class="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-xs font-medium text-amber-200">
                Structure phase
              </span>
            </div>

            <div class="mt-6 grid gap-4 lg:grid-cols-[1.35fr_0.65fr]">
              <div class="rounded-2xl border border-dashed border-cyan-400/20 bg-cyan-400/5 p-6">
                <h3 class="text-lg font-semibold text-white">Project grid placeholder</h3>
                <p class="mt-2 text-sm leading-6 text-slate-300">
                  This is the landing zone for the Origin-style projects grid using Svelix and GridlerFull.
                  Next pass: wire ResolveSpec-backed project list, row actions, and editor flow.
                </p>
                <ul class="mt-4 space-y-2 text-sm text-slate-400">
                  <li>• Project list and search</li>
                  <li>• Project detail/edit drawer or modal</li>
                  <li>• Create/archive actions</li>
                  <li>• Link-outs to related thoughts and skills</li>
                </ul>
              </div>

              <div class="rounded-2xl border border-white/10 bg-white/5 p-6">
                <h3 class="text-lg font-semibold text-white">Build notes</h3>
                <dl class="mt-4 space-y-3 text-sm text-slate-300">
                  <div>
                    <dt class="text-slate-500">Auth path</dt>
                    <dd class="mt-1">ResolveSpec OAuth packages</dd>
                  </div>
                  <div>
                    <dt class="text-slate-500">Page pattern</dt>
                    <dd class="mt-1">Mapped toward Origin login and shell</dd>
                  </div>
                  <div>
                    <dt class="text-slate-500">First module</dt>
                    <dd class="mt-1">Projects</dd>
                  </div>
                </dl>
              </div>
            </div>
          </section>
        {/if}

        {#if data && currentPage === 'dashboard' && data.entries.length > 0}
          <section class="mt-6 rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
            <h3 class="text-xl font-semibold text-white">Recent access</h3>
            <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300">
                  <thead class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500">
                    <tr>
                      <th class="px-4 py-3 font-medium">Principal</th>
                      <th class="px-4 py-3 font-medium">Last accessed</th>
                      <th class="px-4 py-3 font-medium">Last path</th>
                      <th class="px-4 py-3 font-medium">Agent</th>
                      <th class="px-4 py-3 font-medium">Requests</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-white/5 bg-slate-950/30">
                    {#each data.entries as entry}
                      <tr class="hover:bg-white/[0.03]">
                        <td class="px-4 py-3 align-top"><code class="rounded bg-white/5 px-2 py-1 font-mono text-xs text-cyan-100">{entry.key_id}</code></td>
                        <td class="px-4 py-3 align-top text-slate-200">{formatDate(entry.last_accessed_at)}</td>
                        <td class="px-4 py-3 align-top"><code class="text-slate-100">{entry.last_path}</code></td>
                        <td class="max-w-[16rem] truncate px-4 py-3 align-top text-xs text-slate-400">{entry.user_agent ?? '—'}</td>
                        <td class="px-4 py-3 align-top font-semibold text-white">{entry.request_count}</td>
                      </tr>
                    {/each}
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        {/if}
      </main>
    </div>
  {/if}
</div>
