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

interface Snap {
  ticker: string
  last: number | null
  change: number | null
  changePercent: number | null
  volume: number | null
  updated: string | null
  [field: string]: unknown
}

const fmt = (v: number | null | undefined, d = 2) => (typeof v === 'number' ? v.toFixed(d) : '–')
const vol = (v: number | null | undefined) =>
  typeof v !== 'number' ? '–' : v >= 1e9 ? `${(v / 1e9).toFixed(2)}B` : v >= 1e6 ? `${(v / 1e6).toFixed(2)}M` : v >= 1e3 ? `${(v / 1e3).toFixed(1)}K` : String(v)
const sign = (v: number | null | undefined) => (typeof v !== 'number' || v === 0 ? '' : v > 0 ? 'mv-up' : 'mv-down')

export function WatchlistView({ panel }: { panel: PanelRef }) {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as { tickers?: string[] } | undefined
  if (state === undefined) return <p className="mv-note">Loading…</p>
  const tickers = (state.tickers ?? []).map((t) => t.trim().toUpperCase()).filter(Boolean)
  if (!tickers.length) return <Empty panel={panel} />
  return <Table panel={panel} tickers={tickers} />
}

function Empty({ panel }: { panel: PanelRef }) {
  usePublish(panel, { tickers: [], count: 0, error: null })
  return <p className="mv-note">No tickers yet. Ask for some.</p>
}

function Table({ panel, tickers }: { panel: PanelRef; tickers: string[] }) {
  const { data, error, loading, refetch } = useData('massive/snapshot', { tickers })
  const rows = (data ?? []) as Snap[]
  usePublish(panel, { tickers: rows.map((r) => r.ticker), count: rows.length, error: error ?? null })

  return (
    <div className="mv-wrap">
      <div className="mv-bar">
        <span className="mv-title">Watchlist</span>
        <button className="mv-button" onClick={() => refetch()} disabled={loading}>
          {loading ? 'Refreshing…' : 'Refresh'}
        </button>
      </div>
      {error ? <p className="mv-note mv-error">{error}</p> : null}
      {!data && !error ? <p className="mv-note">Loading…</p> : null}
      {data ? (
        <table className="mv-table">
          <thead>
            <tr>
              <th>Ticker</th>
              <th className="mv-num">Last</th>
              <th className="mv-num">Change</th>
              <th className="mv-num">Change %</th>
              <th className="mv-num">Volume</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.ticker}>
                <td>{r.ticker}</td>
                <td className="mv-num">{fmt(r.last)}</td>
                <td className={`mv-num ${sign(r.change)}`}>{fmt(r.change)}</td>
                <td className={`mv-num ${sign(r.changePercent)}`}>{typeof r.changePercent === 'number' ? `${fmt(r.changePercent)}%` : '–'}</td>
                <td className="mv-num">{vol(r.volume)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
    </div>
  )
}