import { Fragment, useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactElement } from 'react'
import { useData, type PanelRef } from '@jaspers-ai/sdk'
import {
  answers,
  callOutput,
  chosenQuarter,
  findMatches,
  readCalls,
  readParagraphs,
  segments,
  transcriptText,
  type Call,
  type CallsState,
} from './calls'
import { cleanError, longDate, Publish, TickerField } from './shared'

// One company's call: its calls to pick from, then the transcript in paragraphs with the questions
// marked, and find. The transcript waits for the list of calls, which names the exchange and, when
// no quarter is asked for, the latest call; that keeps the transcript's arguments the same however
// the call was opened, so the run is shared and cached.

type Write = (next: CallsState) => void

export function CallPage({ panel, state, write }: { panel: PanelRef; state: CallsState; write: Write }): ReactElement {
  const ask = state.exchange ? { symbol: state.symbol, exchange: state.exchange } : { symbol: state.symbol }
  const run = useData('earningscall/calls', ask)
  // Until the new company's calls are in, the run still holds the last company's.
  const fresh = run.data !== undefined && answers(run.meta, ask)
  const calls = fresh ? readCalls(run.data) : []
  const exchange = fresh ? text(run.meta['exchange']) : null
  const company = fresh ? text(run.meta['company']) : null
  const chosen = fresh ? chosenQuarter(calls, state.year, state.quarter) : null
  const error = run.error ? cleanError(run.error) : null
  const empty = { state, exchange, company, calls, chosen: null, date: null, paragraphs: [], qaStart: null, matches: [] }
  return (
    <div className="ec-root">
      <div className="ec-bar">
        <button type="button" className="ec-button" title="Earnings calendar" onClick={() => write({ ...state, symbol: '', exchange: null, year: null, quarter: null })}>
          ‹ Calendar
        </button>
        <TickerField symbol={state.symbol} onSymbol={(symbol) => write({ ...state, symbol, exchange: null, year: null, quarter: null })} />
        {chosen && calls.length > 0 && <QuarterPicker calls={calls} chosen={chosen} onPick={(call) => write({ ...state, year: call.year, quarter: call.quarter })} />}
        <span className="ec-muted ec-grow ec-ellipsis">{company ?? ''}</span>
        {run.loading && <span className="ec-muted">loading…</span>}
      </div>
      {error ? (
        <div className="ec-body">
          <Publish panel={panel} output={{ ...callOutput({ ...empty, error }) }} text={null} />
          <p className="ec-error">{error}</p>
        </div>
      ) : !fresh ? (
        <div className="ec-body">
          <p className="ec-note">Loading calls…</p>
        </div>
      ) : !chosen || !exchange ? (
        <div className="ec-body">
          <Publish panel={panel} output={{ ...callOutput({ ...empty, error: `EarningsCall has no published calls for ${state.symbol}.` }) }} text={null} />
          <p className="ec-note">No published calls for {state.symbol}.</p>
        </div>
      ) : (
        <Transcript
          key={`${exchange}:${state.symbol}:${chosen.year}:${chosen.quarter}`}
          panel={panel}
          state={state}
          write={write}
          exchange={exchange}
          company={company}
          calls={calls}
          chosen={chosen}
        />
      )}
    </div>
  )
}

function QuarterPicker({ calls, chosen, onPick }: { calls: Call[]; chosen: { year: number; quarter: number }; onPick: (call: Call) => void }): ReactElement {
  const value = `${chosen.year}-${chosen.quarter}`
  const listed = calls.some((call) => `${call.year}-${call.quarter}` === value)
  // A quarter asked for by state but missing from the list still shows as picked.
  const options = listed ? calls : [{ ...chosen, date: null, published: true }, ...calls]
  return (
    <select
      className="ec-select"
      value={value}
      title="Call"
      onChange={(event) => {
        const call = options.find((c) => `${c.year}-${c.quarter}` === event.target.value)
        if (call) onPick(call)
      }}
    >
      {options.map((call) => (
        <option key={`${call.year}-${call.quarter}`} value={`${call.year}-${call.quarter}`} disabled={!call.published}>
          Q{call.quarter} {call.year}
          {call.date ? ` · ${longDate(call.date)}` : ''}
          {call.published ? '' : ' (upcoming)'}
        </option>
      ))}
    </select>
  )
}

function Transcript(props: {
  panel: PanelRef
  state: CallsState
  write: Write
  exchange: string
  company: string | null
  calls: Call[]
  chosen: { year: number; quarter: number }
}): ReactElement {
  const { panel, state, write, exchange, company, calls, chosen } = props
  const run = useData('earningscall/transcript', { symbol: state.symbol, exchange, year: chosen.year, quarter: chosen.quarter })
  const paragraphs = useMemo(() => readParagraphs(run.data), [run.data])
  const qaStart = typeof run.meta['qaStart'] === 'number' ? run.meta['qaStart'] : null
  const listed = calls.find((call) => call.year === chosen.year && call.quarter === chosen.quarter)
  const date = text(run.meta['date']) ?? listed?.date ?? null
  const error = run.error ? cleanError(run.error) : null
  const matches = useMemo(() => findMatches(paragraphs, state.find), [paragraphs, state.find])
  // The whole transcript for a model to read; find and the match stepped to leave it as it is.
  const transcript = useMemo(
    () => transcriptText({ symbol: state.symbol, company, year: chosen.year, quarter: chosen.quarter, date, paragraphs, qaStart }),
    [state.symbol, company, chosen.year, chosen.quarter, date, paragraphs, qaStart],
  )
  const [current, setCurrent] = useState(0)
  const body = useRef<HTMLDivElement>(null)

  // A transcript still out would publish as one with no paragraphs; the last output stands until it is in.
  const settled = run.data !== undefined || error !== null

  // A new query, or a transcript that just arrived, starts again at its first match.
  useEffect(() => setCurrent(0), [matches])
  useEffect(() => {
    if (matches.length === 0) return
    body.current?.querySelector(`[data-match="${current}"]`)?.scrollIntoView({ block: 'center' })
  }, [current, matches])

  const byParagraph = useMemo(() => {
    const map = new Map<number, { start: number; end: number; index: number }[]>()
    matches.forEach((m, index) => {
      const list = map.get(m.paragraph) ?? []
      list.push({ start: m.start, end: m.end, index })
      map.set(m.paragraph, list)
    })
    return map
  }, [matches])

  const step = (by: number): void => {
    if (matches.length > 0) setCurrent((c) => (c + by + matches.length) % matches.length)
  }

  return (
    <>
      {settled && <Publish panel={panel} output={{ ...callOutput({ state, exchange, company, calls, chosen, date, paragraphs, qaStart, matches, error }) }} text={error ? null : transcript} />}
      <div className="ec-subbar">
        <span className="ec-title">
          Q{chosen.quarter} {chosen.year}
        </span>
        {date && <span className="ec-muted">{longDate(date)}</span>}
        {qaStart !== null && paragraphs.length > 0 && (
          <button type="button" className="ec-button" onClick={() => body.current?.querySelector('#ec-qa')?.scrollIntoView({ block: 'start' })}>
            Q&amp;A
          </button>
        )}
        <span className="ec-grow" />
        <FindField find={state.find} count={matches.length} current={current} onFind={(find) => write({ ...state, find })} onStep={step} />
      </div>
      <div className="ec-body" ref={body}>
        {error ? (
          <p className="ec-error">{error}</p>
        ) : run.data === undefined ? (
          <p className="ec-note">Loading transcript…</p>
        ) : (
          <article className="ec-transcript">
            <p className="ec-note">Machine-transcribed plain transcript: no speaker names, and the paragraph breaks are inferred.</p>
            {paragraphs.map((paragraph, i) => (
              <Fragment key={i}>
                {i === qaStart && (
                  <h3 id="ec-qa" className="ec-divider">
                    Questions and answers
                  </h3>
                )}
                <p className="ec-p">
                  <span className="ec-n">{i + 1}</span>
                  {segments(paragraph, byParagraph.get(i) ?? []).map((segment, k) =>
                    segment.match === null ? (
                      <Fragment key={k}>{segment.text}</Fragment>
                    ) : (
                      <mark key={k} data-match={segment.match} className={segment.match === current ? 'ec-current' : undefined}>
                        {segment.text}
                      </mark>
                    ),
                  )}
                </p>
              </Fragment>
            ))}
          </article>
        )}
      </div>
    </>
  )
}

/** Enter finds what was typed, or steps to the next match when it is already found; Shift+Enter steps back; Escape clears. */
function FindField(props: { find: string; count: number; current: number; onFind: (find: string) => void; onStep: (by: number) => void }): ReactElement {
  const { find, count, current, onFind, onStep } = props
  const [draft, setDraft] = useState(find)
  useEffect(() => setDraft(find), [find])
  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
    if (event.key === 'Escape') {
      event.preventDefault()
      setDraft('')
      if (find) onFind('')
      return
    }
    if (event.key !== 'Enter' || event.nativeEvent.isComposing) return
    event.preventDefault()
    const query = draft.trim()
    if (query !== find) onFind(query)
    else onStep(event.shiftKey ? -1 : 1)
  }
  return (
    <span className="ec-find">
      <input className="ec-input ec-input-find" value={draft} placeholder="Find" spellCheck={false} onChange={(event) => setDraft(event.target.value)} onKeyDown={onKeyDown} />
      {find && <span className="ec-muted ec-count">{count === 0 ? 'none' : `${current + 1} of ${count}`}</span>}
      {count > 1 && (
        <>
          <button type="button" className="ec-button" title="Previous match" onClick={() => onStep(-1)}>
            ‹
          </button>
          <button type="button" className="ec-button" title="Next match" onClick={() => onStep(1)}>
            ›
          </button>
        </>
      )}
    </span>
  )
}

function text(value: unknown): string | null {
  return typeof value === 'string' && value !== '' ? value : null
}