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

interface Bar {
  time: string
  open: number
  high: number
  low: number
  close: number
  volume: number | null
  [field: string]: unknown
}

interface State {
  ticker?: string
  multiplier?: number
  timespan?: string
  from?: string
  to?: string
  style?: 'candles' | 'line'
}

const W = 800
const PRICE_H = 250
const VOL_TOP = 262
const VOL_H = 60
const H = VOL_TOP + VOL_H + 18
const RIGHT = 56

const day = (n: number) => new Date(Date.now() - n * 86_400_000).toISOString().slice(0, 10)

export function PriceView({ panel }: { panel: PanelRef }) {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as State | undefined
  if (state === undefined) return <p className="mv-note">Loading…</p>
  const args = {
    ticker: (state.ticker ?? 'AAPL').trim().toUpperCase(),
    multiplier: state.multiplier ?? 1,
    timespan: state.timespan ?? 'day',
    from: state.from || day(182),
    to: state.to || day(0),
    sort: 'asc',
    limit: 5000,
  }
  return <Chart panel={panel} args={args} style={state.style ?? 'candles'} />
}

function Chart({ panel, args, style }: { panel: PanelRef; args: Record<string, string | number>; style: string }) {
  const { data, error, loading, refetch } = useData('massive/aggregates', args)
  const bars = ((data ?? []) as Bar[]).filter((b) => typeof b.close === 'number')
  const lastBar = bars[bars.length - 1]
  usePublish(panel, {
    ticker: String(args.ticker),
    bars: bars.length,
    first: bars[0]?.time ?? null,
    last: lastBar?.time ?? null,
    close: lastBar?.close ?? null,
    error: error ?? null,
  })

  const first = bars[0]
  const change = first && lastBar ? lastBar.close - first.close : null
  return (
    <div className="mv-wrap">
      <div className="mv-bar">
        <span className="mv-title">
          {args.ticker} · {args.multiplier} {args.timespan}{' '}
          {lastBar ? (
            <span className={change !== null && change < 0 ? 'mv-down' : 'mv-up'}>
              {lastBar.close.toFixed(2)} ({change !== null && first ? ((change / first.close) * 100).toFixed(2) : '–'}%)
            </span>
          ) : null}
        </span>
        <button className="mv-button" onClick={() => refetch()} disabled={loading}>
          {loading ? 'Loading…' : 'Refresh'}
        </button>
      </div>
      {error ? <p className="mv-note mv-error">{error}</p> : null}
      {!data && !error ? <p className="mv-note">Loading…</p> : null}
      {data && !bars.length ? <p className="mv-note">No bars in that range.</p> : null}
      {bars.length ? <Svg bars={bars} style={style} /> : null}
    </div>
  )
}

function Svg({ bars, style }: { bars: Bar[]; style: string }) {
  const hi = Math.max(...bars.map((b) => b.high ?? b.close))
  const lo = Math.min(...bars.map((b) => b.low ?? b.close))
  const span = hi - lo || 1
  const maxVol = Math.max(1, ...bars.map((b) => b.volume ?? 0))
  const plotW = W - RIGHT
  const step = plotW / bars.length
  const x = (i: number) => i * step + step / 2
  const y = (p: number) => 6 + ((hi - p) / span) * (PRICE_H - 12)
  const bodyW = Math.max(1, step * 0.7)
  const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => lo + f * span)
  const labels = [0, Math.floor(bars.length / 2), bars.length - 1]
  const line = bars.map((b, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(b.close).toFixed(1)}`).join(' ')

  return (
    <svg className="mv-chart" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      {ticks.map((t) => (
        <g key={t}>
          <line x1={0} x2={plotW} y1={y(t)} y2={y(t)} stroke="var(--jaspers-border, #e5e5e5)" strokeWidth={0.5} />
          <text x={plotW + 4} y={y(t) + 3} fontSize={10} fill="var(--jaspers-muted-foreground, #737373)">
            {t.toFixed(2)}
          </text>
        </g>
      ))}
      {style === 'line' ? (
        <path d={line} fill="none" stroke="var(--jaspers-primary, #2563eb)" strokeWidth={1.5} />
      ) : (
        bars.map((b, i) => {
          const up = b.close >= b.open
          const color = up ? 'var(--jaspers-positive, #15803d)' : 'var(--jaspers-negative, #b91c1c)'
          const top = y(Math.max(b.open, b.close))
          const height = Math.max(1, Math.abs(y(b.open) - y(b.close)))
          return (
            <g key={b.time}>
              <line x1={x(i)} x2={x(i)} y1={y(b.high)} y2={y(b.low)} stroke={color} strokeWidth={1} />
              <rect x={x(i) - bodyW / 2} y={top} width={bodyW} height={height} fill={color} />
            </g>
          )
        })
      )}
      {bars.map((b, i) => {
        const h = ((b.volume ?? 0) / maxVol) * VOL_H
        const up = b.close >= b.open
        return (
          <rect
            key={`v${b.time}`}
            x={x(i) - bodyW / 2}
            y={VOL_TOP + VOL_H - h}
            width={bodyW}
            height={h}
            fill={up ? 'var(--jaspers-positive, #15803d)' : 'var(--jaspers-negative, #b91c1c)'}
            opacity={0.35}
          />
        )
      })}
      {labels.map((i) => (
        <text
          key={`t${i}`}
          x={Math.min(Math.max(x(i), 30), plotW - 30)}
          y={H - 4}
          fontSize={10}
          textAnchor="middle"
          fill="var(--jaspers-muted-foreground, #737373)"
        >
          {bars[i]?.time.slice(0, bars[i]!.time.endsWith('T00:00:00.000Z') ? 10 : 16).replace('T', ' ')}
        </text>
      ))}
    </svg>
  )
}