import { useBridge, usePanelState, usePublish, usePublishText, type PanelRef } from '@jaspers-ai/sdk'
import { useEffect, useMemo, useState } from 'react'
import '../styles.css'
import { calcDte, type ChainMeta, type ChainRow } from './math.ts'
import {
  AlpacaProviderLoader,
  DatabentoProviderLoader,
  MassiveProviderLoader,
  YahooProviderLoader,
} from './ProviderLoader.tsx'
import { StraddleTable } from './StraddleTable.tsx'

const WATCHLIST = ['FLWS', 'BRCB', 'GO', 'CWH', 'JBSS', 'WEN', 'PLBY', 'SPY']
const PROVIDERS = [
  { id: 'yahoo', label: 'Yahoo' },
  { id: 'alpaca', label: 'Alpaca' },
  { id: 'massive', label: 'Massive' },
  { id: 'databento', label: 'Databento' },
] as const
const STRIKE_CHOICES = [
  { value: 10, label: '10 Strikes' },
  { value: 20, label: '20 Strikes' },
  { value: 40, label: '40 Strikes' },
  { value: 0, label: 'All Strikes' },
]

function fmtNum(v: number | null | undefined, d = 2): string {
  if (v == null || !Number.isFinite(v)) return '-'
  return v.toFixed(d)
}

export function TableView({ panel }: { panel: PanelRef }) {
  const [symbolState, setSymbol] = usePanelState<string>(panel, 'symbol', 'FLWS')
  const [providerState, setProvider] = usePanelState<'yahoo' | 'alpaca' | 'massive' | 'databento'>(
    panel,
    'provider',
    'yahoo',
  )
  const [alpacaFeedState] = usePanelState<'indicative' | 'opra'>(panel, 'alpacaFeed', 'indicative')
  const [expirationState, setExpiration] = usePanelState<string | null>(panel, 'expiration', null)
  const [strikesState, setStrikes] = usePanelState<number>(panel, 'strikes', 20)

  const symbol = (symbolState || 'FLWS').toUpperCase()
  const provider = providerState || 'yahoo'
  const alpacaFeed = alpacaFeedState || 'indicative'
  const expiration = expirationState ?? null
  const strikes = strikesState ?? 20

  const [tickerInput, setTickerInput] = useState(symbol)
  useEffect(() => {
    setTickerInput(symbol)
  }, [symbol])

  const commitTicker = (raw: string) => {
    const clean = raw.trim().toUpperCase()
    if (!clean) return
    setTickerInput(clean)
    if (clean !== symbol) {
      setExpiration(null)
      setSymbol(clean)
    }
  }

  const tickerChoices = useMemo(
    () => (WATCHLIST.includes(symbol) ? WATCHLIST : [symbol, ...WATCHLIST]),
    [symbol],
  )

  const Loader =
    provider === 'alpaca'
      ? AlpacaProviderLoader
      : provider === 'massive'
        ? MassiveProviderLoader
        : provider === 'databento'
          ? DatabentoProviderLoader
          : YahooProviderLoader

  return (
    <div className="oc-root">
      <Loader symbol={symbol} expiration={expiration} strikes={strikes} alpacaFeed={alpacaFeed}>
        {(res) => {
          const expirations = res.meta?.expirations ?? []
          const activeExp = res.meta?.selectedExpiration ?? expiration ?? expirations[0] ?? ''

          return (
            <>
              <div className="oc-toolbar">
                <div className="oc-field">
                  <span className="oc-label">Ticker</span>
                  <select
                    className="oc-select oc-select-mono"
                    value={symbol}
                    onChange={(e) => commitTicker(e.target.value)}
                  >
                    {tickerChoices.map((t) => (
                      <option key={t} value={t}>
                        {t}
                      </option>
                    ))}
                  </select>
                  <input
                    className="oc-input"
                    value={tickerInput}
                    placeholder="Custom..."
                    onChange={(e) => setTickerInput(e.target.value.toUpperCase())}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') commitTicker(tickerInput)
                    }}
                  />
                  <button type="button" className="oc-btn" onClick={() => commitTicker(tickerInput)}>
                    Go
                  </button>
                </div>

                <div className="oc-field">
                  <span className="oc-label">Vendor</span>
                  <select
                    className="oc-select"
                    value={provider}
                    onChange={(e) => {
                      const next = e.target.value as 'yahoo' | 'alpaca' | 'massive' | 'databento'
                      setExpiration(null)
                      setProvider(next)
                    }}
                  >
                    {PROVIDERS.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.label}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="oc-field">
                  <span className="oc-label">Expiration</span>
                  <select
                    className="oc-select oc-select-mono"
                    value={activeExp}
                    disabled={expirations.length === 0}
                    onChange={(e) => setExpiration(e.target.value || null)}
                  >
                    {expirations.length === 0 ? (
                      <option value="">{res.loading ? 'Loading expirations...' : 'No expirations'}</option>
                    ) : (
                      expirations.map((exp) => {
                        const dte = calcDte(exp)
                        return (
                          <option key={exp} value={exp}>
                            {exp} ({dte} DTE)
                          </option>
                        )
                      })
                    )}
                  </select>
                </div>

                <div className="oc-field">
                  <span className="oc-label">Strikes</span>
                  <select
                    className="oc-select"
                    value={strikes <= 0 || strikes >= 200 ? 0 : strikes}
                    onChange={(e) => setStrikes(Number(e.target.value))}
                  >
                    {STRIKE_CHOICES.map((c) => (
                      <option key={c.value} value={c.value}>
                        {c.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <ChainBody
                panel={panel}
                symbol={symbol}
                provider={provider}
                expiration={expiration}
                rows={res.rows}
                meta={res.meta}
                loading={res.loading}
                error={res.error}
              />
            </>
          )
        }}
      </Loader>
    </div>
  )
}

function ChainBody({
  panel,
  symbol,
  provider,
  expiration,
  rows,
  meta,
  loading,
  error,
}: {
  panel: PanelRef
  symbol: string
  provider: string
  expiration: string | null
  rows: ChainRow[]
  meta: ChainMeta | null
  loading: boolean
  error: string | null
}) {
  const bridge = useBridge()
  const [copiedOcc, setCopiedOcc] = useState<string | null>(null)
  const activeExp = meta?.selectedExpiration ?? expiration ?? meta?.expirations?.[0] ?? null

  usePublish(panel, {
    symbol,
    provider,
    expiration: activeExp,
    spot: meta?.spot ?? null,
    strikeCount: rows.length,
    expirationsCount: meta?.expirations?.length ?? 0,
    atmIv: meta?.atmIv ?? null,
    atmStraddle: meta?.straddlePrice ?? null,
    pcRatioOi: meta?.pcOiRatio ?? null,
    maxPain: meta?.maxPain ?? null,
  })

  const textSummary = useMemo(() => {
    if (!meta && rows.length === 0) {
      return `Option Chain: ${symbol} (${provider}) - ${loading ? 'Loading' : error || 'No data'}`
    }
    const header = `Option Chain ${symbol} (${meta?.feedLabel ?? provider}) | Spot: $${fmtNum(meta?.spot)} | Exp: ${activeExp ?? '-'} (${meta?.dte ?? '-'}d) | ATM Strike: ${fmtNum(meta?.atmStrike)} | ATM IV: ${fmtNum(meta?.atmIv)}% | Straddle: $${fmtNum(meta?.straddlePrice)} | P/C OI: ${fmtNum(meta?.pcOiRatio)} | P/C Vol: ${fmtNum(meta?.pcVolRatio)} | Max Pain: $${fmtNum(meta?.maxPain)}`
    const cols =
      'CallBid | CallAsk | CallLast | CallVol | CallOI | CallIV% | CallDelta | Strike | PutDelta | PutIV% | PutOI | PutVol | PutLast | PutBid | PutAsk'
    const lines = rows.map(
      (r) =>
        `${fmtNum(r.callBid)}${r.callBidSize ? 'x' + r.callBidSize : ''} | ${fmtNum(r.callAsk)}${r.callAskSize ? 'x' + r.callAskSize : ''} | ${fmtNum(r.callLast)} | ${r.callVol ?? 0} | ${r.callOi ?? 0} | ${fmtNum(r.callIv)} | ${fmtNum(r.callDelta, 3)} | [${fmtNum(r.strike)}] | ${fmtNum(r.putDelta, 3)} | ${fmtNum(r.putIv)} | ${r.putOi ?? 0} | ${r.putVol ?? 0} | ${fmtNum(r.putLast)} | ${fmtNum(r.putBid)}${r.putBidSize ? 'x' + r.putBidSize : ''} | ${fmtNum(r.putAsk)}${r.putAskSize ? 'x' + r.putAskSize : ''}`,
    )
    return [header, cols, ...lines].join('\n')
  }, [symbol, provider, meta, activeExp, rows, loading, error])

  usePublishText(panel, textSummary)

  const handlePickContract = (occ: string) => {
    bridge.copyText(occ)
    setCopiedOcc(occ)
  }

  return (
    <>
      {meta && (
        <div className="oc-summary-bar">
          <div className="oc-stat">
            <span className="oc-stat-label">Spot</span>
            <span className="oc-stat-val">${fmtNum(meta.spot)}</span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">Exp / DTE</span>
            <span className="oc-stat-val">
              {activeExp ?? '-'} ({meta.dte ?? '-'}d)
            </span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">ATM IV</span>
            <span className="oc-stat-val">{meta.atmIv != null ? `${fmtNum(meta.atmIv)}%` : '-'}</span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">ATM Straddle</span>
            <span className="oc-stat-val">
              {meta.straddlePrice != null ? `$${fmtNum(meta.straddlePrice)}` : '-'}
              {meta.straddlePct != null ? ` (${fmtNum(meta.straddlePct)}%)` : ''}
            </span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">P/C OI</span>
            <span className="oc-stat-val">{fmtNum(meta.pcOiRatio)}</span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">P/C Vol</span>
            <span className="oc-stat-val">{fmtNum(meta.pcVolRatio)}</span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">Max Pain</span>
            <span className="oc-stat-val">{meta.maxPain != null ? `$${fmtNum(meta.maxPain)}` : '-'}</span>
          </div>
          <div className="oc-stat">
            <span className="oc-stat-label">Feed</span>
            <span className="oc-stat-val">
              {meta.feedLabel}
              {copiedOcc ? ` | Copied ${copiedOcc}` : ''}
            </span>
          </div>
        </div>
      )}

      {meta?.note && <div className="oc-note">{meta.note}</div>}
      {error && <div className="oc-error">{error}</div>}
      {loading && rows.length === 0 && <div className="oc-note">Loading {symbol} option chain...</div>}
      {!loading && !error && rows.length === 0 && (
        <div className="oc-note">No option contracts found for {symbol}.</div>
      )}

      {rows.length > 0 && (
        <StraddleTable
          rows={rows}
          spot={meta?.spot ?? null}
          atmStrike={meta?.atmStrike ?? null}
          onPickContract={handlePickContract}
        />
      )}
    </>
  )
}