App.CarPicker = function CarPicker({ selectedCarIds, selectedCategoryIds, onCarsChange, onCategoriesChange }) {
    const [cars, setCars] = React.useState([]);
    const [categories, setCategories] = React.useState([]);
    const [filterCat, setFilterCat] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [search, setSearch] = React.useState('');
    const [contentMode, setContentMode] = App.useContentFilter();

    React.useEffect(() => {
        Promise.all([
            App.API.get('cars'),
            App.API.get('categories'),
        ]).then(([carsData, catsData]) => {
            setCars(carsData);
            setCategories(catsData);
            setLoading(false);
        });
    }, []);

    const toggleCar = (carId) => {
        const next = selectedCarIds.includes(carId)
            ? selectedCarIds.filter(id => id !== carId)
            : [...selectedCarIds, carId];
        onCarsChange(next);
    };

    const toggleCategory = (catId) => {
        const next = selectedCategoryIds.includes(catId)
            ? selectedCategoryIds.filter(id => id !== catId)
            : [...selectedCategoryIds, catId];
        onCategoriesChange(next);
    };

    let filtered = filterCat ? cars.filter(c => c.category_id == filterCat) : cars;

    if (search) {
        const q = search.toLowerCase();
        filtered = filtered.filter(c => c.name.toLowerCase().includes(q));
    }

    if (contentMode === 'included') {
        filtered = filtered.filter(c => c.is_free == 1);
    }

    if (loading) return <App.Loading />;

    return (
        <div className="car-picker">
            <h3>Select Cars</h3>
            <p className="picker-hint">Pick individual cars or select entire categories</p>

            <App.ContentToggle mode={contentMode} onChange={setContentMode} />

            <App.CategoryFilter categories={categories} activeId={filterCat} onChange={setFilterCat} />

            <input
                type="text"
                className="search-input"
                placeholder="Search cars..."
                value={search}
                onChange={e => setSearch(e.target.value)}
            />

            <div className="category-toggles">
                <strong>Select Entire Category: </strong>
                {categories.map(cat => (
                    <label key={cat.id} className={'cat-toggle' + (selectedCategoryIds.includes(cat.id) ? ' active' : '')}>
                        <input
                            type="checkbox"
                            checked={selectedCategoryIds.includes(cat.id)}
                            onChange={() => toggleCategory(cat.id)}
                        />
                        {cat.name}
                    </label>
                ))}
            </div>

            <div className="card-grid">
                {filtered.map(car => (
                    <App.CarCard
                        key={car.id}
                        car={car}
                        selectable={true}
                        selected={selectedCarIds.includes(car.id) || selectedCategoryIds.includes(car.category_id)}
                        onToggle={toggleCar}
                    />
                ))}
            </div>
        </div>
    );
};