Teamup/client/src/pages/LoginPage.tsx

import { type FormEvent, useState } from 'react'
import { api } from '../lib/api'
import { useAuth } from '../store/auth'

interface AuthResponse {
  token: string
  memberId: string
}

interface BootstrapResponse {
  token: string
  memberId: string
  organizationId: string
}

interface MeResponse {
  memberships: { scopeType: string; scopeId: string; role: string }[]
}

export function LoginPage() {
  const setAuth = useAuth((state) => state.setAuth)
  const [mode, setMode] = useState<'login' | 'bootstrap'>('login')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [orgName, setOrgName] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

  async function submit(event: FormEvent) {
    event.preventDefault()
    setError(null)
    setBusy(true)
    try {
      if (mode === 'bootstrap') {
        const result = await api.post<BootstrapResponse>('/api/identity/bootstrap', {
          organizationName: orgName,
          ownerEmail: email,
          ownerDisplayName: displayName,
          ownerPassword: password,
        })
        setAuth(result.token, result.memberId, result.organizationId)
      } else {
        const result = await api.post<AuthResponse>('/api/identity/auth/login', { email, password })
        setAuth(result.token, result.memberId, null)
        const me = await api.get<MeResponse>('/api/identity/me')
        const org = me.memberships.find((m) => m.scopeType === 'Organization')
        setAuth(result.token, result.memberId, org?.scopeId ?? null)
      }
    } catch (err) {
      setError((err as Error).message)
    } finally {
      setBusy(false)
    }
  }

  return (
    <main className="min-h-screen bg-indigo-950 text-slate-100 grid place-items-center px-6">
      <form onSubmit={submit} className="w-full max-w-sm rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-6">
        <h1 className="text-2xl font-bold tracking-tight">TeamUp.AI</h1>
        <p className="mt-1 text-sm text-indigo-300">
          {mode === 'login' ? 'Sign in' : 'Create the first owner'}
        </p>

        <div className="mt-5 space-y-3">
          {mode === 'bootstrap' && (
            <Field label="Organization" value={orgName} onChange={setOrgName} />
          )}
          {mode === 'bootstrap' && (
            <Field label="Display name" value={displayName} onChange={setDisplayName} />
          )}
          <Field label="Email" type="email" value={email} onChange={setEmail} />
          <Field label="Password" type="password" value={password} onChange={setPassword} />
        </div>

        {error && <p className="mt-3 text-sm text-rose-400">{error}</p>}

        <button
          type="submit"
          disabled={busy}
          className="mt-5 w-full rounded-lg bg-indigo-500 px-4 py-2 font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
        >
          {busy ? '…' : mode === 'login' ? 'Sign in' : 'Bootstrap'}
        </button>

        <button
          type="button"
          onClick={() => setMode(mode === 'login' ? 'bootstrap' : 'login')}
          className="mt-3 w-full text-sm text-indigo-300 hover:text-indigo-200"
        >
          {mode === 'login' ? 'First run? Bootstrap the owner →' : '← Back to sign in'}
        </button>
      </form>
    </main>
  )
}

function Field(props: {
  label: string
  value: string
  onChange: (value: string) => void
  type?: string
}) {
  return (
    <label className="block text-sm">
      <span className="text-indigo-200">{props.label}</span>
      <input
        type={props.type ?? 'text'}
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
        required
        className="mt-1 w-full rounded-lg border border-indigo-700 bg-indigo-950/60 px-3 py-2 text-slate-100 outline-none focus:border-indigo-400"
      />
    </label>
  )
}