trumpsignal-frontend/components/dashboard/PostCards.tsx

'use client'

import { useEffect, useState } from 'react'
import type { TrumpPost } from '@/types'

function fmtPct(n: number | null | undefined) {
  if (n == null || isNaN(n)) return '—'   // null = window not yet closed
  const s = n.toFixed(2) + '%'
  return n >= 0 ? '+' + s : s
}

function fmtImpactPct(v: number | null | undefined) {
  if (v == null || isNaN(v)) return '—'
  const s = Math.abs(v).toFixed(2) + '%'
  return v >= 0 ? '+' + s : '-' + s
}

function timeAgo(iso: string) {
  const diff = Date.now() - new Date(iso).getTime()
  const m = Math.floor(diff / 60000)
  if (m < 1) return 'just now'
  if (m < 60) return m + 'm'
  const h = Math.floor(m / 60)
  if (h < 24) return h + 'h'
  return Math.floor(h / 24) + 'd'
}

/**
 * Hydration-safe wrapper for relative time. Returns an empty placeholder on
 * SSR / first client render, then the real relative time after mount. Prevents
 * the SSR/CSR "5m vs 6m" mismatch error.
 */
function TimeAgo({ iso, suffix = '' }: { iso: string; suffix?: string }) {
  const [mounted, setMounted] = useState(false)
  useEffect(() => { setMounted(true) }, [])
  if (!mounted) return <span suppressHydrationWarning>…</span>
  return <span>{timeAgo(iso)}{suffix}</span>
}

/**
 * Hydration-safe absolute date formatter. Uses fixed 'en-US' locale + options
 * so the server/client outputs match once mounted; renders a placeholder before
 * mount to avoid timezone mismatches.
 */
function LocalDateTime({ iso, opts }: { iso: string; opts?: Intl.DateTimeFormatOptions }) {
  const [mounted, setMounted] = useState(false)
  useEffect(() => { setMounted(true) }, [])
  if (!mounted) return <span suppressHydrationWarning>…</span>
  return <span>{new Date(iso).toLocaleString('en-US', opts)}</span>
}

// Visual identity per signal source. The post stream now mixes Trump posts
// with scanner-emitted technical signals — operators need to tell them
// apart at a glance without reading the text.
//
// When adding a new scanner source, register it here too — otherwise it
// falls through to the generic "first letter" fallback which has no title
// or accent colour.
const SOURCE_DISPLAY: Record<string, { glyph: string; cls: string; title: string }> = {
  truth:                { glyph: 'T', cls: 'truth',    title: 'Trump · Truth Social' },
  breakout:             { glyph: '▲', cls: 'breakout', title: 'VCP / breakout scanner' },
  vcp_breakout:         { glyph: '▲', cls: 'breakout', title: 'VCP / breakout scanner' },
  reversal:             { glyph: '⇋', cls: 'reversal', title: 'Reversal scanner' },
  btc_bottom_reversal:  { glyph: '₿', cls: 'reversal', title: 'BTC · Macro Bottom Reversal' },
  funding_reversal:     { glyph: 'ƒ', cls: 'reversal', title: 'BTC · Funding Rate Reversal' },
  kol_divergence:       { glyph: '⚖', cls: 'whale',    title: 'KOL · Talks vs Trades Divergence' },
  whale:                { glyph: '🐋', cls: 'whale',   title: 'On-chain whale alert' },
  manual:               { glyph: '✋', cls: 'manual',  title: 'Manual entry' },
}

function SourceIcon({ source }: { source: string }) {
  const d = SOURCE_DISPLAY[source.toLowerCase()]
  if (d) {
    return <div className={`src-ico ${d.cls}`} title={d.title}>{d.glyph}</div>
  }
  // Unknown source — show first letter so user can still tell it apart.
  return <div className="src-ico external" title={`Source: ${source}`}>
    {source.charAt(0).toUpperCase()}
  </div>
}

function SignalPill({ signal }: { signal: string | null }) {
  if (!signal || signal === 'hold') return <span className="sig hold">HOLD</span>
  if (signal === 'buy') return <span className="sig buy">BUY</span>
  if (signal === 'short') return <span className="sig short">SHORT</span>
  if (signal === 'sell') return <span className="sig sell">SELL</span>
  return <span className={`sig ${signal}`}>{signal.toUpperCase()}</span>
}

interface PostRowProps {
  post: TrumpPost
  selected?: boolean
  onClick?: () => void
}

export default function PostRow({ post, selected, onClick }: PostRowProps) {
  const [expanded, setExpanded] = useState(false)
  const impact = post.price_impact

  function handleClick() {
    if (!onClick) setExpanded(e => !e)
    onClick?.()
  }

  return (
    <div
      className={`post-row ${selected ? 'selected' : ''}`}
      onClick={handleClick}
    >
      {/* ── main row ── */}
      <div className="post-row-main">
        <SourceIcon source={post.source} />
        <div className="post-body">
          <div className="meta">
            {/* Author label depends on source — non-Trump signals come from
                technical scanners or external modules, not @realDonaldTrump. */}
            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>
              {post.source === 'truth' ? '@realDonaldTrump' : post.source}
            </span>
            <span>·</span>
            <TimeAgo iso={post.published_at} suffix=" ago" />
            <span>·</span>
            <span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 11 }}>
              {post.sentiment}
            </span>
          </div>
          <p className="text" style={expanded ? { display: 'block', overflow: 'visible', WebkitLineClamp: 'unset' } : {}}>
            {expanded ? post.text : (post.text.slice(0, 180) + (post.text.length > 180 ? '…' : ''))}
          </p>
        </div>
        <div className="post-aside">
          <SignalPill signal={post.signal} />
          {/* Target asset chip for actionable signals */}
          {post.target_asset && (post.signal === 'buy' || post.signal === 'short') && (
            <span style={{
              fontSize: 10, fontWeight: 700, fontFamily: 'var(--mono)',
              padding: '2px 6px', borderRadius: 4,
              background: post.signal === 'buy' ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
              color: post.signal === 'buy' ? '#22c55e' : '#ef4444',
              letterSpacing: '0.04em',
            }}>
              {post.target_asset}
              {post.expected_move_pct ? ` +${post.expected_move_pct}%` : ''}
            </span>
          )}
          <div className="impact-mini">
            {impact ? (
              <>
                <span className="tf">1h peak</span>
                <span className={`delta ${impact.m1h == null ? '' : impact.m1h >= 0 ? 'up' : 'down'}`}>
                  {impact.m1h == null ? '…' : fmtPct(impact.m1h)}
                </span>
              </>
            ) : (
              <span className="tf">no data</span>
            )}
          </div>
          <div className="row gap-s" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
            <span>AI</span>
            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{post.ai_confidence}%</span>
          </div>
        </div>
      </div>

      {/* ── expanded detail ── */}
      {expanded && (
        <div
          className="post-row-detail"
          onClick={e => e.stopPropagation()}
        >
          {/* AI confidence bar */}
          <div>
            <div className="ai-metric-head">
              <span>AI confidence</span>
              <strong>{post.ai_confidence}%</strong>
            </div>
            <div className="confidence-bar">
              <div style={{ width: post.ai_confidence + '%' }} />
            </div>
          </div>

          {/* Trade routing — target asset + expected move */}
          {post.target_asset && (post.signal === 'buy' || post.signal === 'short') && (
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
              <span className="tiny">Trade</span>
              <span style={{
                fontSize: 12, fontWeight: 700, fontFamily: 'var(--mono)',
                padding: '3px 8px', borderRadius: 5,
                background: post.signal === 'buy' ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
                color: post.signal === 'buy' ? '#22c55e' : '#ef4444',
              }}>
                {post.signal === 'buy'
                  ? `↑ LONG ${post.target_asset}`
                  : `↓ SHORT ${post.target_asset}`}
              </span>
              {post.expected_move_pct != null && (
                <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>
                  {`AI expects ~${post.expected_move_pct}% in 1h`}
                </span>
              )}
              {post.category && (
                <span style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                  {post.category.replace(/_/g, ' ')}
                </span>
              )}
            </div>
          )}

          {/* AI reasoning */}
          {post.ai_reasoning && (
            <div>
              <div className="ai-reasoning-label">AI reasoning</div>
              <div className="ai-reasoning-card">
                {post.ai_reasoning}
              </div>
            </div>
          )}

          {/* Price impact — peak move in signal direction per window */}
          {impact && (
            <div>
              <div className="tiny" style={{ marginBottom: 8 }}>{`Peak move · ${impact.asset}`}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                {(['m5', 'm15', 'm1h'] as const).map(key => {
                  const label = key === 'm5' ? '5m' : key === 'm15' ? '15m' : '1h'
                  const v = impact[key]   // null = window still open
                  const correct = impact[`correct_${key}` as 'correct_m5' | 'correct_m15' | 'correct_m1h']
                  const pending = v == null
                  return (
                    <div key={key} style={{
                      padding: 10,
                      background: 'var(--bg-sunk)',
                      borderRadius: 'var(--r-sm)',
                      border: `1px solid ${pending ? 'var(--amber)' : 'var(--line)'}`,
                      textAlign: 'center',
                      opacity: pending ? 0.75 : 1,
                    }}>
                      <div style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 4 }}>{label}</div>
                      <div
                        className={pending ? '' : `delta ${v >= 0 ? 'up' : 'down'}`}
                        style={{ fontSize: 14, fontWeight: 600, color: pending ? 'var(--ink-3)' : undefined }}
                      >
                        {pending ? '…' : fmtImpactPct(v)}
                      </div>
                      {!pending && correct != null && (
                        <div style={{ fontSize: 10, marginTop: 4, color: correct ? 'var(--up)' : 'var(--down)' }}>
                          {correct ? '✓' : '✗'}
                        </div>
                      )}
                      {pending && (
                        <div style={{ fontSize: 9, marginTop: 4, color: 'var(--amber)' }}>live</div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

export { SignalPill, SourceIcon, fmtPct, timeAgo, TimeAgo, LocalDateTime }