import React from 'react';
import { useAuth } from '../auth/AuthProvider';

export default function SignInOverlay() {
    const { authState, error, signIn, retrySignIn } = useAuth();

    if (authState === 'needsRegistration') {
        return (
            <div className="signin-overlay">
                <div className="signin-card">
                    <div className="signin-icon">◆</div>
                    <h1>AdPlatform</h1>
                    <p className="signin-subtitle">Account not found</p>
                    <div className="error-message">
                        Your account doesn't have access to AdPlatform yet.
                        Please contact your administrator or complete registration
                        before signing in.
                    </div>
                    <button onClick={retrySignIn} className="btn-signin btn-secondary">
                        Try a different account
                    </button>
                </div>
            </div>
        );
    }

    if (authState === 'error') {
        return (
            <div className="signin-overlay">
                <div className="signin-card">
                    <div className="signin-icon">◆</div>
                    <h1>AdPlatform</h1>
                    <p className="signin-subtitle">Sign-in failed</p>
                    {error && <div className="error-message">{error}</div>}
                    <button onClick={retrySignIn} className="btn-signin">
                        Try again
                    </button>
                </div>
            </div>
        );
    }

    // unauthenticated — default sign-in prompt
    return (
        <div className="signin-overlay">
            <div className="signin-card">
                <div className="signin-icon">◆</div>
                <h1>AdPlatform</h1>
                <p className="signin-subtitle">Sign in to manage your advertising campaigns</p>
                <button onClick={signIn} className="btn-signin">
                    Sign in with Microsoft
                </button>
            </div>
        </div>
    );
}
