// Activities page — sidebar filters + sticky toolbar. Always-accessible filtering.

function ActivitiesPage({ onBack }) {
  const all = window.ACTIVITIES || [];
  const materials = window.ACTIVITY_MATERIALS || [];
  const skills = window.ACTIVITY_SKILLS || [];

  const [opened, setOpened] = useState(null);
  const [ageBand, setAgeBand] = useState('all');
  const [matFilters, setMatFilters] = useState([]);
  const [skillFilters, setSkillFilters] = useState([]);
  const [maxDuration, setMaxDuration] = useState(null); // null | 15 | 30 | 60
  const [sort, setSort] = useState('age'); // 'age' | 'duration' | 'name'
  const [query, setQuery] = useState('');
  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);

  const ageBands = [
    { id: 'all',   label: 'All ages',     min: 0,   max: 999 },
    { id: '0-1',   label: '0–1 year',     min: 0,   max: 12 },
    { id: '1-3',   label: '1–3 years',    min: 12,  max: 36 },
    { id: '3-5',   label: '3–5 years',    min: 36,  max: 60 },
    { id: '5-8',   label: '5–8 years',    min: 60,  max: 96 },
    { id: '8-12',  label: '8–12 years',   min: 96,  max: 999 },
  ];

  const durationOpts = [
    { id: null, label: 'Any length' },
    { id: 15,   label: 'Under 15 min' },
    { id: 30,   label: 'Under 30 min' },
    { id: 60,   label: 'Under 1 hour' },
  ];

  const filtered = useMemo(() => {
    const band = ageBands.find(b => b.id === ageBand);
    let r = all.filter(a => {
      if (band && (a.ageMax < band.min || a.ageMin > band.max)) return false;
      if (matFilters.length && !matFilters.some(m => (a.materials || []).includes(m))) return false;
      if (skillFilters.length && !skillFilters.some(s => (a.skills || []).includes(s))) return false;
      if (maxDuration && a.duration > maxDuration) return false;
      if (query) {
        const q = query.toLowerCase();
        if (!a.name.toLowerCase().includes(q) && !a.blurb.toLowerCase().includes(q)) return false;
      }
      return true;
    });
    if (sort === 'age') r = [...r].sort((a, b) => a.ageMin - b.ageMin);
    else if (sort === 'duration') r = [...r].sort((a, b) => a.duration - b.duration);
    else if (sort === 'name') r = [...r].sort((a, b) => a.name.localeCompare(b.name));
    return r;
  }, [ageBand, matFilters, skillFilters, maxDuration, sort, query, all]);

  const toggle = (set, val, arr) => {
    set(arr.includes(val) ? arr.filter(x => x !== val) : [...arr, val]);
  };

  const skillLabel = (id) => (skills.find(s => s.id === id) || {}).label || id;
  const matLabel = (id) => (materials.find(m => m.id === id) || {}).label || id;

  const activeCount = (ageBand !== 'all' ? 1 : 0) + matFilters.length + skillFilters.length + (maxDuration ? 1 : 0) + (query ? 1 : 0);
  const clearAll = () => { setAgeBand('all'); setMatFilters([]); setSkillFilters([]); setMaxDuration(null); setQuery(''); };

  if (opened) {
    const a = all.find(x => x.id === opened);
    if (!a) return null;
    return (
      <div className="page actpage">
        <button className="back-btn" onClick={() => setOpened(null)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
          <span>All activities</span>
        </button>
        <article className="act-detail">
          <div className="act-detail-hero">
            <img src={a.img} alt="" />
          </div>
          <div className="act-detail-body">
            <div className="act-detail-meta">
              <span className="act-detail-age">{a.ageMin >= 12 ? `${Math.floor(a.ageMin/12)}–${Math.floor(a.ageMax/12)} years` : `${a.ageMin}–${a.ageMax} months`}</span>
              <span className="dot">·</span>
              <span>{a.duration} min</span>
              <span className="dot">·</span>
              <span>{(a.materials || []).map(matLabel).join(', ')}</span>
            </div>
            <h1 className="act-detail-h">{a.name}</h1>
            <p className="act-detail-blurb">{a.blurb}</p>

            <div className="act-detail-skills">
              {(a.skills || []).map(s => (
                <span key={s} className="act-skill-pill">{skillLabel(s)}</span>
              ))}
            </div>

            <section className="act-detail-section act-why">
              <div className="act-detail-eyebrow">Why this matters</div>
              <p>{a.why}</p>
            </section>

            <section className="act-detail-section">
              <div className="act-detail-eyebrow">How to do it</div>
              <ol className="act-steps">
                {(a.steps || []).map((s, i) => (
                  <li key={i}>
                    <span className="act-step-num">{String(i + 1).padStart(2, '0')}</span>
                    <span className="act-step-body">{s}</span>
                  </li>
                ))}
              </ol>
            </section>

            {a.devNote && (
              <section className="act-detail-section act-devnote">
                <div className="act-detail-eyebrow">A note on development</div>
                <p>{a.devNote}</p>
              </section>
            )}
          </div>
        </article>
      </div>
    );
  }

  const sidebar = (
    <aside className="act-sidebar">
      <div className="act-sidebar-search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input type="text" placeholder="Search activities" value={query} onChange={(e) => setQuery(e.target.value)} />
        {query && (
          <button className="act-search-clear" onClick={() => setQuery('')} aria-label="Clear">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        )}
      </div>

      <div className="act-sb-section">
        <div className="act-sb-label">Age</div>
        <div className="act-sb-list">
          {ageBands.map(b => (
            <button key={b.id} className={`act-sb-item${ageBand === b.id ? ' is-current' : ''}`} onClick={() => setAgeBand(b.id)}>
              <span className="act-sb-radio" />
              <span>{b.label}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="act-sb-section">
        <div className="act-sb-label">Time</div>
        <div className="act-sb-list">
          {durationOpts.map(d => (
            <button key={String(d.id)} className={`act-sb-item${maxDuration === d.id ? ' is-current' : ''}`} onClick={() => setMaxDuration(d.id)}>
              <span className="act-sb-radio" />
              <span>{d.label}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="act-sb-section">
        <div className="act-sb-label">What you have {matFilters.length > 0 && <span className="act-sb-count">{matFilters.length}</span>}</div>
        <div className="act-sb-list">
          {materials.map(m => (
            <button key={m.id} className={`act-sb-item act-sb-check${matFilters.includes(m.id) ? ' is-active' : ''}`} onClick={() => toggle(setMatFilters, m.id, matFilters)}>
              <span className="act-sb-box" />
              <span>{m.label}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="act-sb-section">
        <div className="act-sb-label">Builds {skillFilters.length > 0 && <span className="act-sb-count">{skillFilters.length}</span>}</div>
        <div className="act-sb-list">
          {skills.map(s => (
            <button key={s.id} className={`act-sb-item act-sb-check${skillFilters.includes(s.id) ? ' is-active' : ''}`} onClick={() => toggle(setSkillFilters, s.id, skillFilters)}>
              <span className="act-sb-box" />
              <span>{s.label}</span>
            </button>
          ))}
        </div>
      </div>
    </aside>
  );

  return (
    <div className="page actpage">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Activities</div>
          <h1 className="page-title">Things to do<br/><em>that quietly build them.</em></h1>
          <p className="page-sub">Every activity here is paired with the developmental skill it strengthens. Filter by age, by what’s in your kitchen drawer, or by the muscle you want to build today.</p>
        </div>
      </div>

      <div className="act-layout">
        {sidebar}
        <div className="act-main">
          {/* Sticky toolbar — always visible while scrolling */}
          <div className="act-toolbar">
            <div className="act-toolbar-l">
              <button className="act-mobile-filters" onClick={() => setMobileFiltersOpen(true)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
                <span>Filters</span>
                {activeCount > 0 && <span className="act-mobile-badge">{activeCount}</span>}
              </button>
              <span className="act-toolbar-count">
                <strong>{filtered.length}</strong> {filtered.length === 1 ? 'activity' : 'activities'}
              </span>
              {activeCount > 0 && (
                <button className="act-toolbar-clear" onClick={clearAll}>Clear all</button>
              )}
            </div>
            <div className="act-toolbar-r">
              <span className="act-toolbar-label">Sort</span>
              <select className="act-toolbar-select" value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="age">By age</option>
                <option value="duration">By time</option>
                <option value="name">A–Z</option>
              </select>
            </div>
          </div>

          {/* Active-filter chips below toolbar */}
          {activeCount > 0 && (
            <div className="act-chips">
              {ageBand !== 'all' && (
                <button className="act-chip" onClick={() => setAgeBand('all')}>
                  {ageBands.find(b => b.id === ageBand).label}
                  <CloseX />
                </button>
              )}
              {maxDuration && (
                <button className="act-chip" onClick={() => setMaxDuration(null)}>
                  {durationOpts.find(d => d.id === maxDuration).label}
                  <CloseX />
                </button>
              )}
              {matFilters.map(m => (
                <button key={m} className="act-chip" onClick={() => toggle(setMatFilters, m, matFilters)}>
                  {matLabel(m)}<CloseX />
                </button>
              ))}
              {skillFilters.map(s => (
                <button key={s} className="act-chip" onClick={() => toggle(setSkillFilters, s, skillFilters)}>
                  {skillLabel(s)}<CloseX />
                </button>
              ))}
              {query && (
                <button className="act-chip" onClick={() => setQuery('')}>
                  “{query}”<CloseX />
                </button>
              )}
            </div>
          )}

          {filtered.length === 0 ? (
            <div className="act-empty">
              <p>No activities match those filters.</p>
              <button onClick={clearAll}>Clear all filters</button>
            </div>
          ) : (
            <div className="act-grid">
              {filtered.map((a, i) => {
                const big = i % 7 === 0;
                return (
                  <button key={a.id} className={`act-card${big ? ' is-big' : ''}`} onClick={() => setOpened(a.id)}>
                    <div className="act-card-img">
                      <img src={a.img} alt="" loading="lazy" />
                      <div className="act-card-imgmeta">
                        <span>{a.duration} min</span>
                      </div>
                    </div>
                    <div className="act-card-body">
                      <div className="act-card-age">{a.ageMin >= 12 ? `${Math.floor(a.ageMin/12)}–${Math.floor(a.ageMax/12)} yrs` : `${a.ageMin}–${a.ageMax} mo`}</div>
                      <h3 className="act-card-name">{a.name}</h3>
                      <p className="act-card-blurb">{a.blurb}</p>
                      <div className="act-card-skills">
                        {(a.skills || []).slice(0, 3).map(s => (
                          <span key={s} className="act-card-skill">{skillLabel(s)}</span>
                        ))}
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Mobile filter drawer */}
      {mobileFiltersOpen && (
        <div className="act-mobile-overlay" onClick={() => setMobileFiltersOpen(false)}>
          <div className="act-mobile-sheet" onClick={(e) => e.stopPropagation()}>
            <div className="act-mobile-head">
              <h3>Filters</h3>
              <button onClick={() => setMobileFiltersOpen(false)} aria-label="Close"><CloseX /></button>
            </div>
            <div className="act-mobile-body">{sidebar}</div>
            <div className="act-mobile-foot">
              <button className="act-mobile-clear" onClick={clearAll}>Clear all</button>
              <button className="act-mobile-apply" onClick={() => setMobileFiltersOpen(false)}>Show {filtered.length} activities</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CloseX() {
  return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>;
}

window.ActivitiesPage = ActivitiesPage;