/* ============================================================
   Reports — live on /analytics/* plus the hiring-cost ledger (/job/costs/fetch).

   THE FUNNEL IS AN APPROXIMATION AND THE CARD SAYS SO. /analytics/funnel/fetch
   returns a POINT-IN-TIME count per stage — where everyone stands right now —
   not how many ever passed through a stage. "Reached this stage" is therefore
   derived as the sum of every stage at or beyond it. Rejected applications are
   excluded because a point-in-time count does not record how far they got; the
   true history lives in application_stage_transitions, which has no global read
   (/pipeline/transitions/fetch needs one application id).

   DEPARTMENT PERFORMANCE is one /analytics/kpis read per department, in
   parallel. There is no group-by endpoint, but `department` is a filter on
   every analytics route, and one KPI payload carries all four columns at once.

   THE REPORT LIBRARY IS REAL NOW (/reports/*). A saved report is a stored
   parameterisation of a governed analytics query — a report type plus a
   rolling window — run and exported (CSV) server-side, with every run
   recorded. An earlier grid of six cards fired a toast and generated nothing;
   the library only returned once the endpoints existed.

   SPEND ATTRIBUTION: a hiring cost can be tagged with a source channel, which
   feeds the cost-per-application column of Source Performance. Untagged spend
   deliberately counts toward cost-per-hire only — folding it into a source
   would fabricate a ROI figure.

   TTH BASELINE (REQ-ANL-08): the KPI payload carries tth_baseline_days only
   when the org setting `analytics.tth_baseline` is set, with provenance. No
   setting → no baseline shown; the 27-day BRD figure is not hardcoded here.
   ============================================================ */

import { useMemo, useState } from 'react'
import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'

import Chart, { ChartLegend } from '../ui/Chart'
import Charts from '../lib/charts'
import DataTable from '../ui/DataTable'
import Modal from '../ui/Modal'
import PageHeader from '../ui/PageHeader'
import { EmptyState, Icon, KpiCard, ProgressBar } from '../ui/primitives'
import { useToast } from '../ui/Toast'
import { qk } from '../lib/queryKeys'
import { friendlyAuthError } from '../lib/errors'
import { useAuth } from '../auth/AuthContext'
import * as analyticsApi from '../api/analytics'
import * as costsApi from '../api/costs'
import * as jobsApi from '../api/jobs'
import * as reportsApi from '../api/reports'
import { fmtDate, fmtDateTime, toDate } from '../lib/format'
import { money } from '../data/seed'

const DEPT_CAP = 12
const TREND_MONTHS = 7

const RANGES = [
  { key: 'quarter', label: 'This quarter', days: 90 },
  { key: 'half', label: 'Last 6 months', days: 182 },
  { key: 'year', label: 'This year', days: 365 },
]

/* Order matters: "reached" is a running sum from the end of this list back to
   the start. REJECTED, CLOSED (shown as CLOSED) and ONHOLD are
   absent — parking and outcomes are not a step in the happy-path suffix sum. */
const FUNNEL_ORDER = [
  { key: 'PENDING', label: 'Shortlist' },
  { key: 'SCREENING', label: 'Screened' },
  { key: 'PROCESS', label: 'Screened' },
  { key: 'ASSESSMENT', label: 'Assessed' },
  { key: 'INTERVIEW', label: 'Interviewed' },
  { key: 'OFFER', label: 'Offered' },
  { key: 'APPROVED', label: 'Approved' },
  { key: 'HIRED', label: 'Hired' },
]

function rangeWindow(key) {
  const range = RANGES.find((r) => r.key === key) ?? RANGES[0]
  const to = new Date()
  const from = new Date(to.getTime() - range.days * 86400000)
  return { fromDate: from.toISOString(), toDate: to.toISOString() }
}

const COST_TYPES = [
  { value: 'job_board', label: 'Job board' },
  { value: 'agency_fee', label: 'Agency fee' },
  { value: 'referral_bonus', label: 'Referral bonus' },
  { value: 'tooling', label: 'Recruiting tools' },
  { value: 'travel', label: 'Travel' },
  { value: 'other', label: 'Other' },
]

/* Saved reports store a ROLLING window (window_days): "last 90 days" means the
   last 90 days on every run, not the quarter current at save time. */
const REPORT_WINDOWS = [
  { days: 30, label: 'Last 30 days' },
  { days: 90, label: 'Last 90 days' },
  { days: 182, label: 'Last 6 months' },
  { days: 365, label: 'Last 12 months' },
  { days: null, label: 'All time' },
]

function reportWindowLabel(filters) {
  if (filters?.window_days) {
    const match = REPORT_WINDOWS.find((w) => w.days === Number(filters.window_days))
    return match ? match.label : `Last ${filters.window_days} days`
  }
  if (filters?.from_date || filters?.to_date) return 'Fixed dates'
  return 'All time'
}

function runSubtitle(result) {
  const win = result?.window || {}
  const fmt = (v) => (v ? fmtDate(v) || null : null)
  const from = fmt(win.from_date)
  const to = fmt(win.to_date)
  const range = from || to ? `${from ?? '…'} – ${to ?? 'now'}` : 'All time'
  return `${result.row_count} rows · ${range}`
}

export default function Reports() {
  const [rangeKey, setRangeKey] = useState('quarter')
  const { can } = useAuth()
  const { toast } = useToast()
  const qc = useQueryClient()

  const [runResult, setRunResult] = useState(null)
  const [creatingReport, setCreatingReport] = useState(false)
  const [loggingCost, setLoggingCost] = useState(false)
  const [exportBusyId, setExportBusyId] = useState(null)

  const span = useMemo(() => rangeWindow(rangeKey), [rangeKey])
  const keyParams = useMemo(() => ({ range: rangeKey, scope: 'reports' }), [rangeKey])

  const kpisQuery = useQuery({
    queryKey: qk.analytics.kpis(keyParams),
    queryFn: async () => (await analyticsApi.kpis(span))?.data ?? null,
  })
  const trendQuery = useQuery({
    queryKey: qk.analytics.trend({ ...keyParams, months: TREND_MONTHS }),
    queryFn: async () => (await analyticsApi.hiringTrend({ months: TREND_MONTHS, ...span }))?.data
      ?? { labels: [], applications: [], hires: [] },
  })
  const funnelQuery = useQuery({
    queryKey: qk.analytics.funnel(keyParams),
    queryFn: async () => {
      const res = await analyticsApi.funnel(span)
      return Array.isArray(res?.data) ? res.data : []
    },
  })

  const costsQuery = useQuery({
    queryKey: qk.costs.list(keyParams),
    queryFn: async () => {
      const res = await costsApi.list({ ...span, top: 500 })
      const rows = Array.isArray(res?.data) ? res.data : []
      return rows.map(costsApi.toCostView)
    },
    retry: false,
  })

  const sourcesQuery = useQuery({
    queryKey: qk.analytics.sources(keyParams),
    queryFn: async () => {
      const res = await analyticsApi.sourcePerformance(span)
      return Array.isArray(res?.data) ? res.data : []
    },
  })

  const reportsQuery = useQuery({
    queryKey: qk.reports.list(),
    queryFn: async () => (await reportsApi.list())?.data ?? [],
    retry: false,
  })

  const runReport = useMutation({
    mutationFn: (recordId) => reportsApi.run({ recordId }),
    onSuccess: (res) => {
      setRunResult(res?.data ?? null)
      qc.invalidateQueries({ queryKey: qk.reports.all() })
    },
    onError: (err) => toast(friendlyAuthError(err, 'The report did not run.'), 'error'),
  })

  const deleteReport = useMutation({
    mutationFn: (recordId) => reportsApi.remove(recordId),
    onSuccess: () => qc.invalidateQueries({ queryKey: qk.reports.all() }),
    onError: (err) => toast(friendlyAuthError(err, 'Could not delete the report.'), 'error'),
  })

  async function exportReport(row) {
    setExportBusyId(row.id)
    try {
      await reportsApi.exportCsv({ recordId: row.id })
      qc.invalidateQueries({ queryKey: qk.reports.all() })
    } catch (err) {
      toast(friendlyAuthError(err, 'The export failed.'), 'error')
    } finally {
      setExportBusyId(null)
    }
  }

  const deptsQuery = useQuery({
    queryKey: qk.jobs.list({ scope: 'departments' }),
    queryFn: async () => {
      const res = await jobsApi.list({ top: 500, activeOnly: false })
      const rows = Array.isArray(res?.data) ? res.data : []
      return [...new Set(rows.map((r) => r.department).filter(Boolean))].sort()
    },
  })
  const departments = useMemo(() => (deptsQuery.data ?? []).slice(0, DEPT_CAP), [deptsQuery.data])

  /* One KPI read per department: open_jobs, total_candidates, hires and
     time_to_fill all arrive together, which is the whole table in one payload. */
  const deptQueries = useQueries({
    queries: departments.map((dept) => ({
      queryKey: qk.analytics.kpis({ ...keyParams, department: dept }),
      queryFn: async () => {
        const data = (await analyticsApi.kpis({ ...span, department: dept }))?.data ?? {}
        return {
          id: dept,
          dept,
          open: data.open_jobs ?? 0,
          apps: data.total_candidates ?? 0,
          hires: data.hires ?? 0,
          ttf: data.time_to_fill != null ? Math.round(Number(data.time_to_fill)) : null,
        }
      },
    })),
  })
  const deptPending = deptQueries.some((qr) => qr.isPending)
  /* useQueries hands back a new array every render, so memoise on a value
     signature — otherwise the table re-sorts and the row identity churns on
     every unrelated re-render. */
  const deptSignature = deptQueries
    .map((qr) => (qr.data ? `${qr.data.dept}:${qr.data.open}:${qr.data.apps}:${qr.data.hires}:${qr.data.ttf}` : '-'))
    .join('|')
  const deptRows = useMemo(
    () => deptQueries.map((qr) => qr.data).filter(Boolean).filter((r) => r.open || r.apps || r.hires),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [deptSignature],
  )

  /* ---------- derived payloads ---------- */

  /* Fold the 11 raw statuses onto the six funnel labels, then run a suffix sum
     so each label carries "reached at least here". */
  const funnel = useMemo(() => {
    const raw = new Map((funnelQuery.data ?? []).map((r) => [r.stage, r.count || 0]))
    const labels = []
    const perLabel = []
    for (const { key, label } of FUNNEL_ORDER) {
      const idx = labels.indexOf(label)
      if (idx === -1) {
        labels.push(label)
        perLabel.push(raw.get(key) ?? 0)
      } else {
        perLabel[idx] += raw.get(key) ?? 0
      }
    }
    const reached = perLabel.map((_, i) => perLabel.slice(i).reduce((s, n) => s + n, 0))
    const base = reached[0] || 0
    return {
      labels,
      counts: reached,
      data: reached.map((n) => (base ? Math.round((n / base) * 100) : 0)),
      colors: Charts.PALETTE,
      yFmt: (v) => `${v}%`,
      base,
    }
  }, [funnelQuery.data])

  const cycle = useMemo(() => {
    const k = kpisQuery.data ?? {}
    const round = (v) => (v == null ? 0 : Math.round(Number(v)))
    return {
      labels: ['Time to Hire', 'Time to Fill'],
      datasets: [
        { label: 'Current', data: [round(k.time_to_hire), round(k.time_to_fill)], color: Charts.PALETTE[0] },
        { label: 'Prior', data: [round(k.time_to_hire_prior), round(k.time_to_fill_prior)], color: Charts.PALETTE[2] },
      ],
      yFmt: (v) => `${v}d`,
    }
  }, [kpisQuery.data])

  const cycleLegend = useMemo(
    () => [
      { label: 'Current window', color: Charts.PALETTE[0] },
      { label: 'Prior window', color: Charts.PALETTE[2] },
    ],
    [],
  )

  const costTotals = useMemo(
    () => costsApi.totalsByType(costsQuery.data ?? []),
    [costsQuery.data],
  )
  const costSum = useMemo(
    () => costTotals.reduce((s, r) => s + r.amount, 0),
    [costTotals],
  )

  const k = kpisQuery.data
  const totalApplications = useMemo(() => {
    const t = trendQuery.data
    if (!t?.applications?.length) return null
    return t.applications.reduce((s, v) => s + (v || 0), 0)
  }, [trendQuery.data])

  /* REQ-ANL-08: shown only when the baseline org setting exists — see header. */
  let tthFoot = k?.time_to_hire == null ? 'no hires in window' : 'offer → start'
  if (k?.time_to_hire != null && k?.tth_baseline_days != null) {
    const delta = Math.round(k.time_to_hire) - k.tth_baseline_days
    tthFoot = `vs ${k.tth_baseline_days}d baseline (${delta > 0 ? '+' : ''}${delta}d)`
  }

  const cards = [
    {
      label: 'Total Hires',
      value: kpisQuery.isPending ? '—' : (k?.hires ?? 0),
      icon: 'award',
      tone: 'i-green',
      foot: 'in the selected window',
    },
    {
      label: 'Total Applications',
      value: trendQuery.isPending ? '—' : (totalApplications?.toLocaleString() ?? '—'),
      icon: 'users',
      tone: 'i-blue',
      foot: `last ${TREND_MONTHS} months`,
    },
    {
      label: 'Avg. Time to Hire',
      value: kpisQuery.isPending ? '—' : (k?.time_to_hire != null ? `${Math.round(k.time_to_hire)} days` : '—'),
      icon: 'clock',
      tone: 'i-teal',
      foot: tthFoot,
    },
    {
      label: 'Avg. Cost per Hire',
      value: kpisQuery.isPending ? '—' : (k?.cost_per_hire != null ? money(Math.round(k.cost_per_hire)) : '—'),
      icon: 'dollar',
      tone: 'i-amber',
      foot: k?.cost_per_hire == null ? 'no cost data recorded' : 'from the cost ledger',
    },
  ]

  const deptColumns = [
    { key: 'dept', label: 'Department', sortable: true, render: (r) => <span className="cell-primary">{r.dept}</span> },
    { key: 'open', label: 'Open Roles', sortable: true, align: 'center' },
    { key: 'apps', label: 'Applications', sortable: true, align: 'center', render: (r) => <b>{r.apps}</b> },
    { key: 'hires', label: 'Hires', sortable: true, align: 'center' },
    {
      key: 'ttf', label: 'Time to Fill', sortable: true, align: 'center',
      sortValue: (r) => r.ttf ?? Number.MAX_SAFE_INTEGER,
      render: (r) => (r.ttf != null ? `${r.ttf} days` : <span className="text-muted">—</span>),
    },
    {
      key: '_conv', label: 'Applicant → hire', sortable: true,
      sortValue: (r) => (r.apps ? r.hires / r.apps : 0),
      render: (r) => {
        const rate = r.apps ? Math.round((r.hires / r.apps) * 100) : 0
        return (
          <div className="flex items-center gap-8">
            <div style={{ flex: 1 }}><ProgressBar pct={rate} /></div>
            <b style={{ width: 38, textAlign: 'right' }}>{rate}%</b>
          </div>
        )
      },
    },
  ]

  const reportColumns = [
    {
      key: 'name', label: 'Report', sortable: true,
      render: (r) => (
        <div>
          <span className="cell-primary">{r.name}</span>
          {r.description ? (
            <div className="text-muted" style={{ fontSize: 12 }}>{r.description}</div>
          ) : null}
        </div>
      ),
    },
    { key: 'report_label', label: 'Type', sortable: true },
    { key: '_window', label: 'Window', render: (r) => reportWindowLabel(r.filters) },
    {
      key: 'last_run_at', label: 'Last Run', sortable: true,
      sortValue: (r) => toDate(r.last_run_at)?.getTime() ?? 0,
      render: (r) => (r.last_run_at
        ? fmtDateTime(r.last_run_at)
        : <span className="text-muted">never</span>),
    },
    {
      key: '_actions', label: '',
      render: (r) => (
        <div className="flex items-center gap-8">
          <button
            className="btn btn-secondary btn-sm"
            disabled={runReport.isPending}
            onClick={() => runReport.mutate(r.id)}
          >
            Run
          </button>
          {can('reports.export') && (
            <button
              className="btn btn-secondary btn-sm"
              disabled={exportBusyId === r.id}
              onClick={() => exportReport(r)}
            >
              {exportBusyId === r.id ? 'Exporting…' : 'CSV'}
            </button>
          )}
          {can('reports.delete') && (
            <button
              className="btn btn-danger btn-sm"
              disabled={deleteReport.isPending}
              onClick={() => { if (window.confirm(`Delete "${r.name}"?`)) deleteReport.mutate(r.id) }}
            >
              Delete
            </button>
          )}
        </div>
      ),
    },
  ]

  const sourceColumns = [
    { key: 'source', label: 'Source', sortable: true, render: (r) => <span className="cell-primary">{r.source}</span> },
    { key: 'count', label: 'Applications', sortable: true, align: 'center', render: (r) => <b>{r.count}</b> },
    {
      key: 'spend', label: 'Tagged Spend', sortable: true, align: 'right',
      render: (r) => (r.spend ? money(Math.round(r.spend)) : <span className="text-muted">—</span>),
    },
    {
      key: 'cost_per_application', label: 'Cost / Application', sortable: true, align: 'right',
      sortValue: (r) => r.cost_per_application ?? 0,
      render: (r) => (r.cost_per_application != null
        ? money(r.cost_per_application)
        : <span className="text-muted">—</span>),
    },
  ]

  const costColumns = [
    { key: 'type', label: 'Cost Type', sortable: true, render: (r) => <span className="cell-primary">{r.type}</span> },
    {
      key: 'amount', label: 'Total', sortable: true, align: 'right',
      render: (r) => <b>{money(Math.round(r.amount))}</b>,
    },
    {
      key: '_share', label: 'Share', sortable: true,
      sortValue: (r) => r.amount,
      render: (r) => {
        const share = costSum ? Math.round((r.amount / costSum) * 100) : 0
        return (
          <div className="flex items-center gap-8">
            <div style={{ flex: 1 }}><ProgressBar pct={share} /></div>
            <b style={{ width: 38, textAlign: 'right' }}>{share}%</b>
          </div>
        )
      },
    },
  ]

  return (
    <div className="page">
      <PageHeader
        title="Reports"
        sub="Recruitment metrics across the selected window"
        actions={
          <select className="select" value={rangeKey} onChange={(e) => setRangeKey(e.target.value)}>
            {RANGES.map((r) => <option key={r.key} value={r.key}>{r.label}</option>)}
          </select>
        }
      />

      {kpisQuery.isError && (
        <div className="card mb-18"><div className="card-body">
          <EmptyState icon="alert" title="Couldn’t load reporting metrics">
            {friendlyAuthError(kpisQuery.error, 'The server did not answer.')}
            {' '}This screen needs the <code>analytics.view</code> permission.
          </EmptyState>
        </div></div>
      )}

      <div className="grid g-kpi mb-18">
        {cards.map((c) => <KpiCard key={c.label} {...c} />)}
      </div>

      <div className="card mb-18">
        <div className="card-head">
          <div>
            <h3>Report Library</h3>
            <span className="ch-sub">Saved reports rerun the same governed queries as the charts, on a rolling window</span>
          </div>
          {can('reports.create') && (
            <button className="btn btn-primary btn-sm" onClick={() => setCreatingReport(true)}>
              <Icon name="plus" /> New report
            </button>
          )}
        </div>
        {reportsQuery.isPending ? (
          <div className="card-body">
            <EmptyState icon="clock" title="Loading…">Fetching saved reports.</EmptyState>
          </div>
        ) : reportsQuery.isError ? (
          <div className="card-body">
            <EmptyState icon="lock" title="Reports not visible">
              {friendlyAuthError(reportsQuery.error, 'The report library did not answer.')}
              {' '}This card needs the <code>reports.view</code> permission.
            </EmptyState>
          </div>
        ) : (reportsQuery.data ?? []).length === 0 ? (
          <div className="card-body">
            <EmptyState icon="reports" title="No saved reports yet">
              Save a report once and rerun or export it with one click.
            </EmptyState>
          </div>
        ) : (
          <DataTable columns={reportColumns} rows={reportsQuery.data} pageSize={50} />
        )}
      </div>

      <div className="grid g-2 mb-18">
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Hiring Funnel</h3>
              <span className="ch-sub">
                Share reaching each stage{funnel.base ? ` · base ${funnel.base}` : ''}
              </span>
            </div>
          </div>
          <div className="card-body">
            {funnelQuery.isPending ? (
              <EmptyState icon="clock" title="Loading…">Fetching stage counts.</EmptyState>
            ) : funnelQuery.isError ? (
              <EmptyState icon="alert" title="Couldn’t load the funnel">
                {friendlyAuthError(funnelQuery.error, 'The server did not answer.')}
              </EmptyState>
            ) : !funnel.base ? (
              <EmptyState icon="inbox" title="No applications in this window">
                The funnel fills in once applications arrive.
              </EmptyState>
            ) : (
              <>
                <div className="chart-wrap"><Chart type="bar" data={funnel} height={280} /></div>
                <p className="text-muted" style={{ marginTop: 10, fontSize: 12 }}>
                  <Icon name="info" /> Derived from current stage counts, so rejected applications are
                  not counted at the stage they reached.
                </p>
              </>
            )}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div><h3>Cycle Time</h3><span className="ch-sub">Days, current window vs prior</span></div>
          </div>
          <div className="card-body">
            {kpisQuery.isPending ? (
              <EmptyState icon="clock" title="Loading…">Fetching cycle times.</EmptyState>
            ) : k?.time_to_hire == null && k?.time_to_fill == null ? (
              <EmptyState icon="clock" title="No completed cycles">
                Needs at least one hire and one closed requisition in the window.
              </EmptyState>
            ) : (
              <>
                <div className="chart-wrap"><Chart type="groupedBar" data={cycle} height={280} /></div>
                <ChartLegend items={cycleLegend} />
              </>
            )}
          </div>
        </div>
      </div>

      <div className="card mb-18">
        <div className="card-head">
          <div>
            <h3>Department Performance</h3>
            <span className="ch-sub">
              {deptsQuery.data && deptsQuery.data.length > DEPT_CAP
                ? `Top ${DEPT_CAP} of ${deptsQuery.data.length} departments`
                : 'Hiring breakdown by team'}
            </span>
          </div>
        </div>
        {deptPending ? (
          <div className="card-body">
            <EmptyState icon="clock" title="Loading…">One read per department.</EmptyState>
          </div>
        ) : deptRows.length === 0 ? (
          <div className="card-body">
            <EmptyState icon="inbox" title="No department activity">
              Set a department on a requisition for it to appear here.
            </EmptyState>
          </div>
        ) : (
          <DataTable columns={deptColumns} rows={deptRows} pageSize={50} />
        )}
      </div>

      <div className="card mb-18">
        <div className="card-head">
          <div>
            <h3>Hiring Spend</h3>
            <span className="ch-sub">
              {costSum ? `${money(Math.round(costSum))} recorded in this window` : 'From the hiring-cost ledger'}
            </span>
          </div>
          {can('jobs.edit') && (
            <button className="btn btn-secondary btn-sm" onClick={() => setLoggingCost(true)}>
              <Icon name="plus" /> Log cost
            </button>
          )}
        </div>
        {costsQuery.isPending ? (
          <div className="card-body">
            <EmptyState icon="clock" title="Loading…">Fetching the cost ledger.</EmptyState>
          </div>
        ) : costsQuery.isError ? (
          <div className="card-body">
            <EmptyState icon="lock" title="Costs not visible">
              {friendlyAuthError(costsQuery.error, 'The cost ledger did not answer.')}
              {' '}This card needs the <code>jobs.view</code> permission.
            </EmptyState>
          </div>
        ) : costTotals.length === 0 ? (
          <div className="card-body">
            <EmptyState icon="dollar" title="No costs recorded">
              Cost-per-hire stays blank until spend is logged against a requisition.
            </EmptyState>
          </div>
        ) : (
          <DataTable columns={costColumns} rows={costTotals.map((r) => ({ id: r.type, ...r }))} pageSize={50} />
        )}
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>Source Performance</h3>
            <span className="ch-sub">
              Applications and tagged spend per channel — cost per application counts only source-tagged spend
            </span>
          </div>
        </div>
        {sourcesQuery.isPending ? (
          <div className="card-body">
            <EmptyState icon="clock" title="Loading…">Fetching source counts.</EmptyState>
          </div>
        ) : sourcesQuery.isError ? (
          <div className="card-body">
            <EmptyState icon="alert" title="Couldn’t load sources">
              {friendlyAuthError(sourcesQuery.error, 'The server did not answer.')}
            </EmptyState>
          </div>
        ) : (sourcesQuery.data ?? []).length === 0 ? (
          <div className="card-body">
            <EmptyState icon="inbox" title="No source data in this window">
              Applications carry a source once inbound channels are mapped.
            </EmptyState>
          </div>
        ) : (
          <DataTable
            columns={sourceColumns}
            rows={(sourcesQuery.data ?? []).map((r) => ({ ...r, id: r.id ?? r.source }))}
            pageSize={50}
          />
        )}
      </div>

      {creatingReport && (
        <NewReportModal
          onClose={() => setCreatingReport(false)}
          onCreated={() => {
            setCreatingReport(false)
            qc.invalidateQueries({ queryKey: qk.reports.all() })
          }}
        />
      )}

      {loggingCost && (
        <LogCostModal
          onClose={() => setLoggingCost(false)}
          onLogged={() => {
            setLoggingCost(false)
            qc.invalidateQueries({ queryKey: qk.costs.all() })
            qc.invalidateQueries({ queryKey: qk.analytics.all() })
          }}
        />
      )}

      {runResult && (
        <Modal
          title={runResult.name || runResult.report_label}
          subtitle={runSubtitle(runResult)}
          size="modal-lg"
          onClose={() => setRunResult(null)}
          footer={
            <>
              {can('reports.export') && runResult.saved_report_id && (
                <button
                  className="btn btn-secondary"
                  onClick={() => reportsApi.exportCsv({ recordId: runResult.saved_report_id })
                    .catch((err) => toast(friendlyAuthError(err, 'The export failed.'), 'error'))}
                >
                  <Icon name="download" /> Export CSV
                </button>
              )}
              <button className="btn btn-primary" onClick={() => setRunResult(null)}>Close</button>
            </>
          }
        >
          {runResult.rows?.length ? (
            <DataTable
              columns={(runResult.columns ?? []).map((c) => ({
                key: c.key,
                label: c.label,
                sortable: true,
                render: (row) => (row[c.key] == null || row[c.key] === ''
                  ? <span className="text-muted">—</span>
                  : String(row[c.key])),
              }))}
              rows={runResult.rows.map((row, i) => ({ id: i, ...row }))}
              pageSize={50}
            />
          ) : (
            <EmptyState icon="inbox" title="No rows in this window">
              The window resolved to {runSubtitle(runResult)}.
            </EmptyState>
          )}
        </Modal>
      )}
    </div>
  )
}

function NewReportModal({ onClose, onCreated }) {
  const { toast } = useToast()
  const [name, setName] = useState('')
  const [reportType, setReportType] = useState(reportsApi.REPORT_TYPES[0].key)
  const [windowDays, setWindowDays] = useState(90)
  const [description, setDescription] = useState('')

  const save = useMutation({
    mutationFn: () => reportsApi.create({
      name: name.trim(),
      reportType,
      description: description.trim() || undefined,
      filters: windowDays ? { window_days: Number(windowDays) } : {},
    }),
    onSuccess: () => { toast('Report saved', 'success'); onCreated() },
    onError: (err) => toast(friendlyAuthError(err, 'Could not save the report.'), 'error'),
  })

  const submit = () => {
    if (!name.trim()) { toast('Give the report a name', 'error'); return }
    save.mutate()
  }

  return (
    <Modal
      title="New Report"
      subtitle="Saved reports rerun with a rolling window"
      onClose={onClose}
      footer={
        <>
          <button className="btn btn-secondary" onClick={onClose} disabled={save.isPending}>Cancel</button>
          <button className="btn btn-primary" onClick={submit} disabled={save.isPending}>
            <Icon name="check" /> {save.isPending ? 'Saving…' : 'Save Report'}
          </button>
        </>
      }
    >
      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
        <div className="form-grid">
          <div className="form-field col-span-2">
            <label>Name <span className="req">*</span></label>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Quarterly hiring funnel" />
          </div>
          <div className="form-field">
            <label>Report type</label>
            <select value={reportType} onChange={(e) => setReportType(e.target.value)}>
              {reportsApi.REPORT_TYPES.map((t) => <option key={t.key} value={t.key}>{t.label}</option>)}
            </select>
          </div>
          <div className="form-field">
            <label>Window</label>
            <select
              value={windowDays ?? ''}
              onChange={(e) => setWindowDays(e.target.value ? Number(e.target.value) : null)}
            >
              {REPORT_WINDOWS.map((w) => <option key={w.label} value={w.days ?? ''}>{w.label}</option>)}
            </select>
          </div>
          <div className="form-field col-span-2">
            <label>Description</label>
            <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Optional" />
          </div>
        </div>
      </form>
    </Modal>
  )
}

function LogCostModal({ onClose, onLogged }) {
  const { toast } = useToast()
  const [costType, setCostType] = useState('job_board')
  const [amount, setAmount] = useState('')
  const [jobPostId, setJobPostId] = useState('')
  const [sourceChannelId, setSourceChannelId] = useState('')
  const [incurredAt, setIncurredAt] = useState(() => new Date().toISOString().slice(0, 10))
  const [description, setDescription] = useState('')

  const jobsQuery = useQuery({
    queryKey: qk.jobs.list({ scope: 'cost-form' }),
    queryFn: async () => {
      const res = await jobsApi.list({ top: 500, activeOnly: false })
      return Array.isArray(res?.data) ? res.data : []
    },
  })
  const channelsQuery = useQuery({
    queryKey: qk.costs.sources(),
    queryFn: async () => (await costsApi.sourceChannels())?.data ?? [],
  })

  const save = useMutation({
    mutationFn: () => costsApi.create({
      cost_type: costType,
      amount: Number(amount),
      job_post_id: jobPostId || undefined,
      source_channel_id: sourceChannelId ? Number(sourceChannelId) : undefined,
      incurred_at: incurredAt ? new Date(`${incurredAt}T00:00:00Z`).toISOString() : undefined,
      description: description.trim() || undefined,
    }),
    onSuccess: () => { toast('Cost logged', 'success'); onLogged() },
    onError: (err) => toast(friendlyAuthError(err, 'Could not log the cost.'), 'error'),
  })

  const submit = () => {
    if (!amount || Number.isNaN(Number(amount)) || Number(amount) <= 0) {
      toast('Enter a positive amount', 'error')
      return
    }
    save.mutate()
  }

  return (
    <Modal
      title="Log Hiring Cost"
      subtitle="Feeds cost-per-hire; tag a source to feed cost-per-application"
      onClose={onClose}
      footer={
        <>
          <button className="btn btn-secondary" onClick={onClose} disabled={save.isPending}>Cancel</button>
          <button className="btn btn-primary" onClick={submit} disabled={save.isPending}>
            <Icon name="check" /> {save.isPending ? 'Saving…' : 'Log Cost'}
          </button>
        </>
      }
    >
      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
        <div className="form-grid">
          <div className="form-field">
            <label>Cost type</label>
            <select value={costType} onChange={(e) => setCostType(e.target.value)}>
              {COST_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </div>
          <div className="form-field">
            <label>Amount (USD) <span className="req">*</span></label>
            <input type="number" min="0" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} />
          </div>
          <div className="form-field">
            <label>Requisition</label>
            <select value={jobPostId} onChange={(e) => setJobPostId(e.target.value)}>
              <option value="">Not tied to a job</option>
              {(jobsQuery.data ?? []).map((j) => <option key={j.id} value={j.id}>{j.title}</option>)}
            </select>
          </div>
          <div className="form-field">
            <label>Source channel</label>
            <select value={sourceChannelId} onChange={(e) => setSourceChannelId(e.target.value)}>
              <option value="">Untagged (cost-per-hire only)</option>
              {(channelsQuery.data ?? []).map((c) => <option key={c.id} value={c.id}>{c.label}</option>)}
            </select>
          </div>
          <div className="form-field">
            <label>Incurred on</label>
            <input type="date" value={incurredAt} onChange={(e) => setIncurredAt(e.target.value)} />
          </div>
          <div className="form-field">
            <label>Description</label>
            <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Optional" />
          </div>
        </div>
      </form>
    </Modal>
  )
}