import { useBridge, useData } from '@jaspers-ai/sdk'
import { useState } from 'react'
import { LIVE_ORDER_LIVE_KEY, type PendingLiveOrder } from '../actions'

export function LiveOrderGate() {
  const bridge = useBridge()
  const pending = useData(`live/${LIVE_ORDER_LIVE_KEY}`) as PendingLiveOrder | null | undefined
  const [submitting, setSubmitting] = useState(false)

  if (!pending || typeof pending !== 'object' || !pending.id) return null

  const decide = (approved: boolean) => {
    if (submitting) return
    setSubmitting(true)
    void bridge
      .runSource('alpaca/confirm-live-order', { id: pending.id, approved }, { fresh: true })
      .finally(() => setSubmitting(false))
  }

  return (
    <div className="al-gate" role="alertdialog" aria-label="First live trade approval">
      <div className="al-gate-head">
        <span className="al-badge al-badge-live">LIVE ORDER APPROVAL</span>
        <strong>Confirm first live trade on this connection</strong>
      </div>
      <div className="al-gate-grid">
        <div>
          <span className="al-card-label">Symbol</span>
          <div className="al-card-value">{pending.symbol}</div>
        </div>
        <div>
          <span className="al-card-label">Side</span>
          <div className={`al-card-value ${pending.side === 'buy' ? 'al-up' : 'al-down'}`}>{pending.side}</div>
        </div>
        <div>
          <span className="al-card-label">Quantity</span>
          <div className="al-card-value">{pending.quantity}</div>
        </div>
        <div>
          <span className="al-card-label">Order type</span>
          <div className="al-card-value">{pending.orderType}</div>
        </div>
        <div>
          <span className="al-card-label">Estimated value</span>
          <div className="al-card-value">{pending.estimatedValue}</div>
        </div>
      </div>
      <p className="al-gate-disclaimer">
        Live order on your brokerage account. This is your trade, at your risk — see{' '}
        <button
          type="button"
          className="al-link"
          onClick={() => void bridge.openLink('https://jsprai.com/terms')}
        >
          jsprai.com/terms
        </button>{' '}
        §7.
      </p>
      <div className="al-gate-actions">
        <button
          type="button"
          className="al-btn al-btn-danger"
          disabled={submitting}
          onClick={() => decide(true)}
        >
          Approve live order
        </button>
        <button
          type="button"
          className="al-btn"
          disabled={submitting}
          onClick={() => decide(false)}
        >
          Decline
        </button>
      </div>
    </div>
  )
}