'use client';

import * as React from 'react';
import { adminLogin, clearAdminToken, adminClient } from '@/lib/api';

type Status = 'checking' | 'signed_out' | 'signed_in';

const TOKEN_KEY = 'zyphon_admin_token';

/**
 * Single shared admin password (ZYPHON_ADMIN_PASSWORD on the gateway).
 * No usernames — same model as the gateway.
 */
export function AuthGate({ children }: { children: React.ReactNode }) {
  const [status, setStatus] = React.useState<Status>('checking');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [working, setWorking] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;

    const token = localStorage.getItem(TOKEN_KEY);
    if (token) {
      // Optimistic: show the app immediately; clear session only on hard 401 later
      setStatus('signed_in');
      void adminClient.me().then((me) => {
        if (cancelled) return;
        if (!me.authenticated) {
          clearAdminToken();
          setStatus('signed_out');
        }
      });
      return () => {
        cancelled = true;
      };
    }

    setStatus('signed_out');
    return () => {
      cancelled = true;
    };
  }, []);

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (!password.trim()) {
      setError('Enter the admin password.');
      return;
    }
    setWorking(true);
    try {
      const res = await adminLogin(password.trim());
      if (!res.success) {
        setError('Wrong password.');
        setStatus('signed_out');
        return;
      }
      setPassword('');
      setStatus('signed_in');
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Could not sign in.');
      setStatus('signed_out');
    } finally {
      setWorking(false);
    }
  };

  if (status === 'checking') {
    return (
      <div className="min-h-screen grid place-items-center bg-bg text-muted text-sm">
        Loading…
      </div>
    );
  }

  if (status === 'signed_out') {
    return (
      <div className="min-h-screen grid place-items-center bg-bg px-4">
        <form
          onSubmit={onSubmit}
          className="w-full max-w-[380px] bg-surface border border-line rounded-[14px] p-6 shadow-card"
        >
          <div className="flex items-center gap-2.5 mb-4">
            <span className="w-[26px] h-[26px] rounded-lg bg-accent text-on-accent grid place-items-center text-[15px] font-extrabold">
              Z
            </span>
            <b className="text-[17px] tracking-tight">Zyphon</b>
          </div>
          <h1 className="text-xl font-bold tracking-tight m-0 mb-1">Sign in</h1>
          <p className="text-muted text-sm m-0 mb-4">
            Enter the admin password for this gateway. There is no username.
          </p>
          <label className="block font-medium text-sm mb-3.5">
            Admin password
            <input
              type="password"
              autoComplete="current-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1.5 w-full bg-surface border border-line rounded-[var(--r)] px-2.5 py-2 text-text text-sm focus:border-accent focus:outline-none focus:shadow-[0_0_0_3px_var(--accent-soft)]"
              autoFocus
            />
          </label>
          <div className="text-danger text-sm min-h-[20px] mb-2" role="alert">
            {error}
          </div>
          <button
            type="submit"
            disabled={working}
            className="w-full py-2 rounded-[var(--r)] bg-accent border border-accent text-on-accent font-medium hover:bg-accent-hover disabled:opacity-60"
          >
            {working ? 'Signing in…' : 'Continue'}
          </button>
        </form>
      </div>
    );
  }

  return (
    <AuthSessionContext.Provider
      value={{
        signOut: () => {
          clearAdminToken();
          void adminClient.logout().catch(() => undefined);
          setStatus('signed_out');
        },
      }}
    >
      {children}
    </AuthSessionContext.Provider>
  );
}

const AuthSessionContext = React.createContext<{ signOut: () => void }>({
  signOut: () => undefined,
});

export function useAuthSession() {
  return React.useContext(AuthSessionContext);
}