import { Activity, BadgeDollarSign, Brain, Gauge as GaugeIcon, Loader2, TrendingUp } from 'lucide-react'
import type { ReactNode } from 'react'
import { Panel } from './ui'
import { CAP, can } from '../lib/can'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useAioeStatus } from '../tools/screenmatch/queries'
import { screenApi } from '../tools/screenmatch/api'
import { useAuth } from '../lib/useAuth'
import { fmtDate } from '../lib/format'
import type { CCExecutiveCard } from '../lib/types'

const ICONS: Record<string, ReactNode> = {
  mission_readiness: <GaugeIcon size={16} />,
  revenue_at_risk: <BadgeDollarSign size={16} />,
  growth_capacity: <TrendingUp size={16} />,
  staffing_confidence: <Activity size={16} />,
}

function stateColor(state: string): string {
  if (state === 'ok') return 'var(--color-ok)'
  if (state === 'watch') return 'var(--color-warn)'
  if (state === 'risk') return 'var(--color-risk)'
  return 'var(--color-faint)'
}

// The executive intelligence row: four cards backed by real queries. A card with no feeding data
// says so and names the feed; it never shows a fake number.
export function ExecutiveCards({ cards }: { cards: CCExecutiveCard[] }) {
  if (!cards?.length) return null
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {cards.map((c) => (
        <Panel key={c.key} className="p-4">
          <div className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-muted">
            <span style={{ color: stateColor(c.state) }}>{ICONS[c.key]}</span>
            {c.title}
          </div>
          {c.no_data ? (
            <p className="mt-2 text-xs leading-relaxed text-faint">{c.data_note}</p>
          ) : (
            <>
              <div className="mt-1.5 text-2xl font-extrabold tabular-nums" style={{ color: stateColor(c.state) }}>
                {c.value}
              </div>
              <p className="mt-1 text-xs leading-relaxed text-faint">{c.detail}</p>
            </>
          )}
        </Panel>
      ))}
    </div>
  )
}

// Admin only proof the optimization engine is alive: outcomes recorded, the last engine run, the
// active weight profile, and this month's adjustments. When shadow mode is on and a candidate
// profile is pending, an admin can promote it here (the human in the loop step). Internal
// instrumentation, not marketing.
export function ContinuousLearningTile() {
  const { principal } = useAuth()
  const status = useAioeStatus()
  const qc = useQueryClient()
  const promote = useMutation({
    mutationFn: () => screenApi.aioePromote(),
    onSuccess: () => void qc.invalidateQueries({ queryKey: ['aioe', 'status'] }),
  })
  // Capability, not role name: the previous role string test hid the promote control from superuser,
  // which is the one role that holds every capability.
  if (!can(principal, CAP.orgSettings) || status.isError || !status.data) return null
  const s = status.data
  return (
    <Panel title="Continuous Learning" hint="admin only · internal">
      <div className="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm md:grid-cols-4">
        <Stat k="Outcomes recorded" v={String(s.outcomesRecorded)} />
        <Stat k="Last engine run" v={s.lastRunAt ? fmtDate(s.lastRunAt) : 'never'} />
        <Stat k="Active weight profile" v={s.activeProfileVersion} />
        <Stat k="Adjustments this month" v={String(s.adjustmentsThisMonth)} />
      </div>
      {s.shadowMode && (
        <div className="mt-3 flex flex-wrap items-center gap-3 rounded-lg border border-line/60 bg-navy-950/40 px-3 py-2.5">
          <span className="text-[11px] font-bold uppercase tracking-wider text-gold">Shadow mode</span>
          {s.pendingCandidateVersion ? (
            <>
              <span className="text-sm text-muted">
                Candidate profile <span className="font-semibold text-ink">{s.pendingCandidateVersion}</span> is proposed and awaiting review.
              </span>
              <button
                disabled={promote.isPending}
                onClick={() => promote.mutate()}
                className="ml-auto flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-3.5 py-1.5 text-sm font-semibold text-white hover:brightness-110 disabled:opacity-50"
              >
                {promote.isPending && <Loader2 size={13} className="animate-spin" />} Promote to active
              </button>
            </>
          ) : (
            <span className="text-sm text-faint">No candidate proposed yet. The engine proposes; a human promotes.</span>
          )}
          {promote.isError && <span className="w-full text-xs text-risk">{(promote.error as Error).message}</span>}
        </div>
      )}
      <p className="mt-2.5 flex items-center gap-1.5 text-[11px] text-faint">
        <Brain size={12} />
        Recorded screening outcomes tune the scoring weight profile on a nightly batch. Every change is versioned and audited.
        {s.shadowMode && ' In shadow mode the engine proposes; an admin promotes.'}
        {!s.updaterConfigured && ' The batch updater is not configured on this deployment; outcomes are accumulating.'}
      </p>
    </Panel>
  )
}

function Stat({ k, v }: { k: string; v: string }) {
  return (
    <div>
      <dt className="text-[11px] uppercase tracking-wider text-faint">{k}</dt>
      <dd className="mt-0.5 font-semibold tabular-nums">{v}</dd>
    </div>
  )
}