// Dual-mode track config modal
// Browse mode (no onSelect): read-only info table
// Picker mode (onSelect provided): clickable rows for selection
App.TrackConfigModal = function TrackConfigModal({ track, configs: configsProp, onSelect, onClose }) {
    const [configs, setConfigs] = React.useState(configsProp || null);
    const [loading, setLoading] = React.useState(!configsProp);

    React.useEffect(() => {
        if (!configsProp && track) {
            setLoading(true);
            App.API.get('track-configs?track_id=' + track.id).then(data => {
                setConfigs(data);
                setLoading(false);
            });
        }
    }, [track, configsProp]);

    if (!track) return null;

    const pickerMode = typeof onSelect === 'function';

    const handleRowClick = (cfg) => {
        if (pickerMode) {
            onSelect({
                id: cfg.id,
                trackId: cfg.track_id,
                trackName: track.name,
                configName: cfg.config_name,
            });
            onClose();
        }
    };

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className={'modal-dialog modal-wide'} onClick={e => e.stopPropagation()}>
                <h2>{track.name}</h2>
                <p className="modal-subtitle">
                    {pickerMode ? 'Select a configuration' : 'Track Configurations'}
                </p>

                {loading && <App.Loading />}

                {!loading && configs && configs.length === 0 && (
                    <p>No configurations found.</p>
                )}

                {!loading && configs && configs.length > 0 && (
                    <table className="config-table">
                        <thead>
                            <tr>
                                <th>Configuration</th>
                                <th>Type</th>
                                <th>Length (mi)</th>
                                <th>Turns</th>
                                <th>Night</th>
                                <th>Free</th>
                            </tr>
                        </thead>
                        <tbody>
                            {configs.map(cfg => (
                                <tr
                                    key={cfg.id}
                                    className={pickerMode ? 'selectable' : ''}
                                    onClick={() => handleRowClick(cfg)}
                                >
                                    <td>{cfg.config_name || 'Base'}</td>
                                    <td>{cfg.track_type_name || '-'}</td>
                                    <td>{cfg.length_miles ? Number(cfg.length_miles).toFixed(2) : '-'}</td>
                                    <td>{cfg.turns || '-'}</td>
                                    <td>{cfg.has_night == 1 ? 'Yes' : 'No'}</td>
                                    <td>{cfg.is_free == 1 ? 'Yes' : 'No'}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}

                <div className="modal-actions">
                    <button className="btn" onClick={onClose}>Close</button>
                </div>
            </div>
        </div>
    );
};