import { useState } from 'react'
import type { FeedResult } from './Feeds'
import { INTERVALS, type Interval } from './plan'
import { DATABENTO_INTRADAY_TIP, SOURCES, SOURCE_INTERVALS, SOURCE_NAMES, type Source } from './sources'

export const COLORS = ['#3b82f6', '#f59e0b', '#10b981', '#ef4444', '#a855f7', '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#94a3b8']

export interface ToolbarProps {
  symbols: string[]
  active: string | null
  source: Source
  onSource: (s: Source) => void
  interval: Interval
  mode: 'lines' | 'candles'
  volume: boolean
  feeds: Record<string, FeedResult | undefined>
  onInterval: (i: Interval) => void
  onMode: (m: 'lines' | 'candles') => void
  onVolume: (v: boolean) => void
  onAdd: (symbol: string) => void
  onRemove: (symbol: string) => void
  onActive: (symbol: string) => void
}

/** The controls row and the symbol chips. */
export function Toolbar(p: ToolbarProps) {
  const [draft, setDraft] = useState('')
  const add = () => {
    const symbol = draft.trim().toUpperCase()
    if (/^[A-Z0-9.^=-]{1,20}$/.test(symbol)) p.onAdd(symbol)
    setDraft('')
  }
  return (
    <div className="yc-top">
      <div className="yc-controls">
        <select className="yc-select" value={p.source} onChange={(e) => p.onSource(e.target.value as Source)} title="Data source">
          {SOURCES.map((s) => (
            <option key={s} value={s}>
              {SOURCE_NAMES[s]}
            </option>
          ))}
        </select>
        <select
          className="yc-select"
          value={p.interval}
          onChange={(e) => p.onInterval(e.target.value as Interval)}
          title={p.source === 'databento' ? DATABENTO_INTRADAY_TIP : 'Interval'}
        >
          {INTERVALS.map((i) => {
            const off = !SOURCE_INTERVALS[p.source].includes(i)
            return (
              <option key={i} value={i} disabled={off} title={off ? DATABENTO_INTRADAY_TIP : undefined}>
                {i}
              </option>
            )
          })}
        </select>
        <span className="yc-source">{SOURCE_NAMES[p.source]}</span>
        <div className="yc-seg">
          {(['lines', 'candles'] as const).map((m) => (
            <button key={m} className={p.mode === m ? 'on' : ''} onClick={() => p.onMode(m)}>
              {m === 'lines' ? 'Lines' : 'Candles'}
            </button>
          ))}
        </div>
        <button className={`yc-btn ${p.volume ? 'on' : ''}`} onClick={() => p.onVolume(!p.volume)} title="Volume pane">
          Vol
        </button>
        <input
          className="yc-input"
          value={draft}
          placeholder="Add symbol"
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') add()
          }}
        />
        <button className="yc-btn" onClick={add} title="Add symbol">
          +
        </button>
      </div>
      <div className="yc-chips">
        {p.symbols.map((s, i) => {
          const feed = p.feeds[s]
          const color = COLORS[i % COLORS.length]
          return (
            <span
              key={s}
              className={`yc-chip ${s === p.active ? 'active' : ''} ${feed?.loading ? 'loading' : ''}`}
              style={{ borderColor: s === p.active ? color : undefined }}
              onClick={() => p.onActive(s)}
              title={[s, feed?.note, feed?.error ?? feed?.detail].filter(Boolean).join(': ')}
            >
              <i style={{ background: color }} />
              {s}
              {feed?.error ? <b className="yc-err">!</b> : null}
              {feed?.note ? (
                <small className={`yc-note-chip ${feed.error || /fail/.test(feed.note) ? 'bad' : /rate/.test(feed.note) ? 'warn' : ''}`}>
                  {feed.note}
                </small>
              ) : null}
              <button
                className="yc-x"
                onClick={(e) => {
                  e.stopPropagation()
                  p.onRemove(s)
                }}
                title={`Remove ${s}`}
              >
                ×
              </button>
            </span>
          )
        })}
      </div>
    </div>
  )
}