App.AddComboModal = function AddComboModal({ shareCode, onComboAdded, onClose }) {
    const [name, setName] = React.useState('');
    const [selectedCarIds, setSelectedCarIds] = React.useState([]);
    const [selectedCategoryIds, setSelectedCategoryIds] = React.useState([]);
    const [selectedConfig, setSelectedConfig] = React.useState(null);
    const [saving, setSaving] = React.useState(false);
    const [error, setError] = React.useState('');
    const [activeTab, setActiveTab] = React.useState('cars');
    const [generating, setGenerating] = React.useState(false);
    const [showNamePrompt, setShowNamePrompt] = React.useState(false);
    const [allCars, setAllCars] = React.useState([]);
    const [allCategories, setAllCategories] = React.useState([]);
    const nameInputRef = React.useRef(null);

    // Load cars and categories for summary strip display and name generation
    React.useEffect(() => {
        App.API.get('cars').then(data => setAllCars(data));
        App.API.get('categories').then(data => setAllCategories(data));
    }, []);


    const isValid = name.trim() && selectedConfig && (selectedCarIds.length > 0 || selectedCategoryIds.length > 0);

    const generateName = () => {
        setGenerating(true);
        let url = 'name-generator?type=combo&count=1';
        const selectedCars = allCars.filter(c => selectedCarIds.includes(c.id));
        selectedCars.forEach(c => {
            url += '&cars[]=' + encodeURIComponent(c.name);
        });
        const selectedCats = allCategories.filter(c => selectedCategoryIds.includes(c.id));
        selectedCats.forEach(c => {
            url += '&categories[]=' + encodeURIComponent(c.name);
        });
        if (selectedConfig) url += '&track=' + encodeURIComponent(selectedConfig.trackName);

        App.API.get(url).then(data => {
            if (data.names && data.names.length > 0) {
                setName(data.names[0]);
            }
            setGenerating(false);
        }).catch(() => {
            setGenerating(false);
        });
    };

    const handleSubmit = () => {
        setError('');
        if (!name.trim()) {
            setShowNamePrompt(true);
            return;
        }
        if (!selectedConfig) { setError('Please select a track'); return; }
        if (selectedCarIds.length === 0 && selectedCategoryIds.length === 0) {
            setError('Please select at least one car or category');
            return;
        }

        setSaving(true);

        // Step 1: Create the combo
        App.API.post('combos', {
            name: name.trim(),
            trackId: selectedConfig.id,
            cars: selectedCarIds,
            categories: selectedCategoryIds,
            fingerprint: App.fingerprint,
        }).then(comboData => {
            // Step 2: Add the combo to the poll
            return App.API.post('polls/' + shareCode, {
                _action: 'add-combo',
                comboId: comboData.id,
                fingerprint: App.fingerprint,
            });
        }).then(() => {
            onComboAdded();
        }).catch(err => {
            setError(err.message);
            setSaving(false);
        });
    };

    const handleNamePromptEnter = () => {
        setShowNamePrompt(false);
        if (nameInputRef.current) nameInputRef.current.focus();
    };

    const handleNamePromptGenerate = () => {
        setShowNamePrompt(false);
        generateName();
    };

    const removeCarFromSummary = (carId) => {
        setSelectedCarIds(prev => prev.filter(id => id !== carId));
    };

    // Build summary data
    const selectedCarObjects = allCars.filter(c => selectedCarIds.includes(c.id));

    const trackDisplay = selectedConfig
        ? (selectedConfig.configName
            ? selectedConfig.trackName + ' - ' + selectedConfig.configName
            : selectedConfig.trackName)
        : null;

    const carTabLabel = selectedCarIds.length + selectedCategoryIds.length > 0
        ? 'Select Cars (' + (selectedCarIds.length + selectedCategoryIds.length) + ')'
        : 'Select Cars';
    const trackTabLabel = selectedConfig ? 'Select Track \u2713' : 'Select Track';

    return (
        <div className="page">
            <div className="page-header">
                <h1>Add Combo to Poll</h1>
                <div className="page-header-actions">
                    <button className="btn" onClick={onClose}>Cancel</button>
                </div>
            </div>
            <p className="page-subtitle">Pick cars and a track to create a race combination</p>

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

            <div className="form-name-row">
                <input
                    ref={nameInputRef}
                    type="text"
                    className="form-input"
                    placeholder="e.g., MX-5 Cup at Lime Rock"
                    value={name}
                    onChange={e => setName(e.target.value)}
                    maxLength={200}
                />
                <button
                    className="btn btn-primary"
                    onClick={handleSubmit}
                    disabled={saving}
                >
                    {saving ? 'Adding...' : 'Add to Poll'}
                </button>
            </div>
            <div className="form-generate-row">
                <button className="btn btn-sm" onClick={generateName} disabled={generating}>
                    {generating ? 'Generating...' : '\uD83C\uDFB2 Generate Name'}
                </button>
            </div>

            <div className="picker-sticky-controls">
                <div className="picker-summary">
                    <div className="picker-summary-track">
                        {trackDisplay
                            ? <span>{trackDisplay}</span>
                            : <span className="summary-muted">No track selected</span>
                        }
                    </div>
                    <div className="picker-summary-cars">
                        {selectedCarObjects.length > 0 ? (
                            selectedCarObjects.map(car => (
                                <div key={car.id} className="summary-car-item">
                                    <img
                                        src={'images/cars/' + car.image_filename}
                                        alt={car.name}
                                        className="summary-car-thumb"
                                        title={'Click to remove: ' + car.name}
                                        onClick={() => removeCarFromSummary(car.id)}
                                    />
                                    <span className="summary-car-name">{car.name}</span>
                                </div>
                            ))
                        ) : (
                            <span className="summary-muted">No cars selected</span>
                        )}
                        {selectedCategoryIds.length > 0 && (
                            <span className="summary-cat-note">+ {selectedCategoryIds.length} category(ies)</span>
                        )}
                    </div>
                </div>

                <div className="picker-tabs">
                    <button
                        className={'picker-tab' + (activeTab === 'cars' ? ' active' : '')}
                        onClick={() => setActiveTab('cars')}
                    >
                        {carTabLabel}
                    </button>
                    <button
                        className={'picker-tab' + (activeTab === 'track' ? ' active' : '')}
                        onClick={() => setActiveTab('track')}
                    >
                        {trackTabLabel}
                    </button>
                </div>
            </div>

            {activeTab === 'cars' && (
                <App.CarPicker
                    selectedCarIds={selectedCarIds}
                    selectedCategoryIds={selectedCategoryIds}
                    onCarsChange={setSelectedCarIds}
                    onCategoriesChange={setSelectedCategoryIds}
                />
            )}

            {activeTab === 'track' && (
                <App.TrackPicker
                    selectedTrackConfigId={selectedConfig ? selectedConfig.id : null}
                    onSelect={setSelectedConfig}
                />
            )}

            {showNamePrompt && (
                <App.NamePromptModal
                    type="combo"
                    onEnterName={handleNamePromptEnter}
                    onGenerate={handleNamePromptGenerate}
                    onClose={() => setShowNamePrompt(false)}
                />
            )}
        </div>
    );
};