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

export default function SignInStep() {
    const { signIn, isLoading, error } = useAuth();
    const [mode, setMode] = useState(null); // null | 'new' | 'returning'

    const providers = (
        <div className="provider-list">
            <button
                className="btn-provider btn-provider-google"
                onClick={() => signIn('google')}
                disabled={isLoading}
            >
                <span className="provider-icon">G</span>
                {isLoading ? 'Connecting...' : 'Continue with Google'}
            </button>

            <button
                className="btn-provider btn-provider-apple"
                onClick={() => signIn('apple')}
                disabled={isLoading}
            >
                <span className="provider-icon">🍎</span>
                {isLoading ? 'Connecting...' : 'Continue with Apple'}
            </button>

            <button
                className="btn-provider btn-provider-microsoft"
                onClick={() => signIn('microsoft')}
                disabled={isLoading}
            >
                <span className="provider-icon">⊞</span>
                {isLoading ? 'Connecting...' : 'Continue with Microsoft'}
            </button>
        </div>
    );

    // Landing — user hasn't chosen yet
    if (!mode) {
        return (
            <div className="step-card">
                <div className="step-header">
                    <span className="step-icon">🔷</span>
                    <h2>Welcome to AdPlatform</h2>
                    <p className="step-description">
                        What would you like to do?
                    </p>
                </div>

                {error && <div className="error-message">{error}</div>}

                <div className="path-choice">
                    <button
                        className="btn-path btn-path-primary"
                        onClick={() => setMode('new')}
                    >
                        <span className="path-icon">✨</span>
                        <div className="path-text">
                            <strong>Apply for Access</strong>
                            <span>New to AdPlatform? Start your registration here.</span>
                        </div>
                        <span className="path-arrow">→</span>
                    </button>

                    <button
                        className="btn-path btn-path-secondary"
                        onClick={() => setMode('returning')}
                    >
                        <span className="path-icon">🔄</span>
                        <div className="path-text">
                            <strong>Check My Application</strong>
                            <span>Already applied? Sign in to view your status.</span>
                        </div>
                        <span className="path-arrow">→</span>
                    </button>
                </div>
            </div>
        );
    }

    // New applicant — sign up path
    if (mode === 'new') {
        return (
            <div className="step-card">
                <button className="btn-back" onClick={() => setMode(null)}>← Back</button>
                <div className="step-header">
                    <span className="step-icon">✨</span>
                    <h2>Create Your Account</h2>
                    <p className="step-description">
                        Choose how you'd like to sign up. We'll create your AdPlatform identity
                        and walk you through the application.
                    </p>
                </div>

                {error && <div className="error-message">{error}</div>}

                {providers}

                <p className="step-fine-print">
                    By continuing, you agree to AdPlatform's Terms of Service and Privacy Policy.
                    Your account will be managed through Microsoft Entra External ID.
                </p>
            </div>
        );
    }

    // Returning applicant — sign in path
    return (
        <div className="step-card">
            <button className="btn-back" onClick={() => setMode(null)}>← Back</button>
            <div className="step-header">
                <span className="step-icon">🔄</span>
                <h2>Welcome Back</h2>
                <p className="step-description">
                    Sign in with the same account you used when you applied.
                    We'll pick up right where you left off.
                </p>
            </div>

            {error && <div className="error-message">{error}</div>}

            {providers}

            <p className="step-fine-print">
                Use the same provider you signed up with. If you need help, contact
                support@positivespend.com.
            </p>
        </div>
    );
}
