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

export default function ContactStep() {
    const { user } = useAuth();
    const { contactData, setContactData, saveContact, goBack, loading, error } = useRegistration();

    // Pre-fill from auth claims on mount
    useEffect(() => {
        if (user) {
            setContactData(prev => ({
                contactName: prev.contactName || user.displayName || '',
                contactEmail: prev.contactEmail || user.email || '',
                contactPhone: prev.contactPhone || '',
            }));
        }
    }, [user, setContactData]);

    const handleChange = useCallback((e) => {
        const { name, value } = e.target;
        setContactData(prev => ({ ...prev, [name]: value }));
    }, [setContactData]);

    const handleSubmit = useCallback((e) => {
        e.preventDefault();
        saveContact();
    }, [saveContact]);

    return (
        <div className="step-card">
            <div className="step-header">
                <span className="step-icon">👤</span>
                <h2>Contact Information</h2>
                <p className="step-description">
                    How should we reach you about your advertising account?
                </p>
            </div>

            {user && (
                <div className="info-card">
                    <div className="info-card-primary">{user.displayName}</div>
                    <div className="info-card-secondary">{user.email}</div>
                </div>
            )}

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

            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="contactName">Full Name <span className="required">*</span></label>
                    <input
                        type="text"
                        id="contactName"
                        name="contactName"
                        value={contactData.contactName}
                        onChange={handleChange}
                        placeholder="Jane Smith"
                        required
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="contactEmail">Email <span className="required">*</span></label>
                    <input
                        type="email"
                        id="contactEmail"
                        name="contactEmail"
                        value={contactData.contactEmail}
                        onChange={handleChange}
                        placeholder="jane@example.com"
                        required
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="contactPhone">Phone</label>
                    <input
                        type="tel"
                        id="contactPhone"
                        name="contactPhone"
                        value={contactData.contactPhone}
                        onChange={handleChange}
                        placeholder="(555) 123-4567"
                    />
                </div>

                <div className="step-actions">
                    <button type="button" className="btn-secondary" onClick={goBack}>
                        ← Back
                    </button>
                    <button type="submit" className="btn-primary" disabled={loading}>
                        {loading ? 'Saving...' : 'Continue →'}
                    </button>
                </div>
            </form>
        </div>
    );
}