import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Layout from '../../components/Layout';

export default function AcceptInvite() {
  const router = useRouter();
  const { token } = router.query;
  
  const [loading, setLoading] = useState(true);
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (token) {
      handleAcceptInvitation();
    }
  }, [token]);

  const handleAcceptInvitation = async () => {
    try {
      const response = await fetch('/api/invite/accept', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ token })
      });

      const data = await response.json();

      if (response.ok) {
        setResult(data);
      } else {
        setError(data.error || 'Failed to accept invitation');
      }
    } catch (err) {
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Layout user={null}>
        <div className="min-h-screen flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-16 w-16 border-b-2 mx-auto mb-4" style={{ borderColor: 'var(--text-accent)' }}></div>
            <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
              Processing Invitation...
            </h2>
            <p style={{ color: 'var(--text-secondary)' }}>
              Please wait while we accept your invitation.
            </p>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={null}>
      <div className="min-h-screen flex items-center justify-center px-4">
        <div className="max-w-md w-full">
          {result ? (
            <div className="text-center p-8 rounded-2xl shadow-lg" style={{ backgroundColor: 'var(--bg-secondary)' }}>
              <div className="text-6xl mb-4">🎉</div>
              <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
                Invitation Accepted!
              </h2>
              <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
                You now have access to the collection "{result.collection.name}".
              </p>
              <div className="space-y-3">
                <button
                  onClick={() => router.push(`/collection/${result.collection.id}`)}
                  className="w-full px-6 py-3 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                >
                  View Collection
                </button>
                <button
                  onClick={() => router.push('/collections')}
                  className="w-full px-6 py-3 rounded-lg font-medium border transition-all duration-200"
                  style={{
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                >
                  View All Collections
                </button>
              </div>
            </div>
          ) : (
            <div className="text-center p-8 rounded-2xl shadow-lg" style={{ backgroundColor: 'var(--bg-secondary)' }}>
              <div className="text-6xl mb-4">❌</div>
              <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
                Invitation Error
              </h2>
              <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
                {error}
              </p>
              <div className="space-y-3">
                <button
                  onClick={() => router.push('/collections')}
                  className="w-full px-6 py-3 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                >
                  Browse Collections
                </button>
                <button
                  onClick={() => router.push('/')}
                  className="w-full px-6 py-3 rounded-lg font-medium border transition-all duration-200"
                  style={{
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                >
                  Go Home
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
}