// Resources tab — categorized library of guides, videos, PDFs.
// Search filters across title/kind/category.

function ResourcesTab({ pal }) {
  const jm = window.JOY_MOVE;
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState('all');

  const categories = Array.from(new Set(jm.resources.map(r => r.category)));

  let shown = jm.resources;
  if (cat !== 'all') shown = shown.filter(r => r.category === cat);
  if (q.trim()) {
    const n = q.toLowerCase();
    shown = shown.filter(r => (r.title + ' ' + r.kind + ' ' + r.category).toLowerCase().includes(n));
  }

  // Group by category for display
  const grouped = categories
    .map(c => [c, shown.filter(r => r.category === c)])
    .filter(([, items]) => items.length > 0);

  return (
    <Page pal={pal}
      kicker="Self-serve"
      title="Resources"
      sub="Short guides and videos for the edits you can make yourself — plus the reference material for your site, plan, and how we work together."
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, gap: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <Pill pal={pal} active={cat === 'all'} onClick={() => setCat('all')}>All</Pill>
          {categories.map(c => (
            <Pill key={c} pal={pal} active={cat === c} onClick={() => setCat(c)}>{c}</Pill>
          ))}
        </div>
        <div style={{ width: 300 }}>
          <Input pal={pal} placeholder="Search resources…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
      </div>

      {shown.length === 0 ? (
        <Card pal={pal}>
          <EmptyState pal={pal} icon="☰" title="Nothing matches" body="Try another category or clear your search." />
        </Card>
      ) : (
        grouped.map(([c, items]) => (
          <div key={c} style={{ marginBottom: 32 }}>
            <div style={{
              fontFamily: "'Playfair Display', serif", fontSize: 22,
              fontWeight: 700, color: pal.navy, letterSpacing: '-0.01em',
              marginBottom: 14, display: 'flex', alignItems: 'baseline', gap: 12,
            }}>
              <span>{c}</span>
              <span style={{ fontFamily: 'inherit', fontSize: 12, color: pal.muted, fontWeight: 400 }}>{items.length}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 14 }}>
              {items.map(r => (
                <ResourceCard key={r.title} pal={pal} r={r} />
              ))}
            </div>
          </div>
        ))
      )}
    </Page>
  );
}

function ResourceCard({ pal, r }) {
  const rgb = hexToRgb(pal.accent);
  const kindColor = {
    Video: pal.accent,
    Guide: pal.muted,
    PDF: '#e7b56b',
    Reference: pal.muted,
  }[r.kind] || pal.muted;
  return (
    <Card pal={pal} style={{
      padding: 20, cursor: 'pointer',
      transition: 'transform 0.15s, box-shadow 0.15s',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: kindColor,
        }}>{r.kind}</span>
        {r.new && (
          <span style={{
            fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
            color: pal.accent, padding: '2px 8px',
            background: `rgba(${rgb},0.14)`, borderRadius: 10,
          }}>New</span>
        )}
      </div>
      <div style={{
        fontFamily: "'Playfair Display', serif", fontSize: 17, fontWeight: 700,
        color: pal.navy, letterSpacing: '-0.01em', lineHeight: 1.25,
        marginBottom: 10, minHeight: 42,
      }}>{r.title}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: pal.muted, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${pal.border}` }}>
        <span>{r.length}</span>
        <span>Updated {r.updated}</span>
      </div>
    </Card>
  );
}

window.ResourcesTab = ResourcesTab;