// Trove — Library / browse screen
function FilterCheckbox({ label, count, checked, onToggle }) {
  return (
    <label style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 8px', borderRadius: 8, cursor: 'pointer', userSelect: 'none' }}
      onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-sunken)'}
      onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
      <span style={{
        width: 16, height: 16, borderRadius: 4,
        border: '1.5px solid ' + (checked ? 'var(--accent)' : 'var(--border-strong)'),
        background: checked ? 'var(--accent)' : 'var(--surface)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, transition: 'all .15s',
      }}>
        {checked && <Icon.Check width="11" height="11" style={{ color: 'var(--accent-fg)' }} />}
      </span>
      <input type="checkbox" checked={checked} onChange={onToggle} style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
      <span style={{ flex: 1, fontSize: 13.5, color: 'var(--fg)', fontWeight: checked ? 500 : 400 }}>{label}</span>
      {count != null && <span style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>{count}</span>}
    </label>
  );
}

function FilterGroup({ title, children, defaultOpen = true }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--border)', padding: '14px 0' }}>
      <button onClick={() => setOpen(o => !o)}
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'transparent', border: 0, padding: '0 8px 8px', cursor: 'pointer', color: 'var(--fg)' }}>
        <span className="t-micro" style={{ color: 'var(--fg-muted)' }}>{title}</span>
        <Icon.ChevronDown width="14" height="14" style={{ color: 'var(--fg-subtle)', transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform .2s' }} />
      </button>
      {open && <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>{children}</div>}
    </div>
  );
}

function LibraryScreen({ initialQuery, initialChip, onOpenResource, onBackHome, presale }) {
  const all = window.RESOURCES;
  const { isTablet } = window.useViewport();
  const [showFilters, setShowFilters] = React.useState(false);
  const [query, setQuery] = React.useState(initialQuery || '');
  const [filters, setFilters] = React.useState(() => {
    const base = { ks: new Set(), year: new Set(), subject: new Set(), strand: new Set(), scheme: new Set() };
    if (initialChip) {
      if (initialChip.kind === 'subject') base.subject.add(initialChip.value);
      if (initialChip.kind === 'year') base.year.add(initialChip.value);
      if (initialChip.kind === 'ks') base.ks.add(initialChip.value);
    }
    return base;
  });
  const [sort, setSort] = React.useState('relevance');
  const [view, setView] = React.useState('grid');

  function toggle(group, value) {
    setFilters(f => {
      const next = { ...f, [group]: new Set(f[group]) };
      if (next[group].has(value)) next[group].delete(value); else next[group].add(value);
      return next;
    });
  }
  function clearAll() { setFilters({ ks: new Set(), year: new Set(), subject: new Set(), strand: new Set(), scheme: new Set() }); setQuery(''); }

  // Apply search + filters
  const { results, suggestion } = React.useMemo(() => {
    if (query.trim()) return window.troveSearch(query, all);
    return { results: all, suggestion: null };
  }, [query, all]);

  const filtered = React.useMemo(() => {
    return results.filter(r => {
      if (filters.ks.size && !filters.ks.has(r.ks)) return false;
      if (filters.year.size && !filters.year.has(r.year)) return false;
      if (filters.subject.size && !filters.subject.has(r.subject)) return false;
      if (filters.strand.size && !filters.strand.has(r.strand)) return false;
      if (filters.scheme.size && !filters.scheme.has(r.scheme)) return false;
      return true;
    });
  }, [results, filters]);

  const sorted = React.useMemo(() => {
    const arr = [...filtered];
    if (sort === 'rating') arr.sort((a, b) => b.rating - a.rating);
    else if (sort === 'popular') arr.sort((a, b) => b.reviews - a.reviews);
    return arr;
  }, [filtered, sort]);

  // Counts for filter values (across all data)
  function counts(field) {
    const m = new Map();
    for (const r of all) m.set(r[field], (m.get(r[field]) || 0) + 1);
    return m;
  }
  const ksCounts = counts('ks');
  const yearCounts = counts('year');
  const subjCounts = counts('subject');
  const strandCounts = counts('strand');
  const schemeCounts = counts('scheme');

  const activeChips = [];
  Object.entries(filters).forEach(([group, set]) => set.forEach(v => activeChips.push({ group, value: v })));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      {/* Header strip */}
      <div style={{ padding: '20px 32px 18px', borderBottom: '1px solid var(--border)', background: 'var(--bg)' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ flex: 1 }}>
            <SmartSearchBar
              value={query}
              onChange={setQuery}
              onSubmit={(q, r) => { if (r) onOpenResource(r); else setQuery(q); }}
              onFilterChip={(c) => toggle(c.kind === 'subject' ? 'subject' : c.kind === 'ks' ? 'ks' : 'year', c.value)}
              placeholder="Refine your search…"
            />
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '264px 1fr', flex: 1, maxWidth: 1400, margin: '0 auto', width: '100%', alignItems: 'start' }}>
        {/* Sidebar */}
        {(!isTablet || showFilters) && (
        <aside style={{ padding: isTablet ? '4px 18px 20px' : '18px 14px 32px 32px', position: isTablet ? 'static' : 'sticky', top: 0, alignSelf: 'start' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 8px 12px' }}>
            <div className="t-h3" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.Filter width="16" height="16" />Filters
            </div>
            {activeChips.length > 0 && (
              <button onClick={clearAll} style={{ background: 'transparent', border: 0, color: 'var(--fg-muted)', fontSize: 12, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>Clear all</button>
            )}
          </div>

          <FilterGroup title="Key Stage">
            {['KS1', 'KS2'].map(v => (
              <FilterCheckbox key={v} label={v === 'KS1' ? 'Key Stage 1' : 'Key Stage 2'} count={ksCounts.get(v)} checked={filters.ks.has(v)} onToggle={() => toggle('ks', v)} />
            ))}
          </FilterGroup>

          <FilterGroup title="Year group">
            {['Year 1','Year 2','Year 3','Year 4','Year 5','Year 6'].map(v => (
              <FilterCheckbox key={v} label={v} count={yearCounts.get(v)} checked={filters.year.has(v)} onToggle={() => toggle('year', v)} />
            ))}
          </FilterGroup>

          <FilterGroup title="Subject">
            {['English','Maths','Science','History','Geography','Computing','RE','Art & Design','PE','Music'].map(v => (
              <FilterCheckbox key={v} label={v} count={subjCounts.get(v)} checked={filters.subject.has(v)} onToggle={() => toggle('subject', v)} />
            ))}
          </FilterGroup>

          <FilterGroup title="Strand" defaultOpen={false}>
            {[...strandCounts.keys()].sort().map(v => (
              <FilterCheckbox key={v} label={v} count={strandCounts.get(v)} checked={filters.strand.has(v)} onToggle={() => toggle('strand', v)} />
            ))}
          </FilterGroup>

          <FilterGroup title="Scheme" defaultOpen={false}>
            {[...schemeCounts.keys()].sort().map(v => (
              <FilterCheckbox key={v} label={v} count={schemeCounts.get(v)} checked={filters.scheme.has(v)} onToggle={() => toggle('scheme', v)} />
            ))}
          </FilterGroup>
        </aside>
        )}

        {/* Results */}
        <main style={{ padding: isTablet ? '16px 18px 60px' : '18px 32px 60px 14px' }}>
          <div className="no-print" style={{ display: isTablet ? 'flex' : 'none', marginBottom: 14 }}>
            <button onClick={() => setShowFilters(v => !v)} className="btn btn-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.Filter width="15" height="15" />{showFilters ? 'Hide filters' : 'Filters'}{activeChips.length > 0 ? ` (${activeChips.length})` : ''}
            </button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
            <div>
              <div className="t-h1" style={{ margin: 0, fontSize: 26 }}>
                {query.trim() ? <>Results for <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500, color: 'var(--gold-deep)' }}>“{query}”</em></> : 'The library'}
              </div>
              <div style={{ marginTop: 6, fontSize: 13.5, color: 'var(--fg-muted)' }}>
                {sorted.length} {sorted.length === 1 ? 'resource' : 'resources'}
                {suggestion && (
                  <> · <Icon.Sparkle width="12" height="12" style={{ verticalAlign: 'middle', color: 'var(--gold-deep)' }} /> showing results for <button onClick={() => setQuery(suggestion)} style={{ background: 'transparent', border: 0, color: 'var(--fg)', fontWeight: 600, padding: 0, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>{suggestion}</button></>
                )}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <span className="t-small" style={{ color: 'var(--fg-muted)' }}>Sort by</span>
              <select className="input" style={{ width: 'auto', padding: '7px 10px', fontSize: 13, fontWeight: 500 }} value={sort} onChange={e => setSort(e.target.value)}>
                <option value="relevance">Relevance</option>
                <option value="rating">Highest rated</option>
                <option value="popular">Most reviews</option>
              </select>
              <div style={{ display: 'inline-flex', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
                <button onClick={() => setView('grid')} style={{ padding: 7, background: view === 'grid' ? 'var(--bg-sunken)' : 'var(--surface)', border: 0, color: 'var(--fg)', cursor: 'pointer' }} aria-label="Grid"><Icon.Grid width="16" height="16" /></button>
                <button onClick={() => setView('list')} style={{ padding: 7, background: view === 'list' ? 'var(--bg-sunken)' : 'var(--surface)', border: 0, color: 'var(--fg)', cursor: 'pointer', borderLeft: '1px solid var(--border)' }} aria-label="List"><Icon.List width="16" height="16" /></button>
              </div>
            </div>
          </div>

          {activeChips.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
              {activeChips.map((c, i) => (
                <button key={i} onClick={() => toggle(c.group, c.value)} className="pill pill-accent" style={{ cursor: 'pointer', fontWeight: 600 }}>
                  {c.value}<Icon.X width="12" height="12" />
                </button>
              ))}
            </div>
          )}

          {sorted.length === 0 ? (
            <div className="card" style={{ padding: 48, textAlign: 'center', background: 'var(--bg-sunken)' }}>
              <div className="t-h2" style={{ marginBottom: 8 }}>No resources match.</div>
              <div className="t-small" style={{ color: 'var(--fg-muted)', marginBottom: 16 }}>
                Try removing a filter, or search for something different.
              </div>
              <button onClick={clearAll} className="btn btn-ghost">Clear filters</button>
            </div>
          ) : view === 'grid' ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 14 }}>
              {sorted.map(r => <ResourceCard key={r.id} resource={r} onClick={() => onOpenResource(r)} />)}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {sorted.map(r => (
                <button key={r.id} onClick={() => onOpenResource(r)} className="card focus-ring"
                  style={{ display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 16, padding: 14, alignItems: 'center', cursor: 'pointer', background: 'var(--surface)', textAlign: 'left' }}>
                  <div style={{ width: 64 }}><ResourceCover resource={r} /></div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                      <span className={'pill ' + (r.ks === 'KS1' ? 'pill-ks1' : 'pill-ks2')}>{r.ks} · {r.year}</span>
                      <span className="pill">{r.subject} · {r.strand}</span>
                    </div>
                    <div className="t-h3">{r.title}</div>
                    <div className="t-small" style={{ color: 'var(--fg-muted)', marginTop: 4 }}>{r.scheme} · {r.pages} pages · {r.lessons} lessons</div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                    <Stars value={r.rating} count={r.reviews} />
                    <Icon.ChevronRight width="16" height="16" style={{ color: 'var(--fg-subtle)' }} />
                  </div>
                </button>
              ))}
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

window.LibraryScreen = LibraryScreen;