import { useBridge, useData, usePublish, type PanelRef } from '@jaspers-ai/sdk'
import './styles.css'

interface Article {
  id: string
  published: string | null
  title: string | null
  publisher: string | null
  author: string | null
  url: string | null
  summary: string | null
  tickers: string | null
  insights: string | null
  sentiment: string | null
  sentiment_ticker: string | null
  sentiment_reasoning: string | null
  [field: string]: unknown
}

interface State {
  tickers?: string[]
  limit?: number
}

const when = (s: string | null) => (s ? new Date(s).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }) : '')
const tone = (s: string | null) => (s === 'positive' ? 'mv-up' : s === 'negative' ? 'mv-down' : '')

export function NewsView({ panel }: { panel: PanelRef }) {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as State | undefined
  if (state === undefined) return <p className="mv-note">Loading…</p>
  const tickers = (state.tickers ?? ['AAPL']).map((t) => t.trim().toUpperCase()).filter(Boolean)
  return <List panel={panel} tickers={tickers} limit={state.limit ?? 50} />
}

function List({ panel, tickers, limit }: { panel: PanelRef; tickers: string[]; limit: number }) {
  const bridge = useBridge()
  const { data, error, loading, refetch } = useData('massive/news', { tickers, limit })
  const rows = (data ?? []) as Article[]
  usePublish(panel, { tickers, count: rows.length, latest: rows[0]?.title ?? null, error: error ?? null })

  return (
    <div className="mv-wrap">
      <div className="mv-bar">
        <span className="mv-title">News · {tickers.join(', ') || 'all'}</span>
        <button className="mv-button" onClick={() => refetch()} disabled={loading}>
          {loading ? 'Loading…' : 'Refresh'}
        </button>
      </div>
      {error ? <p className="mv-note mv-error">{error}</p> : null}
      {!data && !error ? <p className="mv-note">Loading…</p> : null}
      {data && !rows.length ? <p className="mv-note">No articles.</p> : null}
      <ul className="mv-news">
        {rows.map((a) => (
          <li key={a.id ?? a.url ?? a.title}>
            <a
              className="mv-headline"
              href={a.url ?? undefined}
              onClick={(e) => {
                e.preventDefault()
                if (a.url) bridge.openLink(a.url)
              }}
            >
              {a.title}
            </a>
            <div className="mv-meta">
              {[a.publisher, a.author, when(a.published)].filter(Boolean).join(' · ')}
              {a.tickers ? ` · ${a.tickers}` : ''}
            </div>
            {a.summary ? <p className="mv-summary">{a.summary}</p> : null}
            {a.sentiment ? (
              <div>
                <span className={`mv-tag ${tone(a.sentiment)}`}>
                  {a.sentiment_ticker}: {a.sentiment}
                </span>
                {a.sentiment_reasoning ? <span className="mv-meta"> {a.sentiment_reasoning}</span> : null}
              </div>
            ) : null}
          </li>
        ))}
      </ul>
    </div>
  )
}