import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/useAuth';
import { Building2, RefreshCw } from 'lucide-react';

export const OrganizationSelector: React.FC = () => {
    const { appUser, isSignedIn } = useAuth();
    const navigate = useNavigate();

    useEffect(() => {
        if (isSignedIn && appUser?.organizationId) {
            navigate('/');
        }
    }, [isSignedIn, appUser, navigate]);

    if (!isSignedIn) {
        return (
            <div className="min-h-screen bg-background flex items-center justify-center p-4">
                <div className="max-w-md w-full bg-surface rounded-2xl border border-border/40 p-8 text-center">
                    <div className="w-16 h-16 rounded-2xl bg-amber-500/20 flex items-center justify-center mx-auto mb-4">
                        <Building2 className="w-8 h-8 text-amber-500" />
                    </div>
                    <h1 className="text-2xl font-bold text-text-main mb-2">
                        Não Conectado
                    </h1>
                    <p className="text-text-muted mb-6">
                        Você precisa estar logado para acessar esta página.
                    </p>
                    <button
                        onClick={() => navigate('/login')}
                        className="w-full py-3 bg-primary text-white rounded-xl font-bold"
                    >
                        Ir para Login
                    </button>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-background flex items-center justify-center">
            <div className="text-center">
                <RefreshCw className="w-12 h-12 text-primary animate-spin mx-auto mb-4" />
                <p className="text-text-main font-bold mb-2">Redirecionando...</p>
                <p className="text-text-muted text-sm">Carregando sua organização</p>
            </div>
        </div>
    );
};