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

export default function ConfirmationStep() {
    const { user } = useAuth();
    const { businessData, registrationId } = useRegistration();

    return (
        <div className="step-card">
            <div className="confirmation-hero">
                <div className="confirmation-check">✓</div>
                <h2>Application Submitted!</h2>
                <p className="step-description">
                    Thank you{businessData.businessName ? `, ${businessData.businessName}` : ''}.
                    Your application is now under review.
                    We'll notify you at <strong>{user?.email}</strong> once approved.
                </p>
            </div>

            {registrationId && (
                <div className="info-card">
                    <div className="info-card-secondary">Registration ID</div>
                    <div className="info-card-primary"><code>{registrationId}</code></div>
                </div>
            )}

            <div className="next-steps">
                <h3 className="next-steps-title">What happens next?</h3>

                <div className="next-steps-list">
                    <div className="next-step-item">
                        <div className="next-step-icon">🔍</div>
                        <div>
                            <div className="next-step-label">Application Review</div>
                            <div className="next-step-desc">
                                Our team reviews your information (typically 1–2 business days)
                            </div>
                        </div>
                    </div>

                    <div className="next-step-item">
                        <div className="next-step-icon">🏗️</div>
                        <div>
                            <div className="next-step-label">Account Creation</div>
                            <div className="next-step-desc">
                                Upon approval, we create your accounts on Google Ads, Meta, and TikTok
                            </div>
                        </div>
                    </div>

                    <div className="next-step-item">
                        <div className="next-step-icon">🚀</div>
                        <div>
                            <div className="next-step-label">Get Started</div>
                            <div className="next-step-desc">
                                You'll receive login credentials and can begin creating campaigns
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="info-banner info-banner-highlight">
                <strong>Account naming convention:</strong> Your advertising accounts will be
                created as{' '}
                <code>ADP-{businessData.businessName.replace(/\s+/g, '') || 'YourBusiness'}-XXXX</code>{' '}
                across all platforms for easy identification.
            </div>
        </div>
    );
}
