'use client'

/**
 * 報表 Page — AI Agent 報表與告警接管總控
 * ========================================
 * 這一頁保留原本處置統計，同時前移日報 / 週報 / 月報資料源健康、
 * 全 0 判讀、AI 接手率、KM / PlayBook / Verifier 沉澱與 no-send 邊界。
 */

import { useEffect, useMemo, useState } from 'react'
import type { ReactNode } from 'react'
import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'
import { cn } from '@/lib/utils'
import {
  Activity,
  AlertTriangle,
  BarChart3,
  BellRing,
  Bot,
  CheckCircle2,
  Clock3,
  Database,
  FileText,
  Gauge,
  GitBranch,
  Inbox,
  Layers3,
  RefreshCw,
  ShieldCheck,
  UserCheck,
  Wrench,
} from 'lucide-react'

const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''

interface DispositionSummary {
  total: number
  auto_repair: number
  human_approved: number
  manual_resolved: number
  cold_start_trust: number
  auto_rate: number
  human_rate: number
}

interface DispositionByAnomaly {
  anomaly_key: string
  alert_name: string
  disposition: DispositionSummary
}

interface DispositionResponse {
  summary: DispositionSummary
  by_anomaly: DispositionByAnomaly[]
}

interface IncidentSummary {
  total?: number
  resolved?: number
  unresolved?: number
  total_incidents?: number
  resolved_rate?: number
  status_distribution?: Array<{ status: string; count: number }>
}

interface ResolutionStats {
  resolutionRate?: number
  avgResolutionTime?: string | number
  avg_minutes?: number | null
  sample_size?: number
}

interface ReportStatusCard {
  cadence_id: 'daily' | 'weekly' | 'monthly'
  display_name: string
  owner_agent: string
  completion_percent: number
  delivery_state: string
  sections_count: number
  chart_count: number
  work_units_total: number
  live_delivery_count: number
  next_gate: string
}

interface AgentStatusReport {
  agent_id: string
  display_name: string
  primary_role: string
  current_state: string
  work_units_total: number
  work_units_done: number
  work_units_waiting_approval: number
  live_runtime_work_units_24h: number
  telegram_policy: string
  learning_state: string
}

interface ReportStatusBoardSnapshot {
  generated_at: string
  program_status: {
    overall_completion_percent: number
    current_task_id: string
    next_task_id: string
    status_note: string
  }
  report_completion_truth: {
    live_report_delivery_enabled: boolean
    live_telegram_send_count_24h: number
    live_auto_optimization_count_24h: number
    truth_note: string
  }
  report_status_cards: ReportStatusCard[]
  agent_status_reports: AgentStatusReport[]
  rollups: {
    report_card_count: number
    agent_status_count: number
    visible_chart_count: number
    workload_unit_total: number
    workload_done_total: number
    workload_waiting_approval_total: number
    live_delivery_count: number
    live_telegram_send_count: number
    live_runtime_work_units: number
    live_auto_optimization_count: number
  }
}

interface ReportSourceHealthItem {
  source_id: string
  display_name: string
  source_ok: boolean
  state: string
  freshness: string
  confidence_percent: number
  metrics: Record<string, number | string | null | undefined>
  work_item_id: string
  next_action: string
}

interface ReportNoSendPreview {
  cadence_id: string
  source_ready_count: number
  source_total_count: number
  blocked_by_source_gap: boolean
  live_send_allowed: boolean
  gateway_queue_write_allowed: boolean
}

interface ReportAutomationAsset {
  asset_id: string
  label: string
  state: string
  done_count: number
  blocked_count: number
  next_action: string
}

interface ReportSourceGapPlaybookVerifier {
  work_item_id: string
  source_id: string
  display_name: string
  route: string
  playbook_draft_id: string
  verifier_plan_id: string
  playbook_state: string
  verifier_state: string
  script_state: string
  schedule_state: string
  owner_review_required: boolean
  runtime_gate_open: boolean
  playbook_template_fields: string[]
  verifier_checks: string[]
  next_action: string
}

interface ReportSourceHealthSnapshot {
  source_health: ReportSourceHealthItem[]
  all_zero_assessment: {
    all_zero_observed: boolean
    confidence_percent: number
    verdict: string
    blocking_reason: string
    next_action: string
  }
  no_send_previews: ReportNoSendPreview[]
  automation_assets: ReportAutomationAsset[]
  source_gap_playbook_verifier: ReportSourceGapPlaybookVerifier[]
  rollups: {
    source_count: number
    source_ok_count: number
    source_gap_count: number
    confidence_percent: number
    report_work_item_count: number
    source_gap_playbook_draft_count: number
    source_gap_verifier_plan_count: number
    source_gap_owner_review_required_count: number
    live_send_allowed_count: number
    runtime_gate_count: number
  }
}

type SourceKey = 'incident' | 'resolution' | 'disposition' | 'statusBoard'
type SourceState = Record<SourceKey, boolean>

const initialSourceState: SourceState = {
  incident: false,
  resolution: false,
  disposition: false,
  statusBoard: false,
}

async function fetchJson<T>(path: string): Promise<T | null> {
  try {
    const response = await fetch(`${API_BASE}${path}`)
    if (!response.ok) return null
    return await response.json()
  } catch {
    return null
  }
}

export default function ReportsPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('reports')
  const tc = useTranslations('common')
  const [summary, setSummary] = useState<IncidentSummary | null>(null)
  const [resolution, setResolution] = useState<ResolutionStats | null>(null)
  const [disposition, setDisposition] = useState<DispositionResponse | null>(null)
  const [reportBoard, setReportBoard] = useState<ReportStatusBoardSnapshot | null>(null)
  const [sourceHealth, setSourceHealth] = useState<ReportSourceHealthSnapshot | null>(null)
  const [sourceState, setSourceState] = useState<SourceState>(initialSourceState)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  const fetchAll = () => {
    setLoading(true)
    setError(false)
    Promise.all([
      fetchJson<DispositionResponse>('/api/v1/stats/disposition'),
      fetchJson<ReportStatusBoardSnapshot>('/api/v1/agents/agent-report-status-board'),
      fetchJson<ReportSourceHealthSnapshot>('/api/v1/agents/agent-report-source-health'),
    ])
      .then(([dispositionStats, statusBoard, reportSourceHealth]) => {
        const healthById = new Map((reportSourceHealth?.source_health ?? []).map(item => [item.source_id, item]))
        const incidentMetrics = healthById.get('incident_summary')?.metrics ?? {}
        const resolutionMetrics = healthById.get('resolution_stats')?.metrics ?? {}
        const incidentSummary: IncidentSummary | null = healthById.get('incident_summary')?.source_ok
          ? {
              total_incidents: Number(incidentMetrics.total ?? 0),
              resolved_rate: Number(incidentMetrics.resolved_rate ?? 0),
            }
          : null
        const resolutionStats: ResolutionStats | null = healthById.get('resolution_stats')?.source_ok
          ? {
              resolutionRate: Number(resolutionMetrics.resolution_rate ?? 0),
              avg_minutes: typeof resolutionMetrics.avg_minutes === 'number' ? resolutionMetrics.avg_minutes : null,
            }
          : null
        setSummary(incidentSummary)
        setResolution(resolutionStats)
        setDisposition(dispositionStats)
        setReportBoard(statusBoard)
        setSourceHealth(reportSourceHealth)
        setSourceState({
          incident: Boolean(healthById.get('incident_summary')?.source_ok),
          resolution: Boolean(healthById.get('resolution_stats')?.source_ok),
          disposition: Boolean(healthById.get('disposition_stats')?.source_ok),
          statusBoard: Boolean(healthById.get('report_status_board')?.source_ok),
        })
        setError(!dispositionStats && !statusBoard && !reportSourceHealth)
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false))
  }

  useEffect(() => { fetchAll() }, [])

  const ds = disposition?.summary
  const incidentTotal = summary?.total ?? summary?.total_incidents ?? 0
  const resolvedFromDistribution = summary?.status_distribution
    ?.filter(item => item.status.toLowerCase().includes('resolved'))
    .reduce((sum, item) => sum + item.count, 0)
  const resolvedCount = summary?.resolved ?? resolvedFromDistribution
  const unresolvedCount = summary?.unresolved ?? (
    resolvedCount != null ? Math.max(incidentTotal - resolvedCount, 0) : undefined
  )
  const incidentResolvedRate = summary?.resolved_rate ?? resolution?.resolutionRate
  const avgResolutionTime = resolution?.avgResolutionTime ?? (
    resolution?.avg_minutes != null ? `${Math.round(resolution.avg_minutes)}m` : undefined
  )
  const sourceOkCount = sourceHealth?.rollups.source_ok_count ?? Object.values(sourceState).filter(Boolean).length
  const sourceTotal = sourceHealth?.rollups.source_count ?? Object.keys(sourceState).length
  const allZeroSignal = sourceHealth?.all_zero_assessment.all_zero_observed ?? Boolean(
    sourceOkCount > 0 &&
    incidentTotal === 0 &&
    (ds?.total ?? 0) === 0 &&
    (ds?.auto_repair ?? 0) === 0 &&
    (ds?.human_approved ?? 0) === 0
  )
  const dataConfidence = sourceTotal > 0 ? Math.round((sourceOkCount / sourceTotal) * 100) : 0
  const autoHandled = (ds?.auto_repair ?? 0) + (ds?.cold_start_trust ?? 0)
  const totalDispositions = ds?.total ?? 0
  const aiHandoffRate = totalDispositions > 0 ? Math.round((autoHandled / totalDispositions) * 100) : 0
  const waitingApproval = reportBoard?.rollups?.workload_waiting_approval_total ?? 0
  const liveDelivery = reportBoard?.rollups?.live_delivery_count ?? 0
  const liveOptimization = reportBoard?.rollups?.live_auto_optimization_count ?? 0
  const sourceRows = useMemo(
    () => sourceHealth?.source_health?.length
      ? sourceHealth.source_health.map(row => ({
          key: row.source_id,
          label: row.display_name,
          ok: row.source_ok,
          next: row.work_item_id ? `${row.work_item_id} · ${row.next_action}` : row.next_action,
        }))
      : [
          { key: 'incident', label: t('sources.incident'), ok: sourceState.incident, next: t('sourceNext.incident') },
          { key: 'resolution', label: t('sources.resolution'), ok: sourceState.resolution, next: t('sourceNext.resolution') },
          { key: 'disposition', label: t('sources.disposition'), ok: sourceState.disposition, next: t('sourceNext.disposition') },
          { key: 'statusBoard', label: t('sources.statusBoard'), ok: sourceState.statusBoard, next: t('sourceNext.statusBoard') },
        ],
    [sourceHealth, sourceState, t]
  )
  const previewByCadence = useMemo(
    () => new Map((sourceHealth?.no_send_previews ?? []).map(preview => [preview.cadence_id, preview])),
    [sourceHealth]
  )
  const sourceGapCards = sourceHealth?.source_gap_playbook_verifier ?? []

  const pcts = useMemo(() => {
    if (!ds || ds.total === 0) return null
    const total = ds.total
    return {
      auto: Math.round((ds.auto_repair / total) * 100),
      human: Math.round((ds.human_approved / total) * 100),
      manual: Math.round((ds.manual_resolved / total) * 100),
      cold: Math.round((ds.cold_start_trust / total) * 100),
    }
  }, [ds])

  return (
    <AppLayout locale={params.locale}>
      <div className="min-h-full space-y-5 p-4 sm:p-6">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div className="min-w-0">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('eyebrow')}</p>
            <h1 className="mt-1 text-xl font-semibold tracking-tight text-foreground">{t('title')}</h1>
            <p className="mt-1 max-w-3xl text-sm leading-6 text-muted-foreground">{t('subtitle')}</p>
          </div>
          <button
            onClick={fetchAll}
            className="inline-flex h-9 w-9 items-center justify-center rounded-[7px] border border-border bg-card text-muted-foreground transition-colors hover:bg-muted"
            title={tc('refresh')}
          >
            <RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} />
          </button>
        </div>

        {loading && (
          <div className="rounded-[7px] border border-border bg-card py-16 text-center text-sm text-muted-foreground">
            {tc('loading')}
          </div>
        )}

        {!loading && error && (
          <div className="rounded-[7px] border border-red-200 bg-red-50 py-16 text-center text-sm text-red-600">
            {t('fetchError')}
          </div>
        )}

        {!loading && !error && (
          <>
            <section className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
              <div className="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-blue-50 text-blue-600">
                      <Gauge className="h-4 w-4" />
                    </span>
                    <div className="min-w-0">
                      <h2 className="text-base font-semibold text-foreground">{t('command.title')}</h2>
                      <p className="text-xs leading-5 text-muted-foreground">{t('command.subtitle')}</p>
                    </div>
                  </div>

                  <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                    <CommandMetric
                      icon={<Database className="h-4 w-4" />}
                      label={t('command.metrics.confidence')}
                      value={`${dataConfidence}%`}
                      detail={allZeroSignal ? t('command.details.allZero') : t('command.details.sourceOk', { ok: sourceOkCount, total: sourceTotal })}
                      tone={allZeroSignal || dataConfidence < 100 ? 'warn' : 'ok'}
                    />
                    <CommandMetric
                      icon={<Activity className="h-4 w-4" />}
                      label={t('command.metrics.alerts')}
                      value={incidentTotal || '--'}
                      detail={!sourceState.incident ? t('command.details.incidentGap') : allZeroSignal ? t('command.details.noSignal') : t('command.details.alertSignal')}
                      tone={!sourceState.incident || allZeroSignal ? 'warn' : 'neutral'}
                    />
                    <CommandMetric
                      icon={<Bot className="h-4 w-4" />}
                      label={t('command.metrics.aiHandoff')}
                      value={`${aiHandoffRate}%`}
                      detail={t('command.details.aiHandoff', { auto: autoHandled, total: totalDispositions })}
                      tone={aiHandoffRate > 0 ? 'ok' : 'warn'}
                    />
                    <CommandMetric
                      icon={<BellRing className="h-4 w-4" />}
                      label={t('command.metrics.liveDelivery')}
                      value={liveDelivery}
                      detail={t('command.details.noSend', { optimization: liveOptimization })}
                      tone="warn"
                    />
                  </div>
                </div>

                <div className="min-w-0 rounded-[7px] border border-amber-200 bg-amber-50 p-3">
                  <div className="flex items-start gap-2">
                    <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600" />
                    <div className="min-w-0">
                      <p className="text-sm font-semibold text-amber-950">{allZeroSignal ? t('quality.allZeroTitle') : t('quality.title')}</p>
                      <p className="mt-1 text-xs leading-5 text-amber-900">
                        {allZeroSignal ? t('quality.allZeroBody') : t('quality.body')}
                      </p>
                    </div>
                  </div>
                  <div className="mt-3 grid gap-2">
                    <NextActionLine label={t('quality.actions.stats')} active={allZeroSignal || !sourceState.disposition} />
                    <NextActionLine label={t('quality.actions.git')} active={allZeroSignal} />
                    <NextActionLine label={t('quality.actions.cost')} active={allZeroSignal} />
                    <NextActionLine label={t('quality.actions.noSend')} active />
                  </div>
                </div>
              </div>
            </section>

            <section className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <SectionHeader icon={<GitBranch className="h-4 w-4" />} title={t('sourceMatrix.title')} subtitle={t('sourceMatrix.subtitle')} />
                <div className="mt-4 grid gap-2">
                  {sourceRows.map(row => (
                    <div key={row.key} className="grid gap-2 rounded-[7px] border border-border bg-background p-3 sm:grid-cols-[180px_90px_1fr] sm:items-center">
                      <span className="text-sm font-medium text-foreground">{row.label}</span>
                      <StatusPill ok={row.ok} okLabel={t('sourceMatrix.ok')} failLabel={t('sourceMatrix.fail')} />
                      <span className="text-xs leading-5 text-muted-foreground">{row.next}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <SectionHeader icon={<FileText className="h-4 w-4" />} title={t('cadence.title')} subtitle={t('cadence.subtitle')} />
                <div className="mt-4 grid gap-3 md:grid-cols-3">
                  {(reportBoard?.report_status_cards ?? []).map(card => (
                    <CadenceCard
                      key={card.cadence_id}
                      card={card}
                      chips={[
                        t('chip.sections', { count: card.sections_count }),
                        t('chip.charts', { count: card.chart_count }),
                        t('chip.work', { count: card.work_units_total }),
                        t('chip.sourceReady', {
                          ok: previewByCadence.get(card.cadence_id)?.source_ready_count ?? sourceOkCount,
                          total: previewByCadence.get(card.cadence_id)?.source_total_count ?? sourceTotal,
                        }),
                        t('chip.live', { count: card.live_delivery_count }),
                      ]}
                    />
                  ))}
                  {!reportBoard?.report_status_cards?.length && (
                    <EmptyPanel label={t('cadence.empty')} />
                  )}
                </div>
              </div>
            </section>

            <section className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
              <SectionHeader icon={<ShieldCheck className="h-4 w-4" />} title={t('sourceGapActions.title')} subtitle={t('sourceGapActions.subtitle')} />
              <div className="mt-4 grid gap-3 lg:grid-cols-2">
                {sourceGapCards.map(card => (
                  <div key={card.work_item_id} className="rounded-[7px] border border-border bg-background p-3">
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <p className="text-sm font-semibold text-foreground">{card.display_name}</p>
                        <p className="mt-1 break-all text-[11px] leading-5 text-muted-foreground">{card.work_item_id}</p>
                      </div>
                      <StatusPill ok={!card.runtime_gate_open} okLabel={t('sourceGapActions.gateClosed')} failLabel={t('sourceGapActions.gateOpen')} />
                    </div>
                    <div className="mt-3 grid gap-2 sm:grid-cols-2">
                      <AssetMiniLine label={t('sourceGapActions.playbook')} value={card.playbook_state} detail={card.playbook_draft_id} />
                      <AssetMiniLine label={t('sourceGapActions.verifier')} value={card.verifier_state} detail={card.verifier_plan_id} />
                      <AssetMiniLine label={t('sourceGapActions.script')} value={card.script_state} detail={card.route} />
                      <AssetMiniLine label={t('sourceGapActions.schedule')} value={card.schedule_state} detail={card.owner_review_required ? t('sourceGapActions.ownerRequired') : t('sourceGapActions.ownerOptional')} />
                    </div>
                    <div className="mt-3 grid gap-3 md:grid-cols-2">
                      <ChecklistBlock title={t('sourceGapActions.fields')} items={card.playbook_template_fields.slice(0, 5)} />
                      <ChecklistBlock title={t('sourceGapActions.checks')} items={card.verifier_checks.slice(0, 5)} />
                    </div>
                    <p className="mt-3 text-xs leading-5 text-muted-foreground">{card.next_action}</p>
                  </div>
                ))}
                {!sourceGapCards.length && <EmptyPanel label={t('sourceGapActions.empty')} />}
              </div>
            </section>

            <section className="grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <SectionHeader icon={<Layers3 className="h-4 w-4" />} title={t('funnel.title')} subtitle={t('funnel.subtitle')} />
                <div className="mt-4 grid gap-3">
                  <FunnelBar label={t('funnel.alerts')} value={incidentTotal} max={Math.max(incidentTotal, totalDispositions, 1)} tone="neutral" />
                  <FunnelBar label={t('funnel.dispositions')} value={totalDispositions} max={Math.max(incidentTotal, totalDispositions, 1)} tone="neutral" />
                  <FunnelBar label={t('funnel.auto')} value={autoHandled} max={Math.max(totalDispositions, 1)} tone="ok" />
                  <FunnelBar label={t('funnel.human')} value={(ds?.human_approved ?? 0) + (ds?.manual_resolved ?? 0)} max={Math.max(totalDispositions, 1)} tone="warn" />
                  <FunnelBar label={t('funnel.waiting')} value={waitingApproval} max={Math.max(waitingApproval, reportBoard?.rollups?.workload_unit_total ?? 1)} tone={waitingApproval > 0 ? 'danger' : 'ok'} />
                </div>
              </div>

              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <SectionHeader icon={<ShieldCheck className="h-4 w-4" />} title={t('assets.title')} subtitle={t('assets.subtitle')} />
                <div className="mt-4 grid gap-3 sm:grid-cols-2">
                  {(sourceHealth?.automation_assets ?? []).map(asset => (
                    <AssetCard
                      key={asset.asset_id}
                      label={asset.label}
                      value={`${asset.done_count}/${asset.done_count + asset.blocked_count}`}
                      detail={`${asset.state} · ${asset.next_action}`}
                      danger={asset.blocked_count > 0}
                    />
                  ))}
                  {!sourceHealth?.automation_assets?.length && (
                    <>
                      <AssetCard label={t('assets.reports')} value={reportBoard?.rollups?.report_card_count ?? '--'} detail={t('assets.reportsDetail')} />
                      <AssetCard label={t('assets.agents')} value={reportBoard?.rollups?.agent_status_count ?? '--'} detail={t('assets.agentsDetail')} />
                      <AssetCard label={t('assets.workload')} value={`${reportBoard?.rollups?.workload_done_total ?? 0}/${reportBoard?.rollups?.workload_unit_total ?? 0}`} detail={t('assets.workloadDetail')} />
                      <AssetCard label={t('assets.waiting')} value={waitingApproval} detail={t('assets.waitingDetail')} danger={waitingApproval > 0} />
                    </>
                  )}
                </div>
              </div>
            </section>

            <section className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
              <SectionHeader icon={<Bot className="h-4 w-4" />} title={t('agents.title')} subtitle={t('agents.subtitle')} />
              <div className="mt-4 grid gap-3 lg:grid-cols-3">
                {(reportBoard?.agent_status_reports ?? []).map(agent => (
                  <AgentCard
                    key={agent.agent_id}
                    agent={agent}
                    chips={[
                      t('chip.workDone', { done: agent.work_units_done, total: agent.work_units_total }),
                      t('chip.approval', { count: agent.work_units_waiting_approval }),
                      t('chip.live', { count: agent.live_runtime_work_units_24h }),
                      agent.telegram_policy,
                      agent.learning_state,
                    ]}
                  />
                ))}
                {!reportBoard?.agent_status_reports?.length && (
                  <EmptyPanel label={t('agents.empty')} />
                )}
              </div>
            </section>

            <section className="grid gap-4 lg:grid-cols-3">
              <KPICard icon={<BarChart3 className="h-5 w-5 text-blue-500" />} label={t('totalDispositions')} value={ds?.total ?? '--'} color="text-blue-500" />
              <KPICard icon={<Bot className="h-5 w-5 text-green-500" />} label={t('autoRate')} value={ds ? `${Math.round(ds.auto_rate * 100)}%` : '--'} color="text-green-500" />
              <KPICard icon={<UserCheck className="h-5 w-5 text-orange-500" />} label={t('humanRate')} value={ds ? `${Math.round(ds.human_rate * 100)}%` : '--'} color="text-orange-500" />
            </section>

            <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
              <DispositionCard icon={<Bot className="h-4 w-4" />} label={t('autoRepair')} count={ds?.auto_repair ?? 0} tone="green" />
              <DispositionCard icon={<UserCheck className="h-4 w-4" />} label={t('humanApproved')} count={ds?.human_approved ?? 0} tone="orange" />
              <DispositionCard icon={<Wrench className="h-4 w-4" />} label={t('manualResolved')} count={ds?.manual_resolved ?? 0} tone="purple" />
              <DispositionCard icon={<ShieldCheck className="h-4 w-4" />} label={t('coldStartTrust')} count={ds?.cold_start_trust ?? 0} tone="blue" />
            </section>

            {pcts && (
              <section className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <p className="mb-3 text-xs font-bold uppercase tracking-wider text-muted-foreground">{t('dispositionBreakdown')}</p>
                <div className="flex h-4 overflow-hidden rounded-[7px] bg-muted">
                  {pcts.auto > 0 && <div className="bg-green-500" style={{ width: `${pcts.auto}%` }} title={`${t('autoRepair')}: ${pcts.auto}%`} />}
                  {pcts.cold > 0 && <div className="bg-blue-500" style={{ width: `${pcts.cold}%` }} title={`${t('coldStartTrust')}: ${pcts.cold}%`} />}
                  {pcts.human > 0 && <div className="bg-orange-500" style={{ width: `${pcts.human}%` }} title={`${t('humanApproved')}: ${pcts.human}%`} />}
                  {pcts.manual > 0 && <div className="bg-purple-500" style={{ width: `${pcts.manual}%` }} title={`${t('manualResolved')}: ${pcts.manual}%`} />}
                </div>
                <div className="mt-2 flex flex-wrap items-center gap-4 text-[10px] text-muted-foreground">
                  <Legend color="bg-green-500" label={`${t('autoRepair')} ${pcts.auto}%`} />
                  <Legend color="bg-blue-500" label={`${t('coldStartTrust')} ${pcts.cold}%`} />
                  <Legend color="bg-orange-500" label={`${t('humanApproved')} ${pcts.human}%`} />
                  <Legend color="bg-purple-500" label={`${t('manualResolved')} ${pcts.manual}%`} />
                </div>
              </section>
            )}

            {disposition?.by_anomaly && disposition.by_anomaly.length > 0 && (
              <section className="overflow-hidden rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <p className="mb-3 text-xs font-bold uppercase tracking-wider text-muted-foreground">{t('byAnomalyType')}</p>
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[720px]">
                    <thead>
                      <tr className="text-[10px] uppercase tracking-wider text-muted-foreground">
                        <th className="pb-2 text-left font-medium">{t('anomalyKey')}</th>
                        <th className="pb-2 text-right font-medium">{t('autoRepair')}</th>
                        <th className="pb-2 text-right font-medium">{t('humanApproved')}</th>
                        <th className="pb-2 text-right font-medium">{t('manualResolved')}</th>
                        <th className="pb-2 text-right font-medium">{t('coldStartTrust')}</th>
                        <th className="pb-2 text-right font-medium">{t('totalDispositions')}</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                      {disposition.by_anomaly.map(item => (
                        <tr key={item.anomaly_key}>
                          <td className="py-2 text-xs font-mono">{item.alert_name || item.anomaly_key.slice(0, 12)}</td>
                          <td className="py-2 text-right text-xs font-semibold text-green-500">{item.disposition.auto_repair}</td>
                          <td className="py-2 text-right text-xs font-semibold text-orange-500">{item.disposition.human_approved}</td>
                          <td className="py-2 text-right text-xs font-semibold text-purple-500">{item.disposition.manual_resolved}</td>
                          <td className="py-2 text-right text-xs font-semibold text-blue-500">{item.disposition.cold_start_trust}</td>
                          <td className="py-2 text-right text-xs font-bold">{item.disposition.total}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </section>
            )}

            <section className="grid gap-4 lg:grid-cols-2">
              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <p className="mb-3 text-xs font-bold uppercase tracking-wider text-muted-foreground">{t('incidentSummary')}</p>
                <div className="grid grid-cols-3 gap-3">
                  <MiniStat label={t('total')} value={incidentTotal || '--'} />
                  <MiniStat label={t('resolved')} value={resolvedCount ?? '--'} />
                  <MiniStat label={t('unresolved')} value={unresolvedCount ?? '--'} />
                </div>
              </div>
              <div className="rounded-[7px] border border-border bg-card p-4 shadow-sm">
                <p className="mb-3 text-xs font-bold uppercase tracking-wider text-muted-foreground">{t('resolutionStats')}</p>
                <div className="grid grid-cols-2 gap-3">
                  <MiniStat label={t('resolutionRate')} value={incidentResolvedRate != null ? `${incidentResolvedRate}%` : '--'} />
                  <MiniStat label={t('avgResolutionTime')} value={avgResolutionTime ?? '--'} />
                </div>
              </div>
            </section>

            {!ds || ds.total === 0 ? (
              <div className="flex flex-col items-center justify-center rounded-[7px] border border-border bg-card p-8 text-muted-foreground shadow-sm">
                <Inbox className="mb-2 h-8 w-8 opacity-40" />
                <p className="text-sm">{allZeroSignal ? t('noDataNeedsReview') : t('noData')}</p>
              </div>
            ) : null}
          </>
        )}
      </div>
    </AppLayout>
  )
}

function SectionHeader({ icon, title, subtitle }: { icon: ReactNode; title: string; subtitle: string }) {
  return (
    <div className="flex items-start gap-2">
      <span className="inline-flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-[7px] bg-muted text-muted-foreground">
        {icon}
      </span>
      <div className="min-w-0">
        <h2 className="text-sm font-semibold text-foreground">{title}</h2>
        <p className="mt-0.5 text-xs leading-5 text-muted-foreground">{subtitle}</p>
      </div>
    </div>
  )
}

function CommandMetric({ icon, label, value, detail, tone }: { icon: ReactNode; label: string; value: string | number; detail: string; tone: 'ok' | 'warn' | 'neutral' }) {
  const toneClass = tone === 'ok' ? 'text-green-600 bg-green-50 border-green-200' : tone === 'warn' ? 'text-amber-700 bg-amber-50 border-amber-200' : 'text-blue-600 bg-blue-50 border-blue-200'
  return (
    <div className="min-w-0 rounded-[7px] border border-border bg-background p-3">
      <div className="flex items-center justify-between gap-2">
        <span className={cn('inline-flex h-7 w-7 items-center justify-center rounded-[7px] border', toneClass)}>{icon}</span>
        <p className="text-2xl font-semibold tabular-nums text-foreground">{value}</p>
      </div>
      <p className="mt-2 text-xs font-semibold text-foreground">{label}</p>
      <p className="mt-1 text-[11px] leading-4 text-muted-foreground">{detail}</p>
    </div>
  )
}

function NextActionLine({ label, active }: { label: string; active: boolean }) {
  return (
    <div className="flex items-center gap-2 text-xs text-amber-950">
      {active ? <Clock3 className="h-3.5 w-3.5 text-amber-700" /> : <CheckCircle2 className="h-3.5 w-3.5 text-green-600" />}
      <span className={cn(!active && 'text-muted-foreground')}>{label}</span>
    </div>
  )
}

function StatusPill({ ok, okLabel, failLabel }: { ok: boolean; okLabel: string; failLabel: string }) {
  return (
    <span className={cn(
      'inline-flex w-fit items-center gap-1 rounded-[7px] border px-2 py-1 text-[11px] font-semibold',
      ok ? 'border-green-200 bg-green-50 text-green-700' : 'border-amber-200 bg-amber-50 text-amber-700'
    )}>
      {ok ? <CheckCircle2 className="h-3.5 w-3.5" /> : <AlertTriangle className="h-3.5 w-3.5" />}
      {ok ? okLabel : failLabel}
    </span>
  )
}

function CadenceCard({ card, chips }: { card: ReportStatusCard; chips: string[] }) {
  const progress = Math.max(0, Math.min(card.completion_percent, 100))
  return (
    <div className="min-w-0 rounded-[7px] border border-border bg-background p-3">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <p className="text-sm font-semibold text-foreground">{card.display_name}</p>
          <p className="text-[11px] text-muted-foreground">{card.owner_agent} · {card.delivery_state}</p>
        </div>
        <span className="text-lg font-semibold tabular-nums text-foreground">{progress}%</span>
      </div>
      <div className="mt-3 h-2 overflow-hidden rounded-[7px] bg-muted">
        <div className="h-full rounded-[7px] bg-blue-500" style={{ width: `${progress}%` }} />
      </div>
      <div className="mt-3 flex flex-wrap gap-1.5 text-[10px] text-muted-foreground">
        {chips.map(label => <Chip key={label} label={label} />)}
      </div>
      <p className="mt-3 text-xs leading-5 text-muted-foreground">{card.next_gate}</p>
    </div>
  )
}

function FunnelBar({ label, value, max, tone }: { label: string; value: number; max: number; tone: 'ok' | 'warn' | 'danger' | 'neutral' }) {
  const width = Math.max(4, Math.min(100, Math.round((value / Math.max(max, 1)) * 100)))
  const color = tone === 'ok' ? 'bg-green-500' : tone === 'warn' ? 'bg-amber-500' : tone === 'danger' ? 'bg-red-500' : 'bg-blue-500'
  return (
    <div className="grid gap-2 sm:grid-cols-[150px_1fr_70px] sm:items-center">
      <span className="text-xs font-medium text-foreground">{label}</span>
      <div className="h-2 overflow-hidden rounded-[7px] bg-muted">
        <div className={cn('h-full rounded-[7px]', color)} style={{ width: `${width}%` }} />
      </div>
      <span className="text-right text-sm font-semibold tabular-nums text-foreground">{value}</span>
    </div>
  )
}

function AssetCard({ label, value, detail, danger = false }: { label: string; value: string | number; detail: string; danger?: boolean }) {
  return (
    <div className={cn('rounded-[7px] border p-3', danger ? 'border-amber-200 bg-amber-50' : 'border-border bg-background')}>
      <p className="text-xs font-medium text-muted-foreground">{label}</p>
      <p className="mt-1 text-2xl font-semibold tabular-nums text-foreground">{value}</p>
      <p className="mt-1 text-[11px] leading-4 text-muted-foreground">{detail}</p>
    </div>
  )
}

function AssetMiniLine({ label, value, detail }: { label: string; value: string; detail: string }) {
  return (
    <div className="min-w-0 rounded-[7px] border border-border bg-card p-2">
      <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">{label}</p>
      <p className="mt-1 text-xs font-semibold text-foreground">{value}</p>
      <p className="mt-1 break-all text-[10px] leading-4 text-muted-foreground">{detail}</p>
    </div>
  )
}

function ChecklistBlock({ title, items }: { title: string; items: string[] }) {
  return (
    <div className="rounded-[7px] border border-border bg-card p-2">
      <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">{title}</p>
      <div className="mt-2 grid gap-1">
        {items.map(item => (
          <div key={item} className="flex min-w-0 items-start gap-1.5 text-[10px] leading-4 text-muted-foreground">
            <CheckCircle2 className="mt-0.5 h-3 w-3 flex-shrink-0 text-blue-500" />
            <span className="break-words">{item}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

function AgentCard({ agent, chips }: { agent: AgentStatusReport; chips: string[] }) {
  const progress = agent.work_units_total > 0 ? Math.round((agent.work_units_done / agent.work_units_total) * 100) : 0
  return (
    <div className="min-w-0 rounded-[7px] border border-border bg-background p-3">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <p className="text-sm font-semibold text-foreground">{agent.display_name}</p>
          <p className="text-[11px] text-muted-foreground">{agent.current_state}</p>
        </div>
        <span className="text-lg font-semibold tabular-nums text-foreground">{progress}%</span>
      </div>
      <p className="mt-2 text-xs leading-5 text-muted-foreground">{agent.primary_role}</p>
      <div className="mt-3 h-2 overflow-hidden rounded-[7px] bg-muted">
        <div className={cn('h-full rounded-[7px]', progress >= 80 ? 'bg-green-500' : 'bg-amber-500')} style={{ width: `${progress}%` }} />
      </div>
      <div className="mt-3 flex flex-wrap gap-1.5 text-[10px] text-muted-foreground">
        {chips.map(label => <Chip key={label} label={label} />)}
      </div>
    </div>
  )
}

function KPICard({ icon, label, value, color }: { icon: ReactNode; label: string; value: string | number; color: string }) {
  return (
    <div className="flex items-center gap-4 rounded-[7px] border border-border bg-card p-5 shadow-sm">
      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[7px] bg-muted">
        {icon}
      </div>
      <div className="min-w-0">
        <p className={cn('text-2xl font-bold tabular-nums', color)}>{value}</p>
        <p className="mt-0.5 text-[10px] uppercase tracking-wider text-muted-foreground">{label}</p>
      </div>
    </div>
  )
}

function DispositionCard({ icon, label, count, tone }: { icon: ReactNode; label: string; count: number; tone: 'green' | 'orange' | 'purple' | 'blue' }) {
  const styles = {
    green: 'border-green-500/25 bg-green-500/10 text-green-600',
    orange: 'border-orange-500/25 bg-orange-500/10 text-orange-600',
    purple: 'border-purple-500/25 bg-purple-500/10 text-purple-600',
    blue: 'border-blue-500/25 bg-blue-500/10 text-blue-600',
  }[tone]
  return (
    <div className={cn('rounded-[7px] border p-4 text-center shadow-sm', styles)}>
      <div className="mb-2 flex items-center justify-center gap-1.5">
        {icon}
        <span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>
      </div>
      <p className="text-3xl font-bold tabular-nums">{count}</p>
    </div>
  )
}

function MiniStat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="text-center">
      <p className="text-xl font-bold tabular-nums">{value}</p>
      <p className="mt-0.5 text-[10px] text-muted-foreground">{label}</p>
    </div>
  )
}

function Chip({ label }: { label: string }) {
  return (
    <span className="rounded-[7px] border border-border bg-card px-2 py-1 text-[10px] leading-none text-muted-foreground">
      {label}
    </span>
  )
}

function Legend({ color, label }: { color: string; label: string }) {
  return (
    <span className="flex items-center gap-1">
      <span className={cn('h-2 w-2 rounded-full', color)} />
      {label}
    </span>
  )
}

function EmptyPanel({ label }: { label: string }) {
  return (
    <div className="rounded-[7px] border border-dashed border-border bg-background p-6 text-center text-sm text-muted-foreground">
      {label}
    </div>
  )
}
