import { Fragment, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { api } from '../api/client'
import type { Event, Task } from '../api/types'
import { Chip, Empty, EndpointGap, M, Panel } from '../components/Primitives'
import './Decisions.css'

/** The payload of a HumanDecisionRecorded event. There is no decisions
 *  endpoint, so this screen reduces the log the way domain.ReduceIntent does:
 *  a decision stands until something names it. */
interface DecisionPayload {
  decision_id?: string
  kind?: string
  subject?: string
  value?: string
  supersedes?: string[]
  source?: { provider?: string; external_id?: string }
}

/** The coordinator serves these on the task; api/types.ts does not model them
 *  yet, so the shapes this screen needs are narrowed here rather than assumed. */
interface BlockedTask extends Task {
  work_phase?: string
  decision_request?: { question?: string; why?: string }
}

interface Decision {
  id: string
  taskId: string
  kind: string
  subject: string
  value: string
  supersedes: string[]
  provider: string
  externalId: string
  at: string
  eventId: string
  seq?: number
}

/** A question the operator has not answered yet. It is not a decision — it
 *  has no id and no value — but it is the same authority, pending. */
interface Waiting {
  taskId: string
  question: string
  why: string
  at: string
}

function payload(event: Event): DecisionPayload {
  return (event.payload ?? {}) as DecisionPayload
}

function stamp(at: string) {
  return at.replace('T', ' ').slice(0, 19) + ' UTC'
}

function shortId(id: string) {
  return id.length > 8 ? id.slice(-6) : id
}

interface Reduced {
  decisions: Decision[]
  /** decision id -> the decision that retired it, or '' for a standalone
   *  HumanDecisionSuperseded event with no successor. */
  retiredBy: Map<string, string>
  events: Map<string, Event[]>
}

function reduce(events: Event[]): Reduced {
  const decisions: Decision[] = []
  const retiredBy = new Map<string, string>()
  const byDecision = new Map<string, Event[]>()

  const touch = (id: string, event: Event) => {
    const list = byDecision.get(id)
    if (list) list.push(event)
    else byDecision.set(id, [event])
  }

  for (const event of events) {
    const p = payload(event)
    if (!p.decision_id) continue
    if (event.type === 'HumanDecisionRecorded') {
      const supersedes = p.supersedes ?? []
      decisions.push({
        id: p.decision_id,
        taskId: event.task_id ?? '',
        kind: p.kind ?? '',
        subject: p.subject ?? '',
        value: p.value ?? '',
        supersedes,
        provider: p.source?.provider ?? '',
        externalId: p.source?.external_id ?? '',
        at: event.at,
        eventId: event.id,
        seq: event.seq,
      })
      touch(p.decision_id, event)
      for (const target of supersedes) {
        retiredBy.set(target, p.decision_id)
        touch(target, event)
      }
    } else if (event.type === 'HumanDecisionSuperseded') {
      if (!retiredBy.has(p.decision_id)) retiredBy.set(p.decision_id, '')
      touch(p.decision_id, event)
    }
  }

  decisions.sort((a, b) => b.at.localeCompare(a.at) || b.id.localeCompare(a.id))
  return { decisions, retiredBy, events: byDecision }
}

function Select({
  label,
  value,
  options,
  onChange,
}: {
  label: string
  value: string
  options: string[]
  onChange: (next: string) => void
}) {
  return (
    <label className="dec-filter">
      <span className="label">{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        <option value="">all</option>
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </label>
  )
}

export function Decisions() {
  const events = useQuery({ queryKey: ['events'], queryFn: () => api.events(), refetchInterval: 5000 })
  const overview = useQuery({ queryKey: ['overview'], queryFn: api.overview, refetchInterval: 5000 })

  const [status, setStatus] = useState('')
  const [kind, setKind] = useState('')
  const [project, setProject] = useState('')
  const [source, setSource] = useState('')
  const [query, setQuery] = useState('')
  const [open, setOpen] = useState<string>()

  const tasks = useMemo(() => {
    const map = new Map<string, BlockedTask>()
    for (const task of (overview.data?.tasks ?? []) as BlockedTask[]) map.set(task.id, task)
    return map
  }, [overview.data])

  const { decisions, retiredBy, events: trail } = useMemo(
    () => reduce(events.data ?? []),
    [events.data],
  )

  const waiting = useMemo<Waiting[]>(
    () =>
      [...tasks.values()]
        .filter((t) => t.block_reason === 'human_decision' && t.decision_request)
        .map((t) => ({
          taskId: t.id,
          question: t.decision_request?.question ?? '',
          why: t.decision_request?.why ?? '',
          at: t.blocked_at ?? '',
        })),
    [tasks],
  )

  const kinds = useMemo(
    () => [...new Set(decisions.map((d) => d.kind).filter(Boolean))].sort(),
    [decisions],
  )
  const sources = useMemo(
    () => [...new Set(decisions.map((d) => d.provider).filter(Boolean))].sort(),
    [decisions],
  )
  const projects = useMemo(
    () => [...new Set([...tasks.values()].map((t) => t.project).filter(Boolean))].sort(),
    [tasks],
  )

  const needle = query.trim().toLowerCase()
  const matches = (d: Decision) => {
    const task = tasks.get(d.taskId)
    const retired = retiredBy.has(d.id)
    if (status === 'active' && retired) return false
    if (status === 'superseded' && !retired) return false
    if (status === 'waiting') return false
    if (kind && d.kind !== kind) return false
    if (source && d.provider !== source) return false
    if (project && task?.project !== project) return false
    if (needle) {
      const hay = [d.id, d.taskId, d.subject, d.value, task?.title ?? ''].join(' ').toLowerCase()
      if (!hay.includes(needle)) return false
    }
    return true
  }

  const visible = decisions.filter(matches)
  const visibleWaiting = waiting.filter((w) => {
    if (status && status !== 'waiting') return false
    if (kind || source) return false
    if (project && tasks.get(w.taskId)?.project !== project) return false
    if (needle) return [w.taskId, w.question, w.why].join(' ').toLowerCase().includes(needle)
    return true
  })

  const active = decisions.length - retiredBy.size
  const loading = events.isLoading || overview.isLoading

  return (
    <main className="page">
      <div className="page-head">
        <h1>Decisions</h1>
        <p>Durable human authority: what the operator decided, and what still stands.</p>
      </div>

      <div className="grid stats">
        <div className="stat">
          <span className="label">Recorded</span>
          <span className="stat-value">{decisions.length}</span>
        </div>
        <div className="stat">
          <span className="label">Standing</span>
          <span className="stat-value" data-accent="true">
            {active}
          </span>
        </div>
        <div className="stat">
          <span className="label">Superseded</span>
          <span className="stat-value">{retiredBy.size}</span>
        </div>
        <div className="stat">
          <span className="label">Waiting on you</span>
          <span className="stat-value">{waiting.length}</span>
        </div>
      </div>

      <Panel
        title="Decision log"
        count={visible.length + visibleWaiting.length}
        trailing={
          events.isError || overview.isError ? 'read failed' : `reduced from ${(events.data ?? []).length} events`
        }
      >
        <div className="dec-filters">
          <input
            className="dec-search"
            placeholder="Search decisions…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <Select
            label="Status"
            value={status}
            options={['active', 'superseded', 'waiting']}
            onChange={setStatus}
          />
          <Select label="Kind" value={kind} options={kinds} onChange={setKind} />
          <Select label="Project" value={project} options={projects} onChange={setProject} />
          <Select label="Source" value={source} options={sources} onChange={setSource} />
        </div>

        {loading ? (
          <div className="panel-body">
            <p className="gap-note">reading /v1/events…</p>
          </div>
        ) : visible.length + visibleWaiting.length === 0 ? (
          <Empty title="No decisions match">
            <p>
              The log holds <M>{decisions.length}</M> recorded decisions. Clear the filters to see
              them.
            </p>
          </Empty>
        ) : (
          <div className="table-scroll">
            <table className="table dec-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Decision</th>
                  <th>Task</th>
                  <th>Phase</th>
                  <th>Provenance</th>
                  <th>Recorded</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {visibleWaiting.map((w) => (
                  <tr key={`w-${w.taskId}`} data-status="waiting">
                    <td className="mono">—</td>
                    <td>
                      <div className="row-title">{w.question}</div>
                      <div className="row-sub">{w.why}</div>
                    </td>
                    <td>
                      <Link className="dec-task" to={`/tasks/${w.taskId}`}>
                        <M>{shortId(w.taskId)}</M>
                        <span className="row-sub">{tasks.get(w.taskId)?.title ?? ''}</span>
                      </Link>
                    </td>
                    <td className="mono">{tasks.get(w.taskId)?.work_phase ?? '—'}</td>
                    <td className="mono">—</td>
                    <td className="mono">{w.at ? stamp(w.at) : '—'}</td>
                    <td>
                      <Chip tone="warn">waiting</Chip>
                    </td>
                  </tr>
                ))}
                {visible.map((d) => {
                  const retired = retiredBy.has(d.id)
                  const successor = retiredBy.get(d.id)
                  const task = tasks.get(d.taskId)
                  const isOpen = open === d.id
                  return (
                    <Fragment key={d.id}>
                      <tr
                        data-status={retired ? 'superseded' : 'active'}
                        data-open={isOpen ? 'true' : undefined}
                        onClick={() => setOpen(isOpen ? undefined : d.id)}
                      >
                        <td className="mono" title={d.id}>
                          {shortId(d.id)}
                        </td>
                        <td>
                          <div className="row-title">{d.value}</div>
                          <div className="row-sub">{d.subject}</div>
                        </td>
                        <td>
                          <Link
                            className="dec-task"
                            to={`/tasks/${d.taskId}`}
                            onClick={(e) => e.stopPropagation()}
                          >
                            <M>{shortId(d.taskId)}</M>
                            <span className="row-sub">{task?.title ?? ''}</span>
                          </Link>
                        </td>
                        <td className="mono">{task?.work_phase ?? '—'}</td>
                        <td className="mono" title={d.externalId}>
                          {d.provider || '—'}
                        </td>
                        <td className="mono">{stamp(d.at)}</td>
                        <td>
                          {retired ? (
                            <Chip>superseded</Chip>
                          ) : (
                            <Chip tone="accent">{d.kind || 'active'}</Chip>
                          )}
                        </td>
                      </tr>
                      {isOpen && (
                        <tr className="dec-detail-row">
                          <td colSpan={7}>
                            <div className="dec-detail">
                              <div>
                                <span className="label">Value</span>
                                <p className="dec-value">{d.value}</p>
                                <span className="label">Subject</span>
                                <p className="dec-subject">{d.subject || '—'}</p>
                                <span className="label">Effective authority</span>
                                <p className="dec-impact" data-retired={retired ? 'true' : undefined}>
                                  {retired
                                    ? successor
                                      ? 'Retired. It is out of the effective intent for this task.'
                                      : 'Retired by an explicit supersede. It no longer binds the agent.'
                                    : 'Standing. It is in the effective intent handed to every session of this task.'}
                                </p>
                              </div>
                              <div className="dec-facts">
                                <span className="label">Decision id</span>
                                <div>
                                  <M>{d.id}</M>
                                </div>
                                <span className="label">Kind</span>
                                <div>
                                  <M>{d.kind}</M>
                                </div>
                                <span className="label">Task</span>
                                <div>
                                  <Link to={`/tasks/${d.taskId}`}>
                                    <M>{d.taskId}</M>
                                  </Link>
                                </div>
                                <span className="label">Provenance</span>
                                <div>
                                  <M>{d.provider || 'unknown'}</M>{' '}
                                  {d.externalId && <M>· {d.externalId}</M>}
                                </div>
                                <span className="label">Supersedes</span>
                                <div>
                                  {d.supersedes.length === 0 ? (
                                    <M>none</M>
                                  ) : (
                                    d.supersedes.map((s) => (
                                      <button
                                        key={s}
                                        className="dec-link mono"
                                        onClick={() => setOpen(s)}
                                      >
                                        {s}
                                      </button>
                                    ))
                                  )}
                                </div>
                                <span className="label">Superseded by</span>
                                <div>
                                  {!retired ? (
                                    <M>none</M>
                                  ) : successor ? (
                                    <button className="dec-link mono" onClick={() => setOpen(successor)}>
                                      {successor}
                                    </button>
                                  ) : (
                                    <M>explicit supersede event</M>
                                  )}
                                </div>
                              </div>
                              <div className="dec-trail">
                                <span className="label">Event sequence</span>
                                {(trail.get(d.id) ?? []).map((e) => (
                                  <div key={e.id} className="dec-event">
                                    <M>{e.seq !== undefined ? `#${e.seq}` : '—'}</M>
                                    <span className="dec-event-type">{e.type}</span>
                                    <M>{stamp(e.at)}</M>
                                    <M>{e.id}</M>
                                  </div>
                                ))}
                              </div>
                            </div>
                          </td>
                        </tr>
                      )}
                    </Fragment>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Law 5: the mockup's approval columns have no source in the log. */}
        <EndpointGap
          path="/v1/ui/decisions"
          what="Recorded, superseded and waiting are reduced from the event log. Approved, rejected and auto are not: the domain has no approval state on a decision, so those statuses are omitted rather than guessed. The acting human is not recorded either — source.provider is the channel the decision arrived on, not the person. Phase is the task's current work phase, not the phase the decision was made in."
        />
      </Panel>
    </main>
  )
}