'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>
}

function SourceIcon({ source: _source }: { source: string }) {
  // Truth Social only — no X/Twitter support.
  return <div className="src-ico truth">T</div>
}

function SignalPill({ signal }: { signal: string | null }) {
  if (!signal || signal === 'hold') return <span className="sig hold">HOLD</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">
            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>@realDonaldTrump</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} />
          <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>

          {/* 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 }