import { Fragment } from 'react'
import type { ChainRow } from './math.ts'

function fmt(n: number | null | undefined, digits = 2): string {
  if (n == null || !Number.isFinite(n)) return '-'
  return n.toFixed(digits)
}

function fmtInt(n: number | null | undefined): string {
  if (n == null || !Number.isFinite(n)) return '-'
  return Math.round(n).toLocaleString()
}

function fmtQuote(px: number | null | undefined, sz: number | null | undefined): string {
  if (px == null || !Number.isFinite(px)) return '-'
  if (sz != null && Number.isFinite(sz) && sz > 0) return `${px.toFixed(2)} x${Math.round(sz)}`
  return px.toFixed(2)
}

export function StraddleTable({
  rows,
  spot,
  atmStrike,
  onPickContract,
}: {
  rows: ChainRow[]
  spot: number | null
  atmStrike: number | null
  onPickContract?: (occ: string) => void
}) {
  let maxOi = 1
  for (const r of rows) {
    if ((r.callOi ?? 0) > maxOi) maxOi = r.callOi!
    if ((r.putOi ?? 0) > maxOi) maxOi = r.putOi!
  }

  let atmInserted = false
  const pick = (occ: string) => {
    if (onPickContract) onPickContract(occ)
  }

  return (
    <div className="oc-table-wrap">
      <table className="oc-table">
        <thead>
          <tr>
            <th colSpan={7} className="oc-center">Calls</th>
            <th className="oc-center">Strike</th>
            <th colSpan={7} className="oc-center">Puts</th>
          </tr>
          <tr>
            <th>OI</th>
            <th>Vol</th>
            <th>IV%</th>
            <th>Delta</th>
            <th>Bid</th>
            <th>Ask</th>
            <th>Last</th>
            <th className="oc-center">K</th>
            <th>Last</th>
            <th>Bid</th>
            <th>Ask</th>
            <th>Delta</th>
            <th>IV%</th>
            <th>Vol</th>
            <th>OI</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => {
            const next = rows[i + 1]
            const showDividerAfter =
              !atmInserted &&
              spot != null &&
              r.strike <= spot &&
              (next == null || next.strike > spot)
            if (showDividerAfter) atmInserted = true

            const callOiPct = r.callOi ? Math.min(100, Math.round((r.callOi / maxOi) * 100)) : 0
            const putOiPct = r.putOi ? Math.min(100, Math.round((r.putOi / maxOi) * 100)) : 0
            const isAtm = atmStrike != null && r.strike === atmStrike
            const cClass = `oc-clickable ${r.callItm ? 'oc-itm' : ''}`
            const pClass = `oc-clickable ${r.putItm ? 'oc-itm' : ''}`

            return (
              <Fragment key={r.strike}>
                <tr>
                  <td className={cClass} onClick={() => pick(r.callContract)} title={r.callContract}>
                    {callOiPct > 0 && <span className="oc-oi-bar oc-oi-call" style={{ width: `${callOiPct}%` }} />}
                    {fmtInt(r.callOi)}
                  </td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{fmtInt(r.callVol)}</td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{r.callIv != null ? `${fmt(r.callIv, 1)}%` : '-'}</td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{fmt(r.callDelta, 2)}</td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{fmtQuote(r.callBid, r.callBidSize)}</td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{fmtQuote(r.callAsk, r.callAskSize)}</td>
                  <td className={cClass} onClick={() => pick(r.callContract)}>{fmt(r.callLast)}</td>
                  <td className="oc-strike">
                    {fmt(r.strike)}
                    {isAtm ? ' *' : ''}
                  </td>
                  <td className={pClass} onClick={() => pick(r.putContract)} title={r.putContract}>{fmt(r.putLast)}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)}>{fmtQuote(r.putBid, r.putBidSize)}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)}>{fmtQuote(r.putAsk, r.putAskSize)}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)}>{fmt(r.putDelta, 2)}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)}>{r.putIv != null ? `${fmt(r.putIv, 1)}%` : '-'}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)}>{fmtInt(r.putVol)}</td>
                  <td className={pClass} onClick={() => pick(r.putContract)} title={r.putContract}>
                    {putOiPct > 0 && <span className="oc-oi-bar oc-oi-put" style={{ width: `${putOiPct}%` }} />}
                    {fmtInt(r.putOi)}
                  </td>
                </tr>
                {showDividerAfter && (
                  <tr className="oc-atm-divider">
                    <td colSpan={15}>
                      CALLS ITM - UNDERLYING SPOT ${fmt(spot)} - PUTS ITM
                    </td>
                  </tr>
                )}
              </Fragment>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}