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

interface Account {
  mode: string
  account_number: string | null
  status: string | null
  equity: number | null
  cash: number | null
  buying_power: number | null
  day_pl: number | null
  day_pl_pct: number | null
  portfolio_value: number | null
  trading_blocked: boolean
  pattern_day_trader: boolean
  daytrade_count: number | null
}

interface Position {
  symbol: string
  side: string | null
  qty: number | null
  avg_entry_price: number | null
  current_price: number | null
  market_value: number | null
  unrealized_pl: number | null
  unrealized_plpc: number | null
  change_today: number | null
}

export function AccountPanel({ panel }: { panel: PanelRef }) {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as
    | { live_account?: boolean }
    | undefined
  if (state === undefined) return <p className="al-note">Loading…</p>
  return <Panel panel={panel} live={state.live_account === true} />
}

function Panel({ panel, live }: { panel: PanelRef; live: boolean }) {
  const acct = useData('alpaca/account', { live_account: live })
  const pos = useData('alpaca/positions', { live_account: live })
  const a = ((acct.data ?? []) as Account[])[0]
  const rows = (pos.data ?? []) as Position[]
  usePublish(panel, {
    mode: live ? 'live' : 'paper',
    equity: a?.equity ?? null,
    cash: a?.cash ?? null,
    buying_power: a?.buying_power ?? null,
    day_pl: a?.day_pl ?? null,
    positions: rows.length,
  })

  return (
    <div className="al">
      <div className="al-head">
        <h3 className="al-title">Alpaca account</h3>
        <span className={live ? 'al-badge al-badge-live' : 'al-badge'}>{live ? 'LIVE' : 'paper'}</span>
        {a?.account_number && <span className="al-muted">{a.account_number}</span>}
        {a?.status && <span className="al-muted">{a.status}</span>}
        {a?.trading_blocked && <span className="al-badge al-badge-live">trading blocked</span>}
        <button
          className="al-btn"
          onClick={() => {
            acct.refetch?.()
            pos.refetch?.()
          }}
        >
          Refresh
        </button>
      </div>
      {acct.error ? (
        <p className="al-note al-error">{acct.error}</p>
      ) : !a ? (
        <p className="al-note">Loading…</p>
      ) : (
        <div className="al-cards">
          <Card label="Equity" value={fmt(a.equity)} />
          <Card label="Cash" value={fmt(a.cash)} />
          <Card label="Buying power" value={fmt(a.buying_power)} />
          <Card
            label="Day P/L"
            value={`${fmt(a.day_pl)} (${fmt(a.day_pl_pct)}%)`}
            className={sign(a.day_pl)}
          />
          <Card label="Day trades" value={`${a.daytrade_count ?? '–'}${a.pattern_day_trader ? ' · PDT' : ''}`} />
        </div>
      )}
      {pos.error ? (
        <p className="al-note al-error">{pos.error}</p>
      ) : !pos.data ? null : rows.length === 0 ? (
        <p className="al-note">No open positions.</p>
      ) : (
        <table className="al-table">
          <thead>
            <tr>
              <th>Symbol</th>
              <th>Side</th>
              <th className="al-num">Qty</th>
              <th className="al-num">Avg entry</th>
              <th className="al-num">Price</th>
              <th className="al-num">Market value</th>
              <th className="al-num">Unrealized P/L</th>
              <th className="al-num">P/L %</th>
              <th className="al-num">Today %</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((p) => (
              <tr key={p.symbol}>
                <td>{p.symbol}</td>
                <td>{p.side ?? '–'}</td>
                <td className="al-num">{fmt(p.qty, 0)}</td>
                <td className="al-num">{fmt(p.avg_entry_price)}</td>
                <td className="al-num">{fmt(p.current_price)}</td>
                <td className="al-num">{fmt(p.market_value)}</td>
                <td className={`al-num ${sign(p.unrealized_pl)}`}>{fmt(p.unrealized_pl)}</td>
                <td className={`al-num ${sign(p.unrealized_plpc)}`}>
                  {p.unrealized_plpc === null ? '–' : `${fmt(p.unrealized_plpc * 100)}%`}
                </td>
                <td className={`al-num ${sign(p.change_today)}`}>
                  {p.change_today === null ? '–' : `${fmt(p.change_today * 100)}%`}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}

function Card({ label, value, className = '' }: { label: string; value: string; className?: string }) {
  return (
    <div className="al-card">
      <div className="al-card-label">{label}</div>
      <div className={`al-card-value ${className}`}>{value}</div>
    </div>
  )
}