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

export default function RegistrationForm() {
    const { user, completeRegistration, error: authError } = useAuth();
    const [clientName, setClientName] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        if (!clientName.trim()) {
            setError('Organization name is required');
            return;
        }

        setLoading(true);
        setError(null);

        const success = await completeRegistration(clientName.trim());
        if (!success) setLoading(false);
    };

    return (
        <div className="registration-container">
            <div className="registration-card">
                <h1>Complete Registration</h1>
                <p className="registration-subtitle">
                    Welcome, {user?.name || user?.email}! Set up your organization to get started.
                </p>

                {(error || authError) && <div className="error-message">{error || authError}</div>}

                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="clientName">Organization Name</label>
                        <input
                            type="text"
                            id="clientName"
                            value={clientName}
                            onChange={(e) => setClientName(e.target.value)}
                            placeholder="e.g., Acme Corporation"
                            disabled={loading}
                            autoFocus
                        />
                        <span className="form-help">This is the name that will appear on your advertising accounts</span>
                    </div>

                    <button type="submit" className="btn-primary" disabled={loading}>
                        {loading ? 'Creating...' : 'Create Organization'}
                    </button>
                </form>
            </div>
        </div>
    );
}
