import { useData, usePanelState, usePublish, type PanelRef } from '@jaspers-ai/sdk'
import { useEffect, useState } from 'react'
import { fmt, int, sign } from './format'
import './styles.css'

interface Snap {
  symbol: string
  last: number | null
  bid: number | null
  ask: number | null
  change: number | null
  change_pct: number | null
  day_volume: number | null
  [field: string]: unknown
}

interface State {
  symbols?: string[]
  feed?: string
}

const DEFAULT = ['AAPL', 'MSFT', 'NVDA']

export function Watchlist({ panel }: { panel: PanelRef }) {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as State | undefined
  if (state === undefined) return <p className="al-note">Loading…</p>
  return <List panel={panel} feed={state.feed ?? 'iex'} />
}

function List({ panel, feed }: { panel: PanelRef; feed: string }) {
  const [symbols, setSymbols] = usePanelState(panel, 'symbols', DEFAULT) as [string[], (v: string[]) => void]
  const [draft, setDraft] = useState('')
  const list = symbols ?? []

  const add = () => {
    const wanted = draft
      .split(/[\s,]+/)
      .map((s) => s.trim().toUpperCase())
      .filter((s) => s && !list.includes(s))
    if (wanted.length) setSymbols([...list, ...wanted].slice(0, 100))
    setDraft('')
  }
  const remove = (symbol: string) => setSymbols(list.filter((s) => s !== symbol))

  return (
    <div className="al">
      <div className="al-head">
        <h3 className="al-title">Alpaca watchlist</h3>
        <span className="al-badge">{feed}</span>
        <input
          className="al-input"
          placeholder="Add symbol"
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') add()
          }}
        />
        <button className="al-btn" onClick={add}>
          Add
        </button>
      </div>
      {list.length === 0 ? <Empty panel={panel} /> : <Rows panel={panel} symbols={list} feed={feed} onRemove={remove} />}
    </div>
  )
}

function Empty({ panel }: { panel: PanelRef }) {
  usePublish(panel, { symbols: [], count: 0, rows: [] })
  return <p className="al-note">No symbols. Add one above.</p>
}

function Rows(props: { panel: PanelRef; symbols: string[]; feed: string; onRemove: (s: string) => void }) {
  const { panel, symbols, feed, onRemove } = props
  const { data, error, refetch } = useData('alpaca/stock-snapshots', { symbols, feed })
  // Refresh every 15 seconds while the view is open; each refresh is one quick read.
  useEffect(() => {
    const timer = setInterval(() => refetch?.(), 15_000)
    return () => clearInterval(timer)
  }, [refetch])
  const rows = (data ?? []) as Snap[]
  usePublish(panel, {
    symbols: rows.map((r) => r.symbol),
    count: rows.length,
    rows: rows.slice(0, 50).map((r) => ({ symbol: r.symbol, last: r.last, change_pct: r.change_pct })),
  })

  if (error) return <p className="al-note al-error">{error}</p>
  if (!data) return <p className="al-note">Loading…</p>
  const bySymbol = new Map(rows.map((r) => [r.symbol, r]))
  return (
    <table className="al-table">
      <thead>
        <tr>
          <th>Symbol</th>
          <th className="al-num">Last</th>
          <th className="al-num">Bid</th>
          <th className="al-num">Ask</th>
          <th className="al-num">Change</th>
          <th className="al-num">Change %</th>
          <th className="al-num">Volume</th>
          <th />
        </tr>
      </thead>
      <tbody>
        {symbols.map((symbol) => {
          const r = bySymbol.get(symbol)
          return (
            <tr key={symbol}>
              <td>{symbol}</td>
              <td className="al-num">{fmt(r?.last)}</td>
              <td className="al-num">{fmt(r?.bid)}</td>
              <td className="al-num">{fmt(r?.ask)}</td>
              <td className={`al-num ${sign(r?.change)}`}>{fmt(r?.change)}</td>
              <td className={`al-num ${sign(r?.change_pct)}`}>{r ? `${fmt(r.change_pct)}%` : '–'}</td>
              <td className="al-num">{int(r?.day_volume)}</td>
              <td>
                <button className="al-x" title={`Remove ${symbol}`} onClick={() => onRemove(symbol)}>
                  ×
                </button>
              </td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}