// Savvie · weekly digest screen
// "The Reckoning" — opinionated weekly view, no guilt-trip nudges

function Digest({ items, onOpenItem, onExecute, onArchive, annotations }) {
  const stale = items.filter(i => i.decay === 'stale').sort((a, b) => b.daysOld - a.daysOld);
  const aging = items.filter(i => i.decay === 'aging').sort((a, b) => b.daysOld - a.daysOld);
  const fresh = items.filter(i => i.decay === 'fresh');

  const spotlight = stale.slice(0, 3);
  const rest = stale.slice(3);

  return (
    <div className="sv-digest" data-screen-label="digest">
      <div className="sv-digest-hero">
        <div className="eyebrow">week 19 · digest · may 13</div>
        <h1>this week,<br/><em>in motion.</em></h1>
        <div className="stats">
          <div className="stat fresh">
            <span className="stat-num">{fresh.length}</span>
            <span className="stat-label">just dropped · within 7 days</span>
          </div>
          <div className="stat aging">
            <span className="stat-num">{aging.length}</span>
            <span className="stat-label">settling · 1–3 weeks in</span>
          </div>
          <div className="stat stale">
            <span className="stat-num">{stale.length}</span>
            <span className="stat-label">ready to revisit · 3+ weeks in</span>
          </div>
        </div>
        <div className="blob" />
      </div>

      {spotlight.length > 0 && (
        <div className="sv-digest-section">
          <div className="sv-digest-section-head">
            <h2>3 to <em>action</em> this week.</h2>
            <span className="meta">pick one. claude pulls it. action it.</span>
          </div>
          <div className="sv-nudge-grid">
            {spotlight.map(item => (
              <DigestSpotlight key={item.id} item={item}
                onOpenItem={onOpenItem}
                onExecute={onExecute}
                onArchive={onArchive}
              />
            ))}
          </div>
        </div>
      )}

      {rest.length > 0 && (
        <div className="sv-digest-section">
          <div className="sv-digest-section-head">
            <h2>also <em>waiting.</em></h2>
            <span className="meta">{rest.length} more · skim, pick, run</span>
          </div>
          <div className="sv-digest-row-cards">
            {rest.map(item => (
              <DigestRow key={item.id} item={item}
                onOpenItem={onOpenItem}
                onExecute={onExecute}
                onArchive={onArchive}
              />
            ))}
          </div>
        </div>
      )}

      {aging.length > 0 && (
        <div className="sv-digest-section">
          <div className="sv-digest-section-head">
            <h2>still <em>settling.</em></h2>
            <span className="meta">8–21 days in · open when curious</span>
          </div>
          <div className="sv-digest-row-cards">
            {aging.map(item => (
              <DigestRow key={item.id} item={item}
                onOpenItem={onOpenItem}
                onExecute={onExecute}
                onArchive={onArchive}
              />
            ))}
          </div>
        </div>
      )}

      <div style={{
        marginTop: 56,
        padding: '24px 0',
        borderTop: '1px dashed var(--vz-ink-15)',
        textAlign: 'center',
        fontFamily: 'var(--vz-hand)',
        fontSize: 30,
        color: 'var(--vz-cobalt)',
        transform: 'rotate(-1deg)',
      }}>
        next digest drops {' '}
        <span style={{ background: 'var(--vz-lime)', padding: '0 6px' }}>monday</span>.
      </div>
    </div>
  );
}

// Spotlight card — top action is highlighted as the suggested move
function DigestSpotlight({ item, onOpenItem, onExecute, onArchive }) {
  const topAction = item.actions[0];
  return (
    <div className="sv-nudge">
      <div className="badge-row">
        <DecayBadge decay={item.decay} age={item.age} />
        <span style={{ fontFamily: 'var(--vz-mono)', fontSize: 11, color: 'var(--vz-ink-40)' }}>
          {item.cat.label}
        </span>
        <span style={{ fontFamily: 'var(--vz-mono)', fontSize: 11, color: 'var(--vz-ink-40)', marginLeft: 'auto' }}>
          {item.source}
        </span>
      </div>
      <div className="what">{item.title}</div>
      {topAction && (
        <div style={{
          fontFamily: 'var(--vz-mono)',
          fontSize: 11,
          color: 'var(--vz-ink-60)',
          padding: '8px 10px',
          background: 'var(--vz-cream-deeper)',
          border: '1px dashed var(--vz-ink-15)',
          borderRadius: 10,
          lineHeight: 1.5,
        }}>
          <span style={{ color: 'var(--vz-cobalt)' }}>→ suggested: </span>
          <strong style={{ color: 'var(--vz-ink)', fontWeight: 500 }}>{topAction.label}</strong>
          {' · '}
          {topAction.desc}
        </div>
      )}
      <div className="nudge-actions">
        <button className="sv-btn execute" onClick={() => onOpenItem(item)}>open · pick action</button>
        <button className="sv-btn archive" onClick={() => onArchive(item)}>let go</button>
      </div>
    </div>
  );
}

function DigestRow({ item, onOpenItem, onArchive }) {
  return (
    <div className="sv-digest-row">
      <div className={`sv-item-cat ${item.thumb ? 'has-thumb' : ''}`} style={{ width: 48, height: 48 }}>
        {item.thumb
          ? <img src={item.thumb} alt="" className="thumb" />
          : <span style={{ color: 'var(--vz-cobalt)' }}>{item.cat.emoji}</span>}
      </div>
      <div>
        <div style={{ fontFamily: 'var(--vz-display)', fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em' }}>{item.title}</div>
        <div style={{ fontFamily: 'var(--vz-mono)', fontSize: 11, color: 'var(--vz-ink-40)', marginTop: 2 }}>
          {item.source} · {item.age} · {item.cat.label}
        </div>
      </div>
      <DecayBadge decay={item.decay} age={item.age} />
      <div style={{ display: 'flex', gap: 6 }}>
        <button className="sv-btn execute" onClick={() => onOpenItem(item)}>open</button>
        <button className="sv-btn archive" onClick={() => onArchive(item)}>archive</button>
      </div>
    </div>
  );
}

window.Digest = Digest;