mule-image/frontend/src/components/auth/SetupPage.tsx

import { useState, type FormEvent } from 'react'
import { useAuth } from '../../contexts/AuthContext'
import api from '../../services/api'

export function SetupPage() {
  const { onSetupComplete } = useAuth()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault()
    setError(null)

    if (password !== confirmPassword) {
      setError('Passwords do not match.')
      return
    }
    if (password.length < 6) {
      setError('Password must be at least 6 characters.')
      return
    }
    if (username.trim().length < 2) {
      setError('Username must be at least 2 characters.')
      return
    }

    setLoading(true)
    try {
      const res = await api.post('/auth/setup', {
        username: username.trim(),
        password,
      })
      const { access_token, refresh_token } = res.data
      await onSetupComplete(access_token, refresh_token)
    } catch (err: any) {
      setError(
        err.response?.data?.detail ?? 'Setup failed. Please try again.',
      )
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-bg px-4">
      <form
        onSubmit={handleSubmit}
        className="w-full max-w-sm space-y-5 rounded-lg border border-border bg-surface p-8 shadow-xl"
      >
        <div className="space-y-1 text-center">
          <h1 className="text-xl font-semibold text-text">Welcome to Mulita</h1>
          <p className="text-sm text-text-muted">
            Create your admin account to get started.
          </p>
        </div>

        {error && (
          <div className="rounded bg-red-900/30 px-3 py-2 text-sm text-red-300">
            {error}
          </div>
        )}

        <div className="space-y-1">
          <label htmlFor="setup-user" className="block text-sm text-text-muted">
            Username
          </label>
          <input
            id="setup-user"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            autoFocus
            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
          />
        </div>

        <div className="space-y-1">
          <label htmlFor="setup-pass" className="block text-sm text-text-muted">
            Password
          </label>
          <input
            id="setup-pass"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
          />
        </div>

        <div className="space-y-1">
          <label htmlFor="setup-confirm" className="block text-sm text-text-muted">
            Confirm Password
          </label>
          <input
            id="setup-confirm"
            type="password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            required
            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full rounded bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/80 disabled:opacity-50"
        >
          {loading ? 'Creating account\u2026' : 'Create Admin Account'}
        </button>
      </form>
    </div>
  )
}