import { useEffect, useRef } from 'react';
import { Navigate, useNavigate } from 'react-router';
import { useAuthStore } from './auth-store';
import { Card, Spinner, Alert, Button } from '@cameleer/design-system';

export function OidcCallback() {
  const { isAuthenticated, loading, error, loginWithOidcCode } = useAuthStore();
  const navigate = useNavigate();
  const exchanged = useRef(false);

  useEffect(() => {
    if (exchanged.current) return;
    exchanged.current = true;

    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    const errorParam = params.get('error');

    if (errorParam) {
      useAuthStore.setState({
        error: params.get('error_description') || errorParam,
        loading: false,
      });
      return;
    }

    if (!code) {
      useAuthStore.setState({ error: 'No authorization code received', loading: false });
      return;
    }

    const redirectUri = `${window.location.origin}/oidc/callback`;
    loginWithOidcCode(code, redirectUri);
  }, [loginWithOidcCode]);

  if (isAuthenticated) return <Navigate to="/" replace />;

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--surface-ground)' }}>
      <Card>
        <div style={{ padding: '2rem', textAlign: 'center', minWidth: 320 }}>
          <h2 style={{ marginBottom: '1rem' }}>cameleer3</h2>
          {loading && <Spinner />}
          {error && (
            <>
              <Alert variant="error">{error}</Alert>
              <Button variant="secondary" onClick={() => navigate('/login')} style={{ marginTop: 16 }}>
                Back to Login
              </Button>
            </>
          )}
        </div>
      </Card>
    </div>
  );
}