/* ============== Minassa Cars — Search Results ============== */
function FilterGroup({ title, children, defaultOpen = true }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="fgroup">
      <button className="fgroup-head" onClick={() => setOpen(o => !o)}>
        {title}
        <Icon name="chevronDown" size={16} style={{ transform: open ? 'none' : 'rotate(90deg)', transition: '.16s', color: 'var(--ink-3)' }} />
      </button>
      {open && <div className="fgroup-body">{children}</div>}
    </div>
  );
}

function CheckRow({ label, count, checked, onToggle }) {
  return (
    <label className="checkrow">
      <span className="cbox" data-on={checked}>{checked && <Icon name="check" size={13} sw={2.6} />}</span>
      <span className="checkrow-label">{label}</span>
      {count != null && <span className="checkrow-count">{count}</span>}
      <input type="checkbox" checked={checked} onChange={onToggle} hidden />
    </label>
  );
}

function FilterPanel({ filters, setFilters }) {
  const toggle = (key, val) => setFilters(f => {
    const set = new Set(f[key]);
    set.has(val) ? set.delete(val) : set.add(val);
    return { ...f, [key]: set };
  });
  const brandCounts = { Toyota: 5, 'Mercedes-Benz': 1, Hyundai: 2, Nissan: 1, Dacia: 1 };
  return (
    <div className="filters">
      <FilterGroup title="الماركة">
        {BRANDS.slice(0, 5).map(b => (
          <CheckRow key={b} label={b} count={brandCounts[b]} checked={filters.brand.has(b)} onToggle={() => toggle('brand', b)} />
        ))}
        <button className="fmore">عرض المزيد <Icon name="chevronDown" size={13} /></button>
      </FilterGroup>

      <FilterGroup title="السعر (MRU)">
        <div className="range-inputs">
          <div className="control range-c"><input placeholder="الأدنى" /></div>
          <span className="range-dash" />
          <div className="control range-c"><input placeholder="الأقصى" /></div>
        </div>
        <div className="range-track"><div className="range-fill" /><span className="range-knob" style={{ left: '18%' }} /><span className="range-knob" style={{ left: '72%' }} /></div>
      </FilterGroup>

      <FilterGroup title="السنة">
        <div className="range-inputs">
          <div className="control range-c"><select defaultValue=""><option value="">من</option><option>2015</option><option>2018</option><option>2020</option></select></div>
          <span className="range-dash" />
          <div className="control range-c"><select defaultValue=""><option value="">إلى</option><option>2022</option><option>2023</option><option>2024</option></select></div>
        </div>
      </FilterGroup>

      <FilterGroup title="الوقود">
        {FUELS.map(f => <CheckRow key={f} label={f} checked={filters.fuel.has(f)} onToggle={() => toggle('fuel', f)} />)}
      </FilterGroup>

      <FilterGroup title="ناقل الحركة">
        {['أوتوماتيك', 'يدوي'].map(g => <CheckRow key={g} label={g} checked={filters.gearbox.has(g)} onToggle={() => toggle('gearbox', g)} />)}
      </FilterGroup>

      <FilterGroup title="نوع الهيكل" defaultOpen={false}>
        {BODIES.map(b => <CheckRow key={b} label={b} checked={filters.body.has(b)} onToggle={() => toggle('body', b)} />)}
      </FilterGroup>

      <FilterGroup title="المدينة" defaultOpen={false}>
        {CITIES.slice(0, 4).map(c => <CheckRow key={c} label={c} checked={filters.city.has(c)} onToggle={() => toggle('city', c)} />)}
      </FilterGroup>

      <FilterGroup title="الحالة" defaultOpen={false}>
        {['جديد', 'مستعمل'].map(c => <CheckRow key={c} label={c} checked={filters.condition.has(c)} onToggle={() => toggle('condition', c)} />)}
      </FilterGroup>
    </div>
  );
}

const SORTS = ['الأكثر صلة', 'السعر تصاعدي', 'السعر تنازلي', 'الأحدث', 'أقل مسافة'];

function SearchScreen({ mobile, nav }) {
  const empty = { brand: new Set(), fuel: new Set(), gearbox: new Set(), body: new Set(), city: new Set(), condition: new Set() };
  const [filters, setFilters] = useState(empty);
  const [sort, setSort] = useState('الأكثر صلة');
  const [sheet, setSheet] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => { const t = setTimeout(() => setLoading(false), 850); return () => clearTimeout(t); }, []);

  const activeCount = Object.values(filters).reduce((n, s) => n + s.size, 0);

  let list = CARS.filter(c => {
    if (filters.brand.size && !filters.brand.has(c.brand)) return false;
    if (filters.fuel.size && !filters.fuel.has(c.fuel)) return false;
    if (filters.gearbox.size && !filters.gearbox.has(c.gearbox)) return false;
    if (filters.body.size && !filters.body.has(c.body)) return false;
    if (filters.city.size && !filters.city.has(c.city)) return false;
    if (filters.condition.size && !filters.condition.has(c.condition)) return false;
    return true;
  });
  if (sort === 'السعر تصاعدي') list = [...list].sort((a, b) => a.price - b.price);
  if (sort === 'السعر تنازلي') list = [...list].sort((a, b) => b.price - a.price);
  if (sort === 'الأحدث') list = [...list].sort((a, b) => b.year - a.year);
  if (sort === 'أقل مسافة') list = [...list].sort((a, b) => a.km - b.km);

  const sponsored = list.filter(c => c.sponsored);
  const regular = list.filter(c => !c.sponsored);

  return (
    <div className="screen search-screen">
      <div className="wrap" style={{ paddingTop: 22, paddingBottom: 60 }}>
        {/* breadcrumb + title */}
        <div className="search-top">
          <div>
            <div className="crumb">الرئيسية <Icon name="chevron" size={13} /> الإعلانات</div>
            <h1 className="search-h1">سيارات للبيع في موريتانيا</h1>
            <div className="search-count">{loading ? '…' : `${list.length} سيارة`} {activeCount > 0 && !loading && <span className="pill pill-blue" style={{ marginInlineStart: 6 }}>{activeCount} {activeCount > 1 ? 'فلاتر' : 'فلتر'}</span>}</div>
          </div>
          <div className="search-tools">
            <button className="btn btn-ghost btn-sm only-mobile" onClick={() => setSheet(true)}>
              <Icon name="sliders" size={16} /> الفلاتر {activeCount > 0 && `· ${activeCount}`}
            </button>
            <div className="sort-control">
              <Icon name="sort" size={16} />
              <select value={sort} onChange={e => setSort(e.target.value)}>
                {SORTS.map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
          </div>
        </div>

        <div className="search-layout">
          {/* desktop filter rail */}
          <aside className="filter-rail only-desktop">
            <div className="filter-rail-head">
              <span><Icon name="sliders" size={16} /> الفلاتر</span>
              {activeCount > 0 && <button className="clear-link" onClick={() => setFilters(empty)}>مسح الكل</button>}
            </div>
            <FilterPanel filters={filters} setFilters={setFilters} />
          </aside>

          {/* results */}
          <div className="results">
            {loading ? (
              <div className="results-grid">{Array.from({ length: 6 }).map((_, i) => <SkeletonCard key={i} />)}</div>
            ) : list.length === 0 ? (
              <EmptyState title="لا توجد سيارات مطابقة" sub="حاول توسيع معاييرك أو مسح بعض الفلاتر." action="مسح الفلاتر" onAction={() => setFilters(empty)} />
            ) : (
              <>
                {sponsored.length > 0 && (
                  <div className="sponsored-block">
                    <div className="sponsored-flag"><Icon name="bolt" size={14} /> إعلانات ممولة</div>
                    <div className="results-grid">
                      {sponsored.map(c => <CarCard key={c.id} car={c} onOpen={() => nav('detail')} />)}
                    </div>
                  </div>
                )}
                <div className="results-grid">
                  {regular.map(c => <CarCard key={c.id} car={c} onOpen={() => nav('detail')} />)}
                </div>
              </>
            )}
          </div>
        </div>
      </div>

      {/* mobile bottom sheet — portal into phone frame so it pins to the visible viewport */}
      {sheet && ReactDOM.createPortal(
        <div className="sheet-scrim" onClick={() => setSheet(false)}>
          <div className="sheet" onClick={e => e.stopPropagation()}>
            <div className="sheet-grab" />
            <div className="sheet-head">
              <span>الفلاتر {activeCount > 0 && `· ${activeCount}`}</span>
              <button className="clear-link" onClick={() => setFilters(empty)}>مسح الكل</button>
            </div>
            <div className="sheet-body"><FilterPanel filters={filters} setFilters={setFilters} /></div>
            <div className="sheet-foot">
              <button className="btn btn-primary btn-block btn-lg" onClick={() => setSheet(false)}>
                عرض {list.length} نتيجة
              </button>
            </div>
          </div>
        </div>,
        document.getElementById('phone-screen') || document.body
      )}
    </div>
  );
}

Object.assign(window, { SearchScreen });