// components/events/EventRegistrationForm.tsx
'use client';

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

export default function EventRegistrationForm({ eventId }: { eventId: number }) {
  const router = useRouter();
  const [formData, setFormData] = useState({
    steamId: '',
    carModel: '',
    carSkin: '',
    teamName: '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

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

    try {
      const response = await fetch('/api/events/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          eventId,
          ...formData,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Registration failed');
      }

      setSuccess(true);
      setTimeout(() => {
        router.refresh();
      }, 1500);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Steam ID */}
      <div>
        <label htmlFor="steamId" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
          STEAM ID *
        </label>
        <input
          type="text"
          id="steamId"
          required
          value={formData.steamId}
          onChange={(e) => setFormData({ ...formData, steamId: e.target.value })}
          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors"
          placeholder="76561198XXXXXXXXX"
        />
        <p className="text-xs text-white/40 mt-1">Your Steam ID from the database</p>
      </div>

      {/* Car Model */}
      <div>
        <label htmlFor="carModel" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
          CAR MODEL *
        </label>
        <input
          type="text"
          id="carModel"
          required
          value={formData.carModel}
          onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors font-mono"
          placeholder="ks_ferrari_488_gt3"
        />
        <p className="text-xs text-white/40 mt-1">Assetto Corsa car folder name</p>
      </div>

      {/* Car Skin */}
      <div>
        <label htmlFor="carSkin" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
          CAR SKIN
        </label>
        <input
          type="text"
          id="carSkin"
          value={formData.carSkin}
          onChange={(e) => setFormData({ ...formData, carSkin: e.target.value })}
          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors"
          placeholder="01_red_white (optional)"
        />
      </div>

      {/* Team Name */}
      <div>
        <label htmlFor="teamName" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
          TEAM NAME
        </label>
        <input
          type="text"
          id="teamName"
          value={formData.teamName}
          onChange={(e) => setFormData({ ...formData, teamName: e.target.value })}
          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors"
          placeholder="Enter team name (optional)"
        />
      </div>

      {/* Error Message */}
      {error && (
        <div className="border border-red-500/20 bg-red-500/10 p-4 text-red-400 text-sm">
          {error}
        </div>
      )}

      {/* Success Message */}
      {success && (
        <div className="border border-green-500/20 bg-green-500/10 p-4 text-green-400 text-sm">
          Registration successful! Redirecting...
        </div>
      )}

      {/* Submit Button */}
      <button
        type="submit"
        disabled={loading || success}
        className="w-full px-6 py-4 border border-white hover:bg-white hover:text-black transition-all text-sm font-bold tracking-wider disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {loading ? 'REGISTERING...' : success ? 'REGISTERED!' : 'REGISTER NOW'}
      </button>

      <p className="text-xs text-white/40 text-center">
        * Required fields
      </p>
    </form>
  );
}