import { useState, useEffect } from 'react';
import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
import { CheckCircle, XCircle, Calendar, MapPin, Loader } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { eventsAPI } from '../services/api';

export default function EventCheckinPage() {
  const { token } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const { user } = useAuth();

  const [loading, setLoading] = useState(true);
  const [success, setSuccess] = useState(false);
  const [alreadyCheckedIn, setAlreadyCheckedIn] = useState(false);
  const [eventData, setEventData] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    // Redirect to login if not authenticated
    if (!user) {
      navigate('/login', {
        state: { from: location.pathname },
        replace: true,
      });
      return;
    }

    // Perform check-in
    performCheckin();
  }, [user]);

  const performCheckin = async () => {
    try {
      setLoading(true);
      const response = await eventsAPI.checkin(token);

      if (response.success) {
        setSuccess(true);
        setAlreadyCheckedIn(response.alreadyCheckedIn);
        setEventData(response.data.event);
      }
    } catch (err) {
      console.error('Check-in error:', err);
      setError(err.message || 'Failed to check in to event');
    } finally {
      setLoading(false);
    }
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-6">
        <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full text-center">
          <Loader className="animate-spin mx-auto mb-4 text-primary-600" size={48} />
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            Checking you in...
          </h2>
          <p className="text-gray-600">Please wait while we process your check-in</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-red-50 to-red-100 flex items-center justify-center p-6">
        <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
          <div className="text-center mb-6">
            <XCircle className="mx-auto mb-4 text-red-600" size={64} />
            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              Check-in Failed
            </h2>
            <p className="text-gray-600">{error}</p>
          </div>

          <div className="space-y-3">
            <Link
              to="/events"
              className="block w-full bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors text-center font-medium"
            >
              Back to Events
            </Link>
          </div>
        </div>
      </div>
    );
  }

  if (success && eventData) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center p-6">
        <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
          <div className="text-center mb-6">
            <CheckCircle className="mx-auto mb-4 text-green-600" size={64} />
            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              {alreadyCheckedIn ? 'Already Checked In!' : 'Check-in Successful!'}
            </h2>
            <p className="text-gray-600">
              {alreadyCheckedIn
                ? 'You are already a participant of this event'
                : 'You have successfully joined this event'}
            </p>
          </div>

          {/* Event Info */}
          <div className="bg-gray-50 rounded-lg p-4 mb-6">
            <h3 className="font-semibold text-lg text-gray-900 mb-3">
              {eventData.name}
            </h3>
            <div className="space-y-2 text-sm text-gray-600">
              <div className="flex items-center gap-2">
                <MapPin size={16} className="text-gray-400" />
                <span>{eventData.location}</span>
              </div>
              <div className="flex items-center gap-2">
                <Calendar size={16} className="text-gray-400" />
                <span>
                  {formatDate(eventData.startDate)} - {formatDate(eventData.endDate)}
                </span>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="space-y-3">
            <Link
              to={`/events/${eventData.slug}/chat`}
              className="block w-full bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors text-center font-medium"
            >
              Go to Event Chat
            </Link>
            <Link
              to="/events"
              className="block w-full border border-gray-300 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors text-center font-medium text-gray-700"
            >
              Browse Other Events
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return null;
}