trumpsignal-frontend/app/[locale]/trump/TrumpPageClient.tsx

'use client'

import { useState, useEffect, useMemo } from 'react'
import { useLocale } from 'next-intl'
import type { TrumpPost } from '@/types'
import { getPosts } from '@/lib/api'
import { swrFetch } from '@/lib/cache'
import PostRow, { isAiScored } from '@/components/dashboard/PostCards'
import SystemControl from '@/components/signals/SystemControl'
import PageHint from '@/components/ui/PageHint'
import InfoTip from '@/components/ui/InfoTip'
import Pagination from '@/components/ui/Pagination'

const PAGE_SIZE = 30

const SENTIMENTS = ['all', 'bullish', 'bearish', 'neutral'] as const
type SentimentFilter = (typeof SENTIMENTS)[number]
type SignalFilter = 'all' | 'actionable' | 'buy' | 'short'

interface TrumpSignalPageProps {
  initialPosts?: TrumpPost[] | null
}

export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPageProps) {
  const locale = useLocale()
  const isZh = false
  const [posts, setPosts]       = useState<TrumpPost[]>(initialPosts ?? [])
  const [loading, setLoading]   = useState(initialPosts === null)
  const [loadErr, setLoadErr]   = useState('')
  const [sentFilter, setSentFilter] = useState<SentimentFilter>('all')
  const [sigFilter, setSigFilter]   = useState<SignalFilter>('all')
  const [hideNoise, setHideNoise]   = useState(false)
  const [page, setPage]         = useState(1)


  useEffect(() => {
    swrFetch(
      'posts-500',
      3 * 60_000,
      () => getPosts(500, 1),
      fresh => setPosts(fresh),
    )
      .then(p => { setPosts(p); setLoadErr('') })
      .catch(e => setLoadErr(e instanceof Error ? e.message : 'Failed to load posts'))
      .finally(() => setLoading(false))
  }, [])

  const trumpPosts = useMemo(
    () => posts.filter(p => (p.source || '') === 'truth'),
    [posts],
  )

  const noiseCount = useMemo(
    () => trumpPosts.filter(p => !isAiScored(p)).length,
    [trumpPosts],
  )

  const filtered = useMemo(() => trumpPosts.filter(p => {
    if (hideNoise && !isAiScored(p)) return false
    if (sentFilter !== 'all' && p.sentiment !== sentFilter) return false
    if (sigFilter === 'actionable' && p.signal !== 'buy' && p.signal !== 'short') return false
    if (sigFilter === 'buy'   && p.signal !== 'buy')   return false
    if (sigFilter === 'short' && p.signal !== 'short') return false
    return true
  }), [trumpPosts, sentFilter, sigFilter, hideNoise])

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
  const safePage   = Math.min(page, totalPages)
  const pageItems  = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE)

  const sigCounts = useMemo(() => ({
    all:        trumpPosts.length,
    actionable: trumpPosts.filter(p => p.signal === 'buy' || p.signal === 'short').length,
    buy:        trumpPosts.filter(p => p.signal === 'buy').length,
    short:      trumpPosts.filter(p => p.signal === 'short').length,
  }), [trumpPosts])

  const signalLabels: Record<SignalFilter, string> = {
    all: 'All', actionable: 'Actionable', buy: 'Buy', short: 'Short',
  }
  const sentimentLabels: Record<SentimentFilter, string> = {
    all: 'All', bullish: 'Bullish', bearish: 'Bearish', neutral: 'Neutral',
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">① Trump Signal</h1>
          <PageHint count={`${sigCounts.actionable} actionable / ${trumpPosts.length} posts`}>
            Watches Trump's Truth Social posts in real time, AI-scores each one,
            and only fires a trade when the conviction is high enough to move price.
          </PageHint>
        </div>
        <span className="chip"><span className="live-dot" />Live</span>
      </div>

      <SystemControl system="trump" />

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 12, margin: '16px 0 12px', flexWrap: 'wrap',
      }}>
        {/* Signal filter tabs */}
        <div className="nav-tabs" style={{ background: 'var(--bg-sunk)' }}>
          {([
            { key: 'all',        hint: 'Every post the scraper has captured.' },
            { key: 'actionable', hint: 'Only posts the AI flagged as BUY or SHORT.' },
            { key: 'buy',        hint: 'Posts where the AI verdict is long BTC.' },
            { key: 'short',      hint: 'Posts where the AI verdict is short BTC.' },
          ] as const).map(f => (
            <button
              key={f.key}
              className={`nav-tab ${sigFilter === f.key ? 'active' : ''}`}
              onClick={() => { setSigFilter(f.key); setPage(1) }}
            >
              {f.key === 'actionable' ? '🔥 ' : ''}
              {signalLabels[f.key]}
              <span style={{ color: 'var(--ink-4)', marginLeft: 4 }}>{sigCounts[f.key]}</span>
            </button>
          ))}
        </div>

        {/* Sentiment filter */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
          {/* One-click collapse of off-topic (non-crypto, un-scored) posts. */}
          {noiseCount > 0 && (
            <button
              onClick={() => { setHideNoise(v => !v); setPage(1) }}
              title={`Show only crypto-relevant posts — hides ${noiseCount} off-topic Trump posts`}
              style={{
                padding: '4px 10px', borderRadius: 6,
                border: '1px solid var(--line)',
                background: hideNoise ? 'var(--ink)' : 'transparent',
                color: hideNoise ? 'var(--bg)' : 'var(--ink-3)',
                fontSize: 11, cursor: 'pointer', fontWeight: 600,
                marginRight: 4,
              }}
            >
              {hideNoise ? 'Show all' : 'Signals only'}
            </button>
          )}
          <span style={{ fontSize: 11, color: 'var(--ink-4)', marginRight: 4 }}>
            Sentiment
            <InfoTip
              text="Filters by the post's overall tone. Sentiment ≠ trade signal — a bearish post can still be a BUY if the market reads it as priced-in."
              placement="left"
            />
          </span>
          {SENTIMENTS.map(f => (
            <button
              key={f}
              onClick={() => { setSentFilter(f); setPage(1) }}
              style={{
                padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
                background: sentFilter === f ? 'var(--ink)' : 'transparent',
                color: sentFilter === f ? 'var(--bg)' : 'var(--ink-3)',
                fontSize: 11, cursor: 'pointer', fontWeight: sentFilter === f ? 600 : 400,
              }}
            >
              {sentimentLabels[f]}
            </button>
          ))}
        </div>
      </div>

      {loading && <TrumpSkeleton />}

      {!loading && loadErr && (
        <div className="card" style={{ padding: 24, textAlign: 'center', color: 'var(--down)' }}>
          ⚠️ {`Couldn't load signals — ${loadErr}`}
          <div style={{ marginTop: 10 }}>
            <button className="btn ghost" style={{ fontSize: 12, padding: '6px 14px' }}
              onClick={() => location.reload()}>Retry</button>
          </div>
        </div>
      )}

      {!loading && !loadErr && filtered.length === 0 && (
        <div className="card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
          No Trump signals match the current filter.
        </div>
      )}

      {!loading && pageItems.length > 0 && (
        <>
          <div className="post-stream">
            {pageItems.map(p => <PostRow key={p.id} post={p} />)}
          </div>

          <Pagination
            page={safePage}
            total={totalPages}
            count={filtered.length}
            pageSize={PAGE_SIZE}
            onChange={setPage}
          />
        </>
      )}
    </div>
  )
}

function TrumpSkeleton() {
  return (
    <div className="post-stream" style={{ marginTop: 8 }}>
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="skeleton-card" style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div className="skeleton sk-line sk-w-q" />
            <div className="skeleton sk-line" style={{ width: 60 }} />
          </div>
          <div className="skeleton sk-title sk-w-3q" />
          <div className="skeleton sk-line sk-w-full" />
          <div className="skeleton sk-line sk-w-half" />
          <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
            <div className="skeleton sk-line-sm" style={{ width: 56 }} />
            <div className="skeleton sk-line-sm" style={{ width: 80 }} />
            <div className="skeleton sk-line-sm" style={{ width: 64 }} />
          </div>
        </div>
      ))}
    </div>
  )
}