import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface AuthDebugInfoProps {
  isOpen: boolean;
  onClose: () => void;
}

export function AuthDebugInfo({ isOpen, onClose }: AuthDebugInfoProps) {
  const { user, isAuthenticated, isLoading, error } = useAuth0();

  useEffect(() => {
    // Auth state debug info - removed console.log
  }, [user, isAuthenticated, isLoading, error]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <Card className="w-full max-w-2xl max-h-[90vh] overflow-auto">
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle>Authentication Debug Information</CardTitle>
            <Button variant="ghost" size="icon" onClick={onClose}>
              <X className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-2">
            <span className="font-semibold">Status:</span>
            <Badge variant={isAuthenticated ? 'default' : 'destructive'}>
              {isLoading ? 'Loading...' : isAuthenticated ? 'Authenticated' : 'Not Authenticated'}
            </Badge>
          </div>

          {error && (
            <div className="bg-red-50 border border-red-200 rounded p-3">
              <p className="text-sm text-red-700 font-semibold">Error:</p>
              <p className="text-sm text-red-600">{error.message}</p>
            </div>
          )}

          {user && (
            <div className="space-y-2">
              <h4 className="font-semibold">User Information:</h4>
              <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
                {JSON.stringify(user, null, 2)}
              </pre>
            </div>
          )}

          <div className="space-y-2">
            <h4 className="font-semibold">All Auth Claims:</h4>
            <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
              {JSON.stringify({
                isAuthenticated,
                isLoading,
                error: error?.message || null,
                hasUser: !!user
              }, null, 2)}
            </pre>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

