/**
 * Bootstrap page — set up the first admin account.
 *
 * ⚠️ AUTO-GENERATED BY PRISM (GENERATE_ONCE)
 */

import { useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { adminApi } from '../../lib/adminApi';

export default function BootstrapPage() {
  const [params] = useSearchParams();
  const navigate = useNavigate();
  const token = params.get('token') || '';
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (password !== confirm) {
      setError('Passwords do not match');
      return;
    }
    try {
      await adminApi.bootstrap(token, password);
      setSuccess(true);
      setTimeout(() => navigate('/login'), 2000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    }
  };

  if (!token) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-red-600">Missing bootstrap token. Use the link provided by the CLI.</p>
      </div>
    );
  }

  if (success) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-nordic-900 mb-2">Account Activated</h1>
          <p className="text-nordic-600">Redirecting to login...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-nordic-50">
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded-lg border border-nordic-200 w-full max-w-md space-y-4">
        <h1 className="text-2xl font-bold text-nordic-900">Set Admin Password</h1>
        <p className="text-sm text-nordic-600">Create a password for your admin account.</p>
        {error && <p className="text-red-600 text-sm">{error}</p>}
        <div>
          <label className="block text-sm font-medium text-nordic-700 mb-1">Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            minLength={8}
            className="w-full border border-nordic-300 rounded px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-nordic-700 mb-1">Confirm Password</label>
          <input
            type="password"
            value={confirm}
            onChange={(e) => setConfirm(e.target.value)}
            required
            className="w-full border border-nordic-300 rounded px-3 py-2 text-sm"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-nordic-900 text-white rounded py-2 text-sm font-medium hover:bg-nordic-800"
        >
          Activate Account
        </button>
      </form>
    </div>
  );
}
