proof-of-work/proof-of-work/app/auth/signup/SignupForm.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { signupAction } from './actions';

export default function SignupForm() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      const result = await signupAction(email, password, passwordConfirm, name);
      if (result.error) {
        setError(result.error);
        setLoading(false);
        return;
      }
      if (result.success) {
        router.push('/main/dashboard');
      }
    } catch (err) {
      setError('An unexpected error occurred');
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="space-y-2">
        <label htmlFor="email" className="text-xs font-semibold text-white uppercase tracking-wider">
          Email
        </label>
        <input
          id="email"
          type="email"
          placeholder="you@example.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-0 focus:border-white transition-all"
          disabled={loading}
        />
      </div>

      <div className="space-y-2">
        <label htmlFor="name" className="text-xs font-semibold text-white uppercase tracking-wider">
          Name <span className="text-zinc-500 normal-case">(optional)</span>
        </label>
        <input
          id="name"
          type="text"
          placeholder="What should we call you?"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-0 focus:border-white transition-all"
          disabled={loading}
        />
      </div>

      <div className="space-y-2">
        <label htmlFor="password" className="text-xs font-semibold text-white uppercase tracking-wider">
          Password
        </label>
        <input
          id="password"
          type="password"
          placeholder="At least 8 characters"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          minLength={8}
          className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-0 focus:border-white transition-all"
          disabled={loading}
        />
      </div>

      <div className="space-y-2">
        <label htmlFor="passwordConfirm" className="text-xs font-semibold text-white uppercase tracking-wider">
          Confirm password
        </label>
        <input
          id="passwordConfirm"
          type="password"
          placeholder="Retype your password"
          value={passwordConfirm}
          onChange={(e) => setPasswordConfirm(e.target.value)}
          required
          minLength={8}
          className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-0 focus:border-white transition-all"
          disabled={loading}
        />
      </div>

      {error && (
        <div className="rounded bg-red-900/50 px-4 py-3 border border-red-800 text-sm text-red-400">
          {error}
        </div>
      )}

      <button
        type="submit"
        disabled={loading}
        className="w-full py-2.5 px-4 rounded bg-white text-black font-bold text-sm uppercase tracking-wider transition-all duration-200 hover:bg-gray-100 disabled:bg-zinc-700 disabled:text-zinc-500 disabled:cursor-not-allowed"
      >
        {loading ? 'Creating account...' : 'Create account'}
      </button>

      <p className="text-center text-xs text-zinc-500 pt-2">
        Already have an account?{' '}
        <a href="/auth/login" className="text-white underline hover:text-zinc-300">
          Sign in
        </a>
      </p>
    </form>
  );
}