import { createContext, useContext, useEffect, useState } from 'react'
import type { ReactNode } from 'react'
import type { User } from '../types'

// Compatibility shim: archive components destructure token/login/logout/restrictedPages
// from useAuth(). These stubs keep the TypeScript build clean. Runtime behaviour:
//   token = "__session__" (truthy so component guards pass; backends ignore the
//   Authorization header and use the hnf_session cookie — see log B5b for full migration).
//   restrictedPages = [] (replaced by cap-based access control).
//   logout = redirect to /login portal.
//   login = no-op (cookie auth, no local token).
interface AuthCtx {
  user: User
  token: string
  restrictedPages: string[]
  login: (t: string) => void
  logout: () => void
}
const Ctx = createContext<AuthCtx | null>(null)

export function useAuth() {
  const ctx = useContext(Ctx)
  if (!ctx) throw new Error('useAuth outside AuthGate')
  return ctx
}

export default function AuthGate({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [checking, setChecking] = useState(true)

  useEffect(() => {
    fetch('/kitchen/api/auth/verify?app=kitchen', { credentials: 'include' })
      .then((r) => {
        if (!r.ok) throw new Error('unauth')
        return r.json()
      })
      .then((data) =>
        setUser({
          email: data.email || data.sub || '',
          name: data.name || data.display_name || '',
          is_admin: data.is_admin ?? false,
          caps: data.caps ?? [],
        })
      )
      .catch(() => {
        ;(window.top ?? window).location.href = '/login'
      })
      .finally(() => setChecking(false))
  }, [])

  if (checking) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--navy-dark)' }}>
        <div className="spinner" style={{ width: 32, height: 32 }} />
      </div>
    )
  }

  if (!user) return null

  const ctx: AuthCtx = {
    user,
    token: '__session__',
    restrictedPages: [],
    login: () => {},
    logout: () => { (window.top ?? window).location.href = '/login' },
  }

  return <Ctx.Provider value={ctx}>{children}</Ctx.Provider>
}
