import { useCallback, useRef, useState, type ReactElement } from 'react'
import { RefreshButton } from './buttons'
import { Meter } from './Meter'
import { readsText, type CompanyStatus } from './sec'

// One company the store holds, as a chip with its ticker, a line along its foot while it is read or
// embedded, and a mark when something failed. Hovered or focused, it opens a card: its name, how far
// its reading and embedding are, in words and as a bar, what failed, and its refresh. Companies are
// everyone's, so there is no stop and no delete. The card is placed against the window, so the
// scrolling list does not clip it. One card is open at a time: hovering another chip swaps it at once.

/** How long the card waits after the pointer leaves, so it can cross the gap from the chip to the card. */
const CLOSE_MS = 150
const CARD_WIDTH = 300

/** Which company's card is open, for the whole list: showing one closes any other at once. */
export function useCompanyCard(): {
  open: string | null
  show: (ticker: string) => void
  hide: (ticker: string) => void
} {
  const [open, setOpen] = useState<string | null>(null)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const show = useCallback((ticker: string) => {
    if (timer.current) clearTimeout(timer.current)
    setOpen(ticker)
  }, [])
  const hide = useCallback((ticker: string) => {
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => setOpen((now) => (now === ticker ? null : now)), CLOSE_MS)
  }, [])
  return { open, show, hide }
}

export function CompanyChip({
  c,
  run,
  open,
  onShow,
  onHide,
}: {
  c: CompanyStatus
  run: (source: string, args: unknown) => Promise<void>
  open: boolean
  onShow: () => void
  onHide: () => void
}): ReactElement {
  const chip = useRef<HTMLButtonElement>(null)
  const [place, setPlace] = useState<{ left: number; width: number; top?: number; bottom?: number } | null>(null)
  const show = (): void => {
    onShow()
    const r = chip.current?.getBoundingClientRect()
    if (!r) return
    const width = Math.min(CARD_WIDTH, window.innerWidth - 16)
    const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8))
    // Low in the window, the card opens upward.
    setPlace(
      r.bottom > window.innerHeight * 0.6
        ? { left, width, bottom: window.innerHeight - r.top + 4 }
        : { left, width, top: r.bottom + 4 },
    )
  }
  const reading = c.progress?.running ? c.progress : null
  const share = reading
    ? reading.done / Math.max(reading.total, 1)
    : c.unembedded > 0
      ? (c.chunks - c.unembedded) / Math.max(c.chunks, 1)
      : null
  const trouble = Boolean(c.progress?.failed || c.progress?.error)
  return (
    <span className="ag-chip-wrap" onMouseEnter={show} onMouseLeave={onHide}>
      <button
        ref={chip}
        type="button"
        className={open ? 'ag-chip ag-chip-open' : 'ag-chip'}
        aria-expanded={open}
        aria-label={`${c.ticker}, ${c.name}: ${line(c)}`}
        onFocus={show}
        onBlur={onHide}
      >
        {c.ticker}
        {trouble && <span className="ag-chip-mark" />}
        {share !== null && (
          <span className="ag-chip-bar">
            <span style={{ width: `${Math.round(Math.min(1, share) * 100)}%` }} />
          </span>
        )}
      </button>
      {open && place && (
        <div
          className="ag-agent ag-company ag-chip-card"
          style={place}
          onMouseEnter={onShow}
          onMouseLeave={onHide}
          onFocus={onShow}
          onBlur={onHide}
        >
          <CompanyDetails c={c} run={run} />
        </div>
      )}
    </span>
  )
}

export function CompanyDetails({
  c,
  run,
}: {
  c: CompanyStatus
  run: (source: string, args: unknown) => Promise<void>
}): ReactElement {
  return (
    <>
      <span className="ag-doc ag-line" title={`${c.chunks.toLocaleString()} chunks`}>
        <span className="ag-name">{c.ticker}</span> <span className="ag-muted">{c.name}</span>
      </span>
      {!c.progress?.running && (
        <RefreshButton
          label={`Update ${c.ticker}: read what it has filed since, retry what failed`}
          onClick={() => void run('refresh', { ticker: c.ticker }).catch(() => {})}
        />
      )}
      <span className="ag-muted ag-line ag-whole">{line(c)}</span>
      {c.progress?.running ? (
        <Meter part={c.progress.done} whole={c.progress.total} />
      ) : c.unembedded > 0 ? (
        <Meter part={c.chunks - c.unembedded} whole={c.chunks} />
      ) : null}
      {c.progress?.failed ? (
        <span className="ag-error ag-line ag-whole">{c.progress.failed} failed: refresh retries them</span>
      ) : null}
      {c.progress?.error && <span className="ag-error ag-line ag-whole">{c.progress.error}</span>}
    </>
  )
}

/** How far a company is: reading its filings, then embedding them, then done; after what it reads. */
function line(c: CompanyStatus): string {
  const reads = readsText(c.reads)
  const years = reads ? `${reads} · ` : ''
  const p = c.progress
  if (p?.running)
    return `${years}${p.total ? `reading ${p.done.toLocaleString()} of ${p.total.toLocaleString()} filings…` : 'listing filings…'}`
  const filings = `${years}${c.filings.toLocaleString()} filings`
  return c.unembedded > 0 ? `${filings} · embedding, ${c.unembedded.toLocaleString()} chunks to go` : filings
}