import { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Loader2, ShieldCheck } from 'lucide-react'
import { authApi, type EnrollResult } from '../lib/auth'
import { useAuth } from '../lib/useAuth'

type Step = 'set' | 'enroll'

// AcceptInvite handles an authority bounded invite link (/accept?token=...): set a password, then enroll
// the mandatory TOTP. On an active session it navigates to the app.
export function AcceptInvite() {
  const { refresh } = useAuth()
  const nav = useNavigate()
  const [params] = useSearchParams()
  const token = params.get('token') ?? ''

  const [step, setStep] = useState<Step>('set')
  const [password, setPassword] = useState('')
  const [confirm, setConfirm] = useState('')
  const [code, setCode] = useState('')
  const [enroll, setEnroll] = useState<EnrollResult | null>(null)
  const [err, setErr] = useState('')
  const [busy, setBusy] = useState(false)

  async function onSet(e: React.FormEvent) {
    e.preventDefault()
    setErr('')
    if (password.length < 8) {
      setErr('Use at least 8 characters.')
      return
    }
    if (password !== confirm) {
      setErr('Passwords do not match.')
      return
    }
    setBusy(true)
    try {
      const r = await authApi.inviteAccept(token, password)
      if (!r.mfa_required) {
        // MFA is disabled for this pilot: the account is active after setting a password, go straight in.
        await refresh()
        nav('/')
        return
      }
      setEnroll(await authApi.mfaEnroll())
      setStep('enroll')
    } catch {
      setErr('This invite link is invalid or expired.')
    } finally {
      setBusy(false)
    }
  }

  async function onActivate(e: React.FormEvent) {
    e.preventDefault()
    setErr('')
    setBusy(true)
    try {
      await authApi.mfaActivate(code.trim())
      await refresh()
      nav('/')
    } catch {
      setErr('Invalid code. Make sure your authenticator time is correct.')
      setBusy(false)
    }
  }

  if (!token) {
    return (
      <div className="grid min-h-screen place-items-center bg-navy-950 p-4 text-ink">
        <p className="text-sm text-risk">This invite link is missing its token.</p>
      </div>
    )
  }

  return (
    <div className="grid min-h-screen place-items-center bg-navy-950 p-4 text-ink">
      <div className="w-full max-w-sm rounded-xl border border-line/70 bg-surface p-6 shadow-2xl">
        <div className="mb-5 flex items-center gap-2">
          <ShieldCheck className="text-gold" size={22} />
          <div className="text-lg font-extrabold tracking-tight">missionMATCH</div>
        </div>

        {step === 'set' && (
          <form onSubmit={onSet} className="space-y-3">
            <h1 className="text-sm font-bold">Accept your invitation</h1>
            <p className="text-xs text-muted">Set a password to create your account.</p>
            <Input label="Password" type="password" value={password} onChange={setPassword} autoFocus maxLength={64} />
            <Input label="Confirm password" type="password" value={confirm} onChange={setConfirm} maxLength={64} />
            {err && <p className="text-sm text-risk">{err}</p>}
            <Go busy={busy} label="Continue" />
          </form>
        )}

        {step === 'enroll' && enroll && (
          <form onSubmit={onActivate} className="space-y-3">
            <h1 className="text-sm font-bold">Set up two factor authentication</h1>
            <p className="text-xs text-muted">Add this account to your authenticator app, then enter the code.</p>
            <div className="rounded-lg bg-navy-950/60 p-3">
              <div className="text-[11px] uppercase tracking-wider text-faint">Setup key</div>
              <div className="mt-1 break-all font-mono text-sm text-blue-soft">{enroll.secret}</div>
              <a href={enroll.otpauth_uri} className="mt-2 inline-block text-[11px] text-muted underline">
                Open in authenticator
              </a>
            </div>
            <Input label="Authentication code" value={code} onChange={setCode} autoFocus />
            {err && <p className="text-sm text-risk">{err}</p>}
            <Go busy={busy} label="Activate and sign in" />
          </form>
        )}
      </div>
    </div>
  )
}

function Input({
  label,
  value,
  onChange,
  type = 'text',
  autoFocus,
  maxLength,
}: {
  label: string
  value: string
  onChange: (v: string) => void
  type?: string
  autoFocus?: boolean
  maxLength?: number
}) {
  return (
    <label className="block">
      <span className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</span>
      <input
        type={type}
        value={value}
        autoFocus={autoFocus}
        maxLength={maxLength}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60"
      />
    </label>
  )
}

function Go({ busy, label }: { busy: boolean; label: string }) {
  return (
    <button
      type="submit"
      disabled={busy}
      className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50"
    >
      {busy ? <Loader2 className="animate-spin" size={15} /> : <ShieldCheck size={15} />}
      {label}
    </button>
  )
}