/**
 * Organization invitation acceptance page.
 *
 * ⚠️ AUTO-GENERATED BY PRISM (GENERATE_ONCE) — safe to edit
 *
 * Accepts an organization invitation via a token in the URL.
 */

import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { acceptInvitation } from '../../lib/orgApi';

export default function OrgInviteAccept() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const token = searchParams.get('token');
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
  const [error, setError] = useState('');

  useEffect(() => {
    if (!token) {
      setStatus('error');
      setError('No invitation token provided.');
      return;
    }

    acceptInvitation(token)
      .then(() => setStatus('success'))
      .catch((e) => {
        setStatus('error');
        setError(e.message);
      });
  }, [token]);

  return (
    <div className="p-6 max-w-md mx-auto text-center">
      <h1 className="text-2xl font-bold mb-4">Organization Invitation</h1>

      {status === 'loading' && (
        <p className="text-gray-500">Accepting invitation...</p>
      )}

      {status === 'success' && (
        <div>
          <div className="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg">
            You've successfully joined the organization!
          </div>
          <button
            onClick={() => navigate('/organizations')}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Go to Organizations
          </button>
        </div>
      )}

      {status === 'error' && (
        <div>
          <div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
            {error}
          </div>
          <button
            onClick={() => navigate('/organizations')}
            className="px-4 py-2 border rounded-lg hover:bg-gray-50"
          >
            Go to Organizations
          </button>
        </div>
      )}
    </div>
  );
}
