awoooi/apps/web/src/components/neural-command/NeuralPreFlight.tsx

'use client'

/**
 * NeuralPreFlight - SSH_COMMAND 安全預審面板
 * ===========================================
 * 顯示 8 項安全審查結果 + 通過狀態 + 功能開關
 * Sprint 3 指揮鏈可視化 + T1-T7 任務進度
 */

import { useTranslations } from 'next-intl'
import { CheckCircle2, AlertTriangle, ShieldCheck, ArrowRight, Shield, Database, Cpu, Key, Lock, GitBranch, Activity } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AutoRepairStats, PlaybookItem } from './types'

// =============================================================================
// Audit items — 8 checks across A/B/C
// =============================================================================

interface AuditCheck {
  id: string
  category: 'A' | 'B' | 'C'
  labelKey: string
  descKey: string
  status: 'fixed' | 'pending' | 'warning'
}

const AUDIT_CHECKS: AuditCheck[] = [
  { id: 'A1', category: 'A', labelKey: 'checkA1Label', descKey: 'checkA1Desc', status: 'fixed' },
  { id: 'A2', category: 'A', labelKey: 'checkA2Label', descKey: 'checkA2Desc', status: 'fixed' },
  { id: 'A3', category: 'A', labelKey: 'checkA3Label', descKey: 'checkA3Desc', status: 'fixed' },
  { id: 'B1', category: 'B', labelKey: 'checkB1Label', descKey: 'checkB1Desc', status: 'fixed' },
  { id: 'B2', category: 'B', labelKey: 'checkB2Label', descKey: 'checkB2Desc', status: 'fixed' },
  { id: 'C1', category: 'C', labelKey: 'checkC1Label', descKey: 'checkC1Desc', status: 'fixed' },
  { id: 'C2', category: 'C', labelKey: 'checkC2Label', descKey: 'checkC2Desc', status: 'fixed' },
  { id: 'C3', category: 'C', labelKey: 'checkC3Label', descKey: 'checkC3Desc', status: 'fixed' },
]

const CATEGORY_META = {
  A: { label: '安全性', color: 'text-orange-500', bg: 'bg-orange-500/10', border: 'border-orange-500/25' },
  B: { label: '可觀測性', color: 'text-blue-500', bg: 'bg-blue-500/10', border: 'border-blue-500/25' },
  C: { label: '系統架構', color: 'text-purple-500', bg: 'bg-purple-500/10', border: 'border-purple-500/25' },
}

// =============================================================================
// Component
// =============================================================================

interface Props {
  stats: AutoRepairStats | null
  playbooks: PlaybookItem[]
}

export function NeuralPreFlight({ stats, playbooks }: Props) {
  const t = useTranslations('neuralCommand')

  const totalChecks = AUDIT_CHECKS.length
  const fixedChecks = AUDIT_CHECKS.filter(c => c.status === 'fixed').length
  const allPassed = fixedChecks === totalChecks

  const categories = ['A', 'B', 'C'] as const

  return (
    <div className="p-6 space-y-5">

      {/* ── Header meta ── */}
      <div className="flex items-start justify-between">
        <div>
          <h2 className="text-base font-semibold">{t('preFlightTitle')}</h2>
          <p className="text-xs text-muted-foreground mt-0.5">{t('preFlightSubtitle')}</p>
        </div>
        <div className="flex gap-5 text-right">
          <div className="text-xs text-muted-foreground">
            {t('progress')}<br />
            <span className="text-base font-bold text-foreground">{fixedChecks} / {totalChecks}</span>
          </div>
          <div className="text-xs text-muted-foreground">
            {t('riskLevel')}<br />
            <span className="text-base font-bold text-foreground">{t('riskLow')}</span>
          </div>
          <div className="text-xs text-muted-foreground">
            {t('auditStatus')}<br />
            <span className={cn('text-base font-bold', allPassed ? 'text-green-500' : 'text-orange-500')}>
              {allPassed ? t('passed') : t('pending')}
            </span>
          </div>
        </div>
      </div>

      {/* ── Pass banner ── */}
      {allPassed && (
        <div className="flex items-center gap-3 px-4 py-3 rounded-xl border border-green-500/30 bg-green-500/5">
          <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
          <div>
            <p className="text-sm font-semibold text-green-600 dark:text-green-400">{t('passBannerTitle')}</p>
            <p className="text-xs text-green-600/70 dark:text-green-500/70 mt-0.5">{t('passBannerDesc')}</p>
          </div>
        </div>
      )}

      {/* ── Three-column audit ── */}
      <div className="grid grid-cols-3 gap-4">
        {categories.map(cat => {
          const meta = CATEGORY_META[cat]
          const checks = AUDIT_CHECKS.filter(c => c.category === cat)
          return (
            <div key={cat} className="rounded-xl border border-border bg-card p-4">
              <div className="flex items-center gap-2 mb-3">
                <span className={cn('text-xs font-bold px-2 py-0.5 rounded-full border', meta.color, meta.bg, meta.border)}>
                  {cat}
                </span>
                <span className="text-sm font-semibold">{meta.label}</span>
              </div>
              <div className="space-y-2">
                {checks.map(check => (
                  <div
                    key={check.id}
                    className={cn(
                      'flex items-start justify-between gap-2 p-2.5 rounded-lg border',
                      check.status === 'fixed'
                        ? 'border-l-2 border-l-green-500 border-border bg-muted/30'
                        : 'border-l-2 border-l-orange-500 border-border bg-orange-500/5',
                    )}
                  >
                    <div className="min-w-0">
                      <p className="text-xs font-semibold truncate">{t(check.labelKey)}</p>
                      <p className="text-[11px] text-muted-foreground mt-0.5 leading-tight">{t(check.descKey)}</p>
                    </div>
                    <span className={cn(
                      'text-[10px] font-bold flex-shrink-0 mt-0.5',
                      check.status === 'fixed' ? 'text-green-500' : 'text-orange-500',
                    )}>
                      {check.status === 'fixed' ? t('statusFixed') : t('statusPending')}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )
        })}
      </div>

      {/* ── Feature toggles ── */}
      <div className="rounded-xl border border-border bg-card p-4">
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
          {t('featureToggles')}
        </p>
        <div className="grid grid-cols-2 gap-2">
          {AUDIT_CHECKS.map(check => (
            <div key={check.id} className="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-muted/40 border border-border">
              <div className="min-w-0">
                <p className="text-xs font-medium truncate">{check.id}: {t(check.labelKey)}</p>
                <p className="text-[10px] text-muted-foreground truncate">{t(check.descKey)}</p>
              </div>
              {/* Toggle visual — always ON (reflects actual state) */}
              <div className="w-9 h-5 rounded-full bg-green-500 relative flex-shrink-0">
                <div className="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-white shadow-sm" />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Sprint 3 指揮鏈可視化 ── */}
      <div className="rounded-xl border border-border bg-card p-4">
        <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-4">
          Sprint 3 SSH 指揮權鏈 — 神經嫁接架構
        </p>

        {/* Chain nodes */}
        <div className="flex items-center justify-between gap-2 mb-5 overflow-x-auto pb-1">
          {[
            { icon: Shield, label: 'SSH Gateway', sub: 'Port 22 + 白名單', color: 'text-orange-500', bg: 'bg-orange-500/10', border: 'border-orange-500/30' },
            { icon: Key, label: 'URI 解析器', sub: 'openclaw:// ansible:// ssh://', color: 'text-blue-500', bg: 'bg-blue-500/10', border: 'border-blue-500/30' },
            { icon: Lock, label: 'Shell 防注入', sub: '; | && $() 阻斷', color: 'text-purple-500', bg: 'bg-purple-500/10', border: 'border-purple-500/30' },
            { icon: Cpu, label: 'Redis 冪等鎖', sub: 'repair_lock TTL 300s', color: 'text-green-500', bg: 'bg-green-500/10', border: 'border-green-500/30' },
            { icon: Database, label: 'Ansible Playbook DB', sub: '.188 控制節點 → .110', color: 'text-yellow-500', bg: 'bg-yellow-500/10', border: 'border-yellow-500/30' },
          ].map((node, i, arr) => {
            const Icon = node.icon
            return (
              <div key={node.label} className="flex items-center gap-2 flex-shrink-0">
                <div className={cn('rounded-xl border p-3 text-center min-w-[110px]', node.bg, node.border)}>
                  <Icon className={cn('w-5 h-5 mx-auto mb-1.5', node.color)} />
                  <p className={cn('text-[11px] font-bold', node.color)}>{node.label}</p>
                  <p className="text-[9px] text-muted-foreground mt-0.5 leading-tight">{node.sub}</p>
                </div>
                {i < arr.length - 1 && (
                  <ArrowRight className="w-4 h-4 text-muted-foreground/40 flex-shrink-0" />
                )}
              </div>
            )
          })}
        </div>

        {/* T1-T7 任務進度 */}
        <div className="grid grid-cols-7 gap-1.5">
          {[
            { id: 'T1', label: 'URI 解析器', desc: 'Shell 防注入', done: true },
            { id: 'T2', label: 'known_hosts', desc: 'K8s Secret', done: true },
            { id: 'T3', label: '三條執行路徑', desc: 'HostRepairAgent', done: false },
            { id: 'T4', label: 'Redis 鎖', desc: '冪等保護', done: false },
            { id: 'T5', label: 'AuditLog', desc: 'Langfuse Trace', done: false },
            { id: 'T6', label: 'Service 整合', desc: '成功率回饋', done: false },
            { id: 'T7', label: 'Ansible 部署', desc: 'E2E 驗證', done: false },
          ].map(task => (
            <div
              key={task.id}
              className={cn(
                'rounded-lg border p-2 text-center',
                task.done
                  ? 'border-green-500/40 bg-green-500/8'
                  : 'border-border bg-muted/30',
              )}
            >
              <p className={cn('text-[11px] font-bold', task.done ? 'text-green-500' : 'text-muted-foreground')}>{task.id}</p>
              <p className="text-[10px] font-medium mt-0.5 leading-tight">{task.label}</p>
              <p className="text-[9px] text-muted-foreground mt-0.5 leading-tight">{task.desc}</p>
              {task.done && <p className="text-[9px] font-bold text-green-500 mt-1">✓ 完成</p>}
            </div>
          ))}
        </div>

        {/* Implementation metrics */}
        <div className="grid grid-cols-4 gap-3 mt-4">
          {[
            { label: '實作總速度', value: '28%', sub: 'T1-T2 完成', color: 'text-blue-500' },
            { label: '安全防禦等級', value: 'A', sub: '注入/known_hosts/鎖', color: 'text-green-500' },
            { label: '可觀測性', value: '計劃中', sub: 'T5 Langfuse+AuditLog', color: 'text-orange-500' },
            { label: '架構健康度', value: '優良', sub: 'URI scheme 設計', color: 'text-purple-500' },
          ].map(m => (
            <div key={m.label} className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border bg-muted/20">
              <div>
                <p className={cn('text-lg font-bold leading-none tabular-nums', m.color)}>{m.value}</p>
                <p className="text-[10px] text-muted-foreground mt-1">{m.label}</p>
                <p className="text-[9px] text-muted-foreground/70">{m.sub}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Playbook count summary ── */}
      <div className="grid grid-cols-4 gap-3">
        {[
          { label: t('approvedPlaybooks'), value: stats?.approved_playbooks ?? playbooks.length, color: 'text-green-500' },
          { label: t('highQuality'),       value: stats?.high_quality_playbooks ?? 0,            color: 'text-blue-500' },
          { label: t('totalExecutions'),   value: stats?.total_executions ?? 0,                   color: 'text-orange-500' },
          { label: t('successRate'),       value: `${Math.round((stats?.overall_success_rate ?? 0) * 100)}%`, color: 'text-purple-500' },
        ].map(({ label, value, color }) => (
          <div key={label} className="rounded-xl border border-border bg-card p-4 text-center">
            <p className={cn('text-2xl font-bold tabular-nums', color)}>{value}</p>
            <p className="text-[10px] text-muted-foreground uppercase tracking-wider mt-1">{label}</p>
          </div>
        ))}
      </div>
    </div>
  )
}