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

function ReviewSection({ title, items }) {
    const filtered = items.filter(([, value]) => value);
    if (filtered.length === 0) return null;

    return (
        <div className="review-section">
            <h3 className="review-section-title">{title}</h3>
            <div className="review-section-body">
                {filtered.map(([label, value]) => (
                    <div key={label} className="review-row">
                        <span className="review-label">{label}</span>
                        <span className="review-value">{value}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default function ReviewStep() {
    const { user } = useAuth();
    const { contactData, businessData, submitApplication, goBack, loading, error } = useRegistration();

    return (
        <div className="step-card">
            <div className="step-header">
                <span className="step-icon">📋</span>
                <h2>Review Your Application</h2>
                <p className="step-description">
                    Please verify all information before submitting.
                </p>
            </div>

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

            <ReviewSection title="Account" items={[
                ['Signed in as', user?.displayName],
                ['Email', user?.email],
                ['Provider', user?.provider],
            ]} />

            <ReviewSection title="Contact" items={[
                ['Name', contactData.contactName],
                ['Email', contactData.contactEmail],
                ['Phone', contactData.contactPhone],
            ]} />

            <ReviewSection title="Business" items={[
                ['Business Name', businessData.businessName],
                ['Website', businessData.websiteUrl],
                ['Category', businessData.businessCategory],
                ['Description', businessData.businessDescription],
            ]} />

            <div className="info-banner">
                <strong>What happens next?</strong> After submission, our team will review your
                application. Upon approval, your advertising accounts will be created across
                Google Ads, Meta, and TikTok with the naming convention{' '}
                <code>ADP-{businessData.businessName.replace(/\s+/g, '') || 'YourBusiness'}-XXXX</code>.
            </div>

            <div className="step-actions">
                <button className="btn-secondary" onClick={goBack}>
                    ← Back
                </button>
                <button className="btn-primary" onClick={submitApplication} disabled={loading}>
                    {loading ? 'Submitting...' : 'Submit Application ✓'}
                </button>
            </div>
        </div>
    );
}
