import { useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { useShardFeed } from '../../lib/useShardFeed.js'
import { describe, categoryOf, kindLabel, CATEGORIES } from '../../lib/shardEvents.js'
import { ago } from '../../lib/format.js'
import { api } from '../../api/client.js'

// Public activity feed: the full shard event log, filterable by category, with a
// live tail that prepends new events as they happen.
export default function ShardActivity() {
  const { loading, error, data } = useAsync(() => api.shard.feed({ limit: 150 }))
  const { events: live } = useShardFeed({ max: 60 })
  const [cat, setCat] = useState('all')

  // Merge the live tail with the loaded history, de-duped by kind+t, newest first.
  const merged = useMemo(() => {
    const seen = new Set()
    const out = []
    for (const e of [...live, ...(data || [])]) {
      const key = `${e.kind}-${e.t}`
      if (seen.has(key)) continue
      seen.add(key)
      out.push(e)
    }
    return out.sort((a, b) => (b.t || 0) - (a.t || 0))
  }, [live, data])

  const filtered = cat === 'all' ? merged : merged.filter((e) => categoryOf(e.kind) === cat)

  return (
    <PublicLayout section="website">
      <div className="shell-narrow page-body">
        <PageHeader eyebrow="Live" title="Shard Activity" />
        <p style={{ marginTop: -8, marginBottom: 18 }}>
          <Link to="/site/shard" className="sans" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.86rem' }}>← Back to shard</Link>
        </p>

        {/* Category tabs */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
          {CATEGORIES.map((c) => (
            <button
              key={c.id}
              onClick={() => setCat(c.id)}
              className="pill"
              style={cat === c.id ? { background: 'var(--accent)', color: 'var(--bg-deep)', borderColor: 'var(--accent)' } : undefined}
            >
              {c.label}
            </button>
          ))}
        </div>

        {loading && <Loading />}
        {error && <ErrorState message="Could not load the activity feed right now." />}

        {!loading && !error && (
          filtered.length === 0 ? (
            <div className="panel" style={{ padding: 22 }}>
              <p className="sans dim" style={{ margin: 0, fontSize: '0.9rem' }}>Nothing here yet — events will appear as they happen in the world.</p>
            </div>
          ) : (
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {filtered.map((e) => (
                <li key={e._id || `${e.kind}-${e.t}`} className="panel" style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span className="sans" style={{ flex: 'none', fontSize: '0.62rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', minWidth: 92 }}>
                    {kindLabel(e.kind)}
                  </span>
                  <span className="sans" style={{ flex: 1, minWidth: 0, color: 'var(--ink)', fontSize: '0.92rem' }}>{describe(e)}</span>
                  <span className="sans dim" style={{ flex: 'none', fontSize: '0.76rem' }}>{ago(e.t)}</span>
                </li>
              ))}
            </ul>
          )
        )}
      </div>
    </PublicLayout>
  )
}