import type { ReactElement } from 'react'
import { useData, type PanelRef } from '@jaspers-ai/sdk'
import { answers, calendarOutput, readCalendarRows, shiftDay, today, type CallsState } from './calls'
import { cleanError, localTime, longDate, Publish, TickerField } from './shared'

// The calls held on one day. A row opens its call in this panel and keeps the day, so the way back
// lands on the same calendar.

export function Calendar({ panel, state, write }: { panel: PanelRef; state: CallsState; write: (next: CallsState) => void }): ReactElement {
  const now = today(new Date())
  const day = state.date ?? now
  const run = useData('earningscall/calendar', { date: day })
  // Until the new day is in, the run still holds the last day's calls.
  const fresh = run.data !== undefined && answers(run.meta, { date: day })
  const rows = fresh ? readCalendarRows(run.data) : []
  const error = run.error ? cleanError(run.error) : null
  const go = (date: string | null): void => write({ ...state, date })
  return (
    <div className="ec-root">
      {(fresh || error) && <Publish panel={panel} output={{ ...calendarOutput(day, rows, error) }} text={null} />}
      <div className="ec-bar">
        <button type="button" className="ec-button" title="Day before" onClick={() => go(shiftDay(day, -1))}>
          ‹
        </button>
        <span className="ec-title">{longDate(day)}</span>
        <button type="button" className="ec-button" title="Day after" onClick={() => go(shiftDay(day, 1))}>
          ›
        </button>
        {day !== now && (
          <button type="button" className="ec-button" onClick={() => go(null)}>
            Today
          </button>
        )}
        {run.loading && <span className="ec-muted">loading…</span>}
        <span className="ec-grow" />
        <TickerField symbol="" onSymbol={(symbol) => write({ ...state, symbol, exchange: null, year: null, quarter: null })} />
      </div>
      <div className="ec-body">
        {error ? (
          <p className="ec-error">{error}</p>
        ) : !fresh ? (
          <p className="ec-note">Loading…</p>
        ) : rows.length === 0 ? (
          <p className="ec-note">No earnings calls on this day.</p>
        ) : (
          <table className="ec-table">
            <thead>
              <tr>
                <th>Time</th>
                <th>Ticker</th>
                <th>Company</th>
                <th>Call</th>
                <th>Transcript</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr
                  key={`${row.exchange}:${row.symbol}:${row.year}:${row.quarter}`}
                  className="ec-row"
                  title={`Open the Q${row.quarter} ${row.year} call`}
                  onClick={() => write({ ...state, symbol: row.symbol, exchange: row.exchange, year: row.year, quarter: row.quarter, date: day })}
                >
                  <td className="ec-num">{localTime(row.date)}</td>
                  <td>{row.symbol}</td>
                  <td className="ec-company">{row.company}</td>
                  <td>
                    Q{row.quarter} {row.year}
                  </td>
                  <td className={row.ready ? undefined : 'ec-muted'}>{row.ready ? 'Ready' : 'Not yet'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  )
}