'use client'

import type { SignalSource } from '@/lib/api'

interface Props {
  sources: SignalSource[]
  activeSource: string
  onChange: (src: string) => void
  /** Count map keyed by source (computed by parent from live post list). */
  liveCounts: Record<string, number>
}

function relativeTime(iso: string | null): string {
  if (!iso) return '—'
  const diff = (Date.now() - new Date(iso).getTime()) / 1000
  if (diff < 60)     return `${Math.round(diff)}s ago`
  if (diff < 3600)   return `${Math.round(diff / 60)}m ago`
  if (diff < 86400)  return `${Math.round(diff / 3600)}h ago`
  return `${Math.round(diff / 86400)}d ago`
}

/**
 * Source filter chips for the signals page.
 *
 * Each chip = one entry from /api/signals/sources. Shows total historical
 * count from the server + the (filtered) live count from the current post
 * payload — so the user can see "this filter would drop me from 700 to 13".
 */
export default function SourceChips({ sources, activeSource, onChange, liveCounts }: Props) {
  // Always have an "all" pseudo-source first
  const totalCount = sources.reduce((s, x) => s + x.count, 0)

  return (
    <div className="card" style={{ padding: 16, marginBottom: 12 }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase',
                    color: 'var(--ink-3)', marginBottom: 10 }}>
        Signal sources
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {/* All */}
        <button
          onClick={() => onChange('all')}
          className={`chip ${activeSource === 'all' ? 'up' : ''}`}
          style={{ padding: '8px 14px', cursor: 'pointer', border: '1px solid var(--line)' }}
        >
          <span style={{ fontWeight: 600 }}>All</span>
          <span style={{ marginLeft: 8, color: 'var(--ink-4)' }}>{totalCount}</span>
        </button>

        {sources.map(s => (
          <button
            key={s.source}
            onClick={() => onChange(s.source)}
            className={`chip ${activeSource === s.source ? 'up' : ''}`}
            style={{
              padding: '8px 14px', cursor: 'pointer',
              border: '1px solid var(--line)',
              background: activeSource === s.source ? 'var(--up-soft)' : undefined,
            }}
            title={`Last signal: ${relativeTime(s.latest)}`}
          >
            <span style={{ fontWeight: 600 }}>{s.source}</span>
            <span style={{ marginLeft: 8, color: 'var(--ink-4)' }}>{s.count}</span>
            {/* Show live filtered count when different from total */}
            {liveCounts[s.source] !== undefined && liveCounts[s.source] !== s.count && (
              <span style={{ marginLeft: 6, fontSize: 10, color: 'var(--ink-3)' }}>
                ({liveCounts[s.source]} loaded)
              </span>
            )}
            <span style={{ marginLeft: 8, fontSize: 10, color: 'var(--ink-4)' }}>
              · {relativeTime(s.latest)}
            </span>
          </button>
        ))}
      </div>
    </div>
  )
}