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

interface Story {
  id: number
  created: string
  title: string
  teaser: string
  url: string
  tickers: string
  [field: string]: unknown
}

interface State {
  tickers?: string[]
  channels?: string[]
  pageSize?: number
}

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="bz-note">Loading…</p>
  return <List panel={panel} tickers={state.tickers ?? []} channels={state.channels ?? []} pageSize={state.pageSize ?? 30} />
}

function when(iso: string): string {
  const date = new Date(iso)
  if (Number.isNaN(date.getTime())) return iso
  const today = new Date().toDateString() === date.toDateString()
  return today
    ? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

function List({ panel, tickers, channels, pageSize }: { panel: PanelRef; tickers: string[]; channels: string[]; pageSize: number }) {
  const args: Record<string, unknown> = { pageSize, displayOutput: 'abstract' }
  if (tickers.length) args.tickers = tickers.join(',')
  if (channels.length) args.channels = channels.join(',')
  const { data, error } = useData('benzinga/news', args)
  const bridge = useBridge()
  const rows = (data ?? []) as Story[]
  usePublish(panel, {
    tickers,
    count: rows.length,
    headlines: rows.slice(0, 10).map((r) => ({ created: r.created, title: r.title })),
  })

  const heading = `Benzinga news${tickers.length ? ` · ${tickers.join(', ')}` : ''}`
  return (
    <div className="bz">
      <h3 className="bz-title">{heading}</h3>
      {error ? (
        <p className="bz-note bz-error">{error}</p>
      ) : !data ? (
        <p className="bz-note">Loading…</p>
      ) : rows.length === 0 ? (
        <p className="bz-note">No stories in the last 7 days.</p>
      ) : (
        <ul className="bz-list">
          {rows.map((row) => (
            <li key={row.id} className="bz-item">
              <div className="bz-meta">
                <span className="bz-time">{when(row.created)}</span>
                {row.tickers && <span className="bz-tickers">{row.tickers.split(',').slice(0, 6).join(' ')}</span>}
              </div>
              <a
                className="bz-headline"
                href={row.url}
                onClick={(event) => {
                  event.preventDefault()
                  if (row.url) bridge.openLink(row.url)
                }}
              >
                {row.title}
              </a>
              {row.teaser && <p className="bz-teaser">{row.teaser}</p>}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}