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

interface Order {
  id: string
  symbol: string | null
  side: string | null
  type: string | null
  time_in_force: string | null
  qty: number | null
  notional: number | null
  filled_qty: number | null
  limit_price: number | null
  stop_price: number | null
  filled_avg_price: number | null
  status: string | null
  submitted_at: string | null
  parent_id: string | null
}

interface State {
  status?: 'open' | 'closed' | 'all'
  limit?: number
  live_account?: boolean
}

const OPEN = new Set(['new', 'accepted', 'pending_new', 'partially_filled', 'accepted_for_bidding', 'held', 'calculated', 'pending_replace'])

function statusClass(status: string | null): string {
  if (status === 'filled') return 'al-status-filled'
  if (status && OPEN.has(status)) return 'al-status-open'
  if (status === 'rejected' || status === 'suspended') return 'al-status-bad'
  return 'al-status-dead'
}

export function Blotter({ 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 (
    <Table panel={panel} status={state.status ?? 'all'} limit={state.limit ?? 50} live={state.live_account === true} />
  )
}

function Table({ panel, status, limit, live }: { panel: PanelRef; status: string; limit: number; live: boolean }) {
  const { data, error, refetch } = useData('alpaca/orders', { status, limit, live_account: live })
  const rows = (data ?? []) as Order[]
  // Per order: 'confirm' after the first click, 'cancelling' after the second, or a result message.
  const [phase, setPhase] = useState<Record<string, string>>({})
  const set = (id: string, value: string | null) =>
    setPhase((p) => {
      const next = { ...p }
      if (value === null) delete next[id]
      else next[id] = value
      return next
    })
  usePublish(panel, { status, count: rows.length, open: rows.filter((r) => r.status && OPEN.has(r.status)).length })

  return (
    <div className="al">
      <div className="al-head">
        <h3 className="al-title">Alpaca orders · {status}</h3>
        <span className={live ? 'al-badge al-badge-live' : 'al-badge'}>{live ? 'LIVE' : 'paper'}</span>
        <button className="al-btn" onClick={() => refetch?.()}>
          Refresh
        </button>
      </div>
      {error ? (
        <p className="al-note al-error">{error}</p>
      ) : !data ? (
        <p className="al-note">Loading…</p>
      ) : rows.length === 0 ? (
        <p className="al-note">No {status === 'all' ? '' : `${status} `}orders.</p>
      ) : (
        <table className="al-table">
          <thead>
            <tr>
              <th>Submitted</th>
              <th>Symbol</th>
              <th>Side</th>
              <th>Type</th>
              <th className="al-num">Qty</th>
              <th className="al-num">Filled</th>
              <th className="al-num">Limit</th>
              <th className="al-num">Stop</th>
              <th className="al-num">Avg fill</th>
              <th>TIF</th>
              <th>Status</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {rows.map((o) => {
              const p = phase[o.id]
              const cancellable = o.status !== null && OPEN.has(o.status)
              return (
                <tr key={o.id}>
                  <td className="al-muted">{o.submitted_at?.replace('T', ' ').slice(0, 19) ?? '–'}</td>
                  <td>{o.parent_id ? `↳ ${o.symbol}` : o.symbol}</td>
                  <td className={o.side === 'buy' ? 'al-up' : 'al-down'}>{o.side}</td>
                  <td>{o.type}</td>
                  <td className="al-num">{o.qty !== null ? fmt(o.qty, 0) : o.notional !== null ? `$${fmt(o.notional)}` : '–'}</td>
                  <td className="al-num">{fmt(o.filled_qty, 0)}</td>
                  <td className="al-num">{fmt(o.limit_price)}</td>
                  <td className="al-num">{fmt(o.stop_price)}</td>
                  <td className="al-num">{fmt(o.filled_avg_price)}</td>
                  <td>{o.time_in_force}</td>
                  <td className={statusClass(o.status)}>{o.status}</td>
                  <td>
                    {!cancellable && !p ? null : p === undefined ? (
                      <button className="al-btn" onClick={() => set(o.id, 'confirm')}>
                        Cancel
                      </button>
                    ) : p === 'confirm' ? (
                      <>
                        <button className="al-btn al-btn-danger" onClick={() => set(o.id, 'cancelling')}>
                          Confirm cancel{live ? ' (LIVE)' : ''}
                        </button>{' '}
                        <button className="al-btn" onClick={() => set(o.id, null)}>
                          Keep
                        </button>
                      </>
                    ) : p === 'cancelling' ? (
                      <Canceller
                        id={o.id}
                        live={live}
                        onDone={(message) => {
                          set(o.id, message)
                          refetch?.()
                        }}
                      />
                    ) : (
                      <span className="al-muted">{p}</span>
                    )}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      )}
    </div>
  )
}

/** Mounted only after the user clicked Cancel and then Confirm: this is the one place cancel-order runs. */
function Canceller({ id, live, onDone }: { id: string; live: boolean; onDone: (message: string) => void }) {
  const { data, error } = useData('alpaca/cancel-order', { order_id: id, live_account: live })
  useEffect(() => {
    if (error) onDone(`Not cancelled: ${error}`)
    else if (data) onDone('Cancel requested')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data, error])
  return <span className="al-muted">Cancelling…</span>
}