/* Search Results Page */

const SearchResults = ({ setPage }) => {
  const [query, setQuery] = useState('galaxy s25');
  const [sort, setSort] = useState('relevance');
  const [view, setView] = useState('grid'); // grid | list
  const [filters, setFilters] = useState({
    brand: 'all',
    priceMin: 0,
    priceMax: 2000,
    screen: 'all',
    release: 'all',
    feature: [],
  });

  const facets = {
    brand: [
      { k: 'all',     label: 'All brands', count: 287 },
      { k: 'samsung', label: 'Samsung',    count: 24 },
      { k: 'apple',   label: 'Apple',      count: 12 },
      { k: 'xiaomi',  label: 'Xiaomi',     count: 18 },
      { k: 'google',  label: 'Google',     count: 6 },
      { k: 'oneplus', label: 'OnePlus',    count: 4 },
    ],
    screen: [
      { k: 'all',  label: 'Any size', count: 287 },
      { k: 'small', label: '< 6.2"',   count: 18 },
      { k: 'med',   label: '6.2–6.6"', count: 96 },
      { k: 'large', label: '6.7–6.9"', count: 142 },
      { k: 'xl',    label: '> 6.9"',   count: 31 },
    ],
    release: [
      { k: 'all',  label: 'Any time', count: 287 },
      { k: '90d',  label: 'Last 90 days', count: 42 },
      { k: '2025', label: '2025', count: 124 },
      { k: '2024', label: '2024', count: 89 },
      { k: 'older',label: 'Older', count: 32 },
    ],
    feature: [
      'Periscope camera', '5G', 'Wireless charging', 'IP68', 'S Pen', 'Foldable', 'mmWave', 'Wi-Fi 7',
    ],
  };

  const results = [
    { name: 'Galaxy S25 Ultra',     brand: 'Samsung', score: 90, price: '$1,299', spec: '6.9" · SD 8 Elite · 12GB · 5000 mAh', release: 'Feb 2025', match: 98 },
    { name: 'Galaxy S25+',          brand: 'Samsung', score: 86, price: '$999',   spec: '6.7" · SD 8 Elite · 12GB · 4900 mAh', release: 'Feb 2025', match: 94 },
    { name: 'Galaxy S25',           brand: 'Samsung', score: 84, price: '$799',   spec: '6.2" · SD 8 Elite · 12GB · 4000 mAh', release: 'Feb 2025', match: 92 },
    { name: 'Galaxy S25 Edge',      brand: 'Samsung', score: 83, price: '$1,099', spec: '6.7" · SD 8 Elite · 12GB · 3900 mAh', release: 'Apr 2025', match: 90 },
    { name: 'Galaxy S24 Ultra',     brand: 'Samsung', score: 87, price: '$899',   spec: '6.8" · SD 8 Gen 3 · 12GB · 5000 mAh', release: 'Jan 2024', match: 78 },
    { name: 'Galaxy S24+',          brand: 'Samsung', score: 82, price: '$699',   spec: '6.7" · SD 8 Gen 3 · 12GB · 4900 mAh', release: 'Jan 2024', match: 74 },
    { name: 'Galaxy S24 FE',        brand: 'Samsung', score: 75, price: '$549',   spec: '6.7" · Exynos 2400e · 8GB · 4700 mAh', release: 'Oct 2024', match: 70 },
    { name: 'Galaxy Z Fold6',       brand: 'Samsung', score: 88, price: '$1,899', spec: '7.6" · SD 8 Gen 3 · 12GB · 4400 mAh', release: 'Jul 2024', match: 62 },
    { name: 'Galaxy Z Flip6',       brand: 'Samsung', score: 82, price: '$1,099', spec: '6.7" · SD 8 Gen 3 · 12GB · 4000 mAh', release: 'Jul 2024', match: 58 },
  ];

  const toggleFeature = (f) => {
    setFilters((s) => ({
      ...s,
      feature: s.feature.includes(f) ? s.feature.filter((x) => x !== f) : [...s.feature, f],
    }));
  };

  return (
    <main className="pb-32">
      {/* Search bar hero */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-10">
        <SectionEyebrow>Search</SectionEyebrow>
        <div className="mt-3 group flex items-center rounded-2xl border-2 border-ink dark:border-white bg-paper dark:bg-d-surface focus-within:border-amber-brand dark:focus-within:border-amber-warm transition">
          <span className="pl-4 pr-2 text-ink dark:text-white"><IconSearch size={20} /></span>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search any phone…"
            className="flex-1 min-w-0 bg-transparent py-4 pr-3 text-[16px] sm:text-[18px] outline-none placeholder:text-ink-soft/70 dark:placeholder:text-d-muted/70"
          />
          {query && (
            <button onClick={() => setQuery('')} className="p-2 mr-1 rounded-md text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white" aria-label="Clear">
              <IconX size={16} />
            </button>
          )}
          <button className="m-1.5 px-4 py-2.5 rounded-xl bg-ink text-white dark:bg-white dark:text-ink text-[13px] font-medium flex items-center gap-1.5">
            Search <IconArrowRight size={14} />
          </button>
        </div>

        {/* Result summary */}
        <div className="mt-4 flex items-center justify-between flex-wrap gap-3">
          <div className="text-[13px] text-ink-soft dark:text-d-muted">
            <span className="num font-semibold text-ink dark:text-white">{results.length}</span> phones match
            {query && <> for "<span className="font-semibold text-ink dark:text-white">{query}</span>"</>}
            <span className="opacity-60"> · 0.04s</span>
          </div>
          <div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center gap-1 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              Sort:
              <select
                value={sort}
                onChange={(e) => setSort(e.target.value)}
                className="bg-transparent border border-line dark:border-d-border rounded-md px-2 py-1 text-[11px] font-mono text-ink dark:text-white"
              >
                <option value="relevance">Relevance</option>
                <option value="score">SpecEagle score</option>
                <option value="price-asc">Price: low to high</option>
                <option value="price-desc">Price: high to low</option>
                <option value="newest">Newest</option>
              </select>
            </div>
            <div className="flex items-center rounded-md border border-line dark:border-d-border bg-paper dark:bg-d-surface p-0.5">
              {[
                { k: 'grid', icon: <IconScale size={13} /> },
                { k: 'list', icon: <IconMinus size={13} /> },
              ].map((v) => (
                <button
                  key={v.k}
                  onClick={() => setView(v.k)}
                  className={`px-2 py-1 rounded ${view === v.k ? 'bg-ink text-white dark:bg-white dark:text-ink' : 'text-ink-soft dark:text-d-muted'}`}
                  aria-label={v.k}
                >
                  {v.icon}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* AI summary banner */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-6">
        <div className="rounded-2xl border border-amber-brand/30 dark:border-amber-warm/30 bg-amber-brand/[0.04] dark:bg-amber-warm/[0.04] p-5 flex items-start gap-4">
          <span className="shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-lg bg-amber-brand/10 dark:bg-amber-warm/15 text-amber-brand dark:text-amber-warm">
            <IconSparkle size={16} />
          </span>
          <div className="flex-1">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm">AI summary</div>
            <p className="mt-1.5 text-[14px] leading-relaxed text-ink dark:text-white text-wrap-pretty">
              The Galaxy S25 line splits into four tiers: <span className="font-semibold">Ultra</span> for camera reach and S Pen, <span className="font-semibold">+ / Edge</span> for the slim-flagship middle, base <span className="font-semibold">S25</span> for the compact pick. The 2025 S25 Ultra scores 2 points lower than its peer the iPhone 16 Pro Max — <button onClick={() => setPage('compare')} className="text-amber-brand dark:text-amber-warm font-medium underline underline-offset-2">see the verdict</button>.
            </p>
          </div>
          <button className="text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white p-1" aria-label="Dismiss">
            <IconX size={14} />
          </button>
        </div>
      </section>

      {/* Filters + results */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Filter sidebar */}
        <aside className="lg:col-span-3">
          <div className="sticky top-20 space-y-5">
            <div>
              <div className="flex items-center justify-between mb-3">
                <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-ink dark:text-white">Filters</div>
                <button className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white">Reset</button>
              </div>
            </div>

            {/* Brand */}
            <FilterBlock title="Brand">
              {facets.brand.map((b) => (
                <FilterRadio
                  key={b.k}
                  label={b.label}
                  count={b.count}
                  checked={filters.brand === b.k}
                  onChange={() => setFilters((s) => ({ ...s, brand: b.k }))}
                />
              ))}
            </FilterBlock>

            {/* Price */}
            <FilterBlock title={`Price · $${filters.priceMin}–$${filters.priceMax}`}>
              <div className="px-1">
                <div className="relative h-1.5 bg-paper-soft dark:bg-d-bg rounded-full">
                  <div className="absolute h-full bg-ink dark:bg-white rounded-full" style={{ left: `${(filters.priceMin / 2000) * 100}%`, right: `${100 - (filters.priceMax / 2000) * 100}%` }} />
                </div>
                <div className="mt-3 flex items-center gap-2">
                  <input
                    type="number"
                    value={filters.priceMin}
                    onChange={(e) => setFilters((s) => ({ ...s, priceMin: Number(e.target.value) }))}
                    className="w-full bg-paper dark:bg-d-surface border border-line dark:border-d-border rounded-md px-2 py-1 text-[12px] num text-ink dark:text-white"
                  />
                  <span className="text-ink-soft dark:text-d-muted text-[12px]">–</span>
                  <input
                    type="number"
                    value={filters.priceMax}
                    onChange={(e) => setFilters((s) => ({ ...s, priceMax: Number(e.target.value) }))}
                    className="w-full bg-paper dark:bg-d-surface border border-line dark:border-d-border rounded-md px-2 py-1 text-[12px] num text-ink dark:text-white"
                  />
                </div>
              </div>
            </FilterBlock>

            {/* Screen */}
            <FilterBlock title="Screen size">
              {facets.screen.map((b) => (
                <FilterRadio
                  key={b.k}
                  label={b.label}
                  count={b.count}
                  checked={filters.screen === b.k}
                  onChange={() => setFilters((s) => ({ ...s, screen: b.k }))}
                />
              ))}
            </FilterBlock>

            {/* Release */}
            <FilterBlock title="Release">
              {facets.release.map((b) => (
                <FilterRadio
                  key={b.k}
                  label={b.label}
                  count={b.count}
                  checked={filters.release === b.k}
                  onChange={() => setFilters((s) => ({ ...s, release: b.k }))}
                />
              ))}
            </FilterBlock>

            {/* Features (multi) */}
            <FilterBlock title="Features">
              <div className="flex flex-wrap gap-1.5">
                {facets.feature.map((f) => {
                  const active = filters.feature.includes(f);
                  return (
                    <button
                      key={f}
                      onClick={() => toggleFeature(f)}
                      className={`text-[11px] px-2 py-1 rounded-full border transition ${
                        active
                          ? 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white'
                          : 'border-line dark:border-d-border text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
                      }`}
                    >
                      {active && '✓ '}{f}
                    </button>
                  );
                })}
              </div>
            </FilterBlock>
          </div>
        </aside>

        {/* Results */}
        <div className="lg:col-span-9">
          {view === 'grid' ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {results.map((r, i) => (
                <button
                  key={i}
                  onClick={() => setPage('phones')}
                  className="group text-left rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-4 hover:border-amber-brand/40 dark:hover:border-amber-warm/40 transition relative"
                >
                  <div className="absolute top-3 right-3 inline-flex items-center gap-1 text-[10px] font-mono uppercase tracking-wider text-amber-brand dark:text-amber-warm">
                    <span className="num font-semibold">{r.match}%</span> match
                  </div>
                  <div className="flex justify-center py-2">
                    <PhoneRender size="md" tint={i % 3 === 0 ? 'amber' : i % 3 === 1 ? 'navy' : 'neutral'} />
                  </div>
                  <div className="mt-2 flex items-center justify-between">
                    <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{r.brand}</span>
                    <ScorePill value={r.score} label="" tone={r.score >= 90 ? 'amber' : 'outline'} />
                  </div>
                  <div className="mt-1.5 font-display font-semibold tracking-tighter2 text-[15px] text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm">{r.name}</div>
                  <div className="num text-[11px] text-ink-soft dark:text-d-muted">{r.spec}</div>
                  <div className="mt-3 pt-3 border-t border-line dark:border-d-border flex items-center justify-between">
                    <span className="num text-[14px] font-semibold text-ink dark:text-white">{r.price}</span>
                    <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{r.release}</span>
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
              <div className="hidden md:grid grid-cols-12 gap-3 px-5 py-2.5 bg-paper-soft dark:bg-d-bg/50 border-b border-line dark:border-d-border text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">
                <div className="col-span-1">Match</div>
                <div className="col-span-3">Phone</div>
                <div className="col-span-4">Key specs</div>
                <div className="col-span-2">Released</div>
                <div className="col-span-1 text-right">Score</div>
                <div className="col-span-1 text-right">Price</div>
              </div>
              {results.map((r, i) => (
                <button
                  key={i}
                  onClick={() => setPage('phones')}
                  className="w-full grid grid-cols-1 md:grid-cols-12 gap-3 px-5 py-3 items-center border-b border-line dark:border-d-border last:border-b-0 hover:bg-paper-soft dark:hover:bg-d-bg transition text-left"
                >
                  <div className="md:col-span-1 num text-[12px] font-semibold text-amber-brand dark:text-amber-warm">{r.match}%</div>
                  <div className="md:col-span-3">
                    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{r.brand}</div>
                    <div className="font-display font-semibold tracking-tighter2 text-[14px] text-ink dark:text-white">{r.name}</div>
                  </div>
                  <div className="md:col-span-4 num text-[12px] text-ink-soft dark:text-d-muted">{r.spec}</div>
                  <div className="md:col-span-2 text-[12px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{r.release}</div>
                  <div className="md:col-span-1 md:text-right num text-[14px] font-semibold text-ink dark:text-white">{r.score}</div>
                  <div className="md:col-span-1 md:text-right num text-[13px] font-semibold text-ink dark:text-white">{r.price}</div>
                </button>
              ))}
            </div>
          )}

          {/* Pagination */}
          <div className="mt-6 flex items-center justify-between">
            <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              Showing 1–{results.length} of 287 results
            </span>
            <div className="flex items-center gap-1">
              <button className="p-2 rounded-md border border-line dark:border-d-border text-ink-soft dark:text-d-muted disabled:opacity-40" disabled aria-label="Previous">
                <IconChevronLeft size={14} />
              </button>
              {[1, 2, 3, '...', 32].map((p, i) => (
                <button
                  key={i}
                  className={`min-w-[32px] h-8 rounded-md text-[12px] font-medium ${
                    p === 1
                      ? 'bg-ink text-white dark:bg-white dark:text-ink'
                      : 'text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
                  }`}
                >
                  {p}
                </button>
              ))}
              <button className="p-2 rounded-md border border-line dark:border-d-border text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white" aria-label="Next">
                <IconChevronRight size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const FilterBlock = ({ title, children }) => (
  <div className="pb-5 border-b border-line dark:border-d-border">
    <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-ink dark:text-white mb-3">{title}</div>
    <div className="space-y-1.5">{children}</div>
  </div>
);

const FilterRadio = ({ label, count, checked, onChange }) => (
  <button onClick={onChange} className="w-full flex items-center gap-2.5 py-1 text-left group">
    <span className={`h-3.5 w-3.5 rounded-full border-2 flex items-center justify-center shrink-0 ${
      checked ? 'border-ink dark:border-white' : 'border-line dark:border-d-border group-hover:border-ink-soft'
    }`}>
      {checked && <span className="h-1.5 w-1.5 rounded-full bg-ink dark:bg-white" />}
    </span>
    <span className={`flex-1 text-[13px] ${checked ? 'text-ink dark:text-white font-medium' : 'text-ink-soft dark:text-d-muted'}`}>
      {label}
    </span>
    <span className="text-[10px] font-mono text-ink-soft dark:text-d-muted">{count}</span>
  </button>
);

Object.assign(window, { SearchResults });