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

import { useState, useEffect } 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 [availableCars, setAvailableCars] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingCars, setLoadingCars] = useState(true);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  // Fetch available cars on mount
  useEffect(() => {
    const fetchCars = async () => {
      try {
        const response = await fetch('/api/events/cars');
        const data = await response.json();
        
        if (data.success) {
          setAvailableCars(data.data);
        } else {
          setError('Failed to load available cars');
        }
      } catch (err) {
        console.error('Error fetching cars:', err);
        setError('Failed to load available cars');
      } finally {
        setLoadingCars(false);
      }
    };

    fetchCars();
  }, []);

  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);
    }
  };

  // Format car name for display
  const formatCarName = (carId: string) => {
    return carId
      .replace(/_/g, ' ')
      .replace(/\b\w/g, char => char.toUpperCase());
  };

  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 Dropdown */}
      <div>
        <label htmlFor="carModel" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
          CAR MODEL *
        </label>
        {loadingCars ? (
          <div className="w-full px-4 py-3 bg-black border border-white/20 text-white/40">
            Loading available cars...
          </div>
        ) : (
          <select
            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 cursor-pointer"
          >
            <option value="">Select a car</option>
            {availableCars.map((car) => (
              <option key={car} value={car}>
                {formatCarName(car)}
              </option>
            ))}
          </select>
        )}
        <p className="text-xs text-white/40 mt-1">Choose from available cars for this event</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 || loadingCars}
        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>
  );
}