nkode-web/src/pages/SusiPage.tsx

/**
 * SUSI (Sign Up / Sign In) page.
 * Login tab: email → OPAQUE key login → navigate to keypad for code login.
 * Signup tab: email → OPAQUE key register → key login → navigate to keypad for code registration.
 */
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import * as api from '../services/api'

export default function SusiPage() {
  const [tab, setTab] = useState<'login' | 'signup'>('login')

  return (
    <div className="flex flex-col items-center">
      {/* Logo area */}
      <div className="text-center mb-8">
        <div className="w-24 h-24 rounded-2xl bg-emerald-600 flex items-center justify-center font-bold text-3xl mx-auto mb-4">
          nK
        </div>
        <h1 className="text-3xl font-semibold">nKode</h1>
        <p className="text-zinc-400 mt-1">Passwordless Authentication</p>
      </div>

      {/* Tab bar */}
      <div className="flex border-b border-zinc-700 mb-6 w-full max-w-md">
        <button
          className={`flex-1 py-3 text-center font-medium transition-colors ${
            tab === 'login'
              ? 'text-emerald-400 border-b-2 border-emerald-400'
              : 'text-zinc-400 hover:text-zinc-200'
          }`}
          onClick={() => setTab('login')}
        >
          Login
        </button>
        <button
          className={`flex-1 py-3 text-center font-medium transition-colors ${
            tab === 'signup'
              ? 'text-emerald-400 border-b-2 border-emerald-400'
              : 'text-zinc-400 hover:text-zinc-200'
          }`}
          onClick={() => setTab('signup')}
        >
          Sign Up
        </button>
      </div>

      {/* Tab content */}
      {tab === 'login' ? <LoginTab /> : <SignupTab />}
    </div>
  )
}

/** Login tab — email + secret key → OPAQUE key login → code login keypad */
function LoginTab() {
  const [email, setEmail] = useState('')
  const [secretKeyHex, setSecretKeyHex] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const navigate = useNavigate()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const trimmedEmail = email.trim()
    const trimmedKey = secretKeyHex.trim()
    if (!trimmedEmail) { setError('Enter an email'); return }
    if (!trimmedKey || trimmedKey.length !== 32) {
      setError('Enter your 32-character secret key (hex)')
      return
    }

    setLoading(true)
    setError(null)
    try {
      // Step 1: OPAQUE key login
      const session = await api.loginKey(trimmedEmail, trimmedKey)

      // Step 2: Prepare code login (fetch login data + reconstruct keypad)
      const codeLoginData = await api.prepareCodeLogin(session.userId, trimmedKey)

      // Navigate to keypad page for code login
      navigate('/login-keypad', {
        state: {
          email: trimmedEmail,
          secretKeyHex: trimmedKey,
          userId: session.userId,
          codeLoginData,
        },
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Login failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="w-full max-w-md flex flex-col gap-5">
      <input
        type="email"
        placeholder="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="w-full px-4 py-3 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-emerald-500"
      />
      <input
        type="password"
        placeholder="secret key (32 hex chars)"
        value={secretKeyHex}
        onChange={(e) => setSecretKeyHex(e.target.value)}
        className="w-full px-4 py-3 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-emerald-500 font-mono"
      />
      {error && <p className="text-red-400 text-sm">{error}</p>}
      <button
        type="submit"
        disabled={loading}
        className="w-full py-3 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 font-medium transition-colors"
      >
        {loading ? 'Authenticating…' : 'Login'}
      </button>
    </form>
  )
}

/** Sign Up tab — email → generate key → OPAQUE key register + key login → code registration keypad */
function SignupTab() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const navigate = useNavigate()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const trimmedEmail = email.trim()
    if (!trimmedEmail) { setError('Enter an email'); return }

    setLoading(true)
    setError(null)
    try {
      // Step 1: Generate secret key
      const secretKeyHex = api.generateSecretKey()

      // Step 2: OPAQUE key registration
      await api.registerKey(trimmedEmail, secretKeyHex)

      // Step 3: OPAQUE key login (needed for authenticated endpoints)
      const session = await api.loginKey(trimmedEmail, secretKeyHex)

      // Step 4: Prepare code registration (fetch icons)
      const iconsData = await api.prepareCodeRegistration()

      // Navigate to keypad page for code registration
      navigate('/signup-keypad', {
        state: {
          email: trimmedEmail,
          secretKeyHex,
          userId: session.userId,
          icons: iconsData.icons,
        },
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Registration failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="w-full max-w-md flex flex-col gap-5">
      <input
        type="email"
        placeholder="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="w-full px-4 py-3 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-emerald-500"
      />
      {error && <p className="text-red-400 text-sm">{error}</p>}
      <button
        type="submit"
        disabled={loading}
        className="w-full py-3 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 font-medium transition-colors"
      >
        {loading ? 'Setting up…' : 'Sign Up'}
      </button>
    </form>
  )
}