// Snip dashboard — grouped by category, with affiliate links inline.
const { useState: useStateSD } = React;

function SnipDashboard({ playbook }) {
  const store = useStore();
  const [filter, setFilter] = useStateSD(null);
  const [destFilter, setDestFilter] = useStateSD(null);

  const groups = {};
  for (const s of playbook.snips) {
    if (destFilter && s.destinationId !== destFilter) continue;
    (groups[s.type] = groups[s.type] || []).push(s);
  }
  const cats = window.SNIP_CATEGORIES.filter(c => groups[c.id]?.length);
  const visible = filter ? cats.filter(c => c.id === filter) : cats;

  if (!playbook.snips.length) {
    return (
      <div className="page-empty side-empty">
        <div className="empty-icon">✎</div>
        <div className="empty-title">Snip your first piece of research</div>
        <div className="empty-sub">Paste a flight URL, hostel name, contact, or scribbled note above. Claude will sort it into the right bucket.</div>
      </div>
    );
  }

  return (
    <div className="snip-dash">
      <div className="snip-dash-filters">
        <button className={`chip ${!filter ? 'on' : ''}`} onClick={() => setFilter(null)}>All ({playbook.snips.length})</button>
        {cats.map(c => (
          <button key={c.id} className={`chip ${filter === c.id ? 'on' : ''}`}
            onClick={() => setFilter(filter === c.id ? null : c.id)}
            style={{ '--chip-accent': c.color }}>
            <span className="chip-icon" style={{ color: c.color }}>{c.icon}</span>
            {c.label} <span className="chip-count">{groups[c.id].length}</span>
          </button>
        ))}
        {playbook.destinations.length > 1 && (
          <span className="dest-filter-wrap">
            <span className="dest-filter-sep">·</span>
            <button className={`chip ${!destFilter ? 'on' : ''}`} onClick={() => setDestFilter(null)}>All places</button>
            {playbook.destinations.map(d => (
              <button key={d.id} className={`chip ${destFilter === d.id ? 'on' : ''}`} onClick={() => setDestFilter(destFilter === d.id ? null : d.id)}>{d.label}</button>
            ))}
          </span>
        )}
      </div>

      <div className="snip-groups">
        {visible.map(c => (
          <div key={c.id} className="snip-group" style={{ '--cat-color': c.color }}>
            <div className="snip-group-head">
              <span className="snip-group-icon">{c.icon}</span>
              <span className="snip-group-label">{c.label}</span>
              <span className="snip-group-count">{groups[c.id].length}</span>
            </div>
            <div className="snip-group-body">
              {groups[c.id].map(s => <SnipCard key={s.id} snip={s} playbook={playbook}/>)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SnipCard({ snip, playbook }) {
  const store = useStore();
  const cat = window.snipCategoryById(snip.type);
  const dest = playbook.destinations.find(d => d.id === snip.destinationId);
  const links = window.affiliateLinksFor(snip, dest);

  return (
    <div className="snip-card">
      <div className="snip-card-head">
        <div className="snip-card-title">
          {snip.title}
          {snip.url && <a href={window.store.sanitizeUrl ? window.store.sanitizeUrl(snip.url) : snip.url} target="_blank" rel="noopener noreferrer" className="snip-link" title={snip.url}>↗</a>}
        </div>
        <button className="snip-x" onClick={() => store.deleteSnip(playbook.id, snip.id)}>×</button>
      </div>
      {snip.body && <div className="snip-card-body">{snip.body}</div>}
      <div className="snip-card-meta">
        {snip.price != null && <span className="snip-price">{snip.currency || ''} {snip.price}</span>}
        {snip.when && <span className="snip-when">{snip.when}</span>}
        {snip.destinationLabel && <span className="snip-dest">{snip.destinationLabel}</span>}
        {(snip.tags || []).map(t => <span key={t} className="snip-tag">#{t}</span>)}
      </div>
      {links.length > 0 && (
        <div className="snip-affil">
          <span className="snip-affil-label">SHOP:</span>
          {links.map(l => (
            <a key={l.name} href={l.url} target="_blank" rel="noopener noreferrer" className="snip-affil-link">{l.name} ↗</a>
          ))}
        </div>
      )}
    </div>
  );
}

window.SnipDashboard = SnipDashboard;