'use client'

/**
 * AgentMarketTab — AI Agent 市場治理 Tab
 * =====================================
 * 消費：GET /api/v1/agents/market-governance-snapshot
 *
 * 只讀最新 committed governance snapshot；不提供任何批准或執行操作。
 */

import { useEffect, useState } from 'react'
import { AlertTriangle, Ban, CalendarClock, CheckCircle2, ListChecks, Lock, RefreshCw, ShieldCheck } from 'lucide-react'
import { useTranslations } from 'next-intl'
import { GlassCard } from '@/components/ui/glass-card'
import { StatusOrb } from '@/components/ui/status-orb'
import { apiClient, type AgentMarketGovernanceSnapshot } from '@/lib/api-client'

// =============================================================================
// Helpers
// =============================================================================

function formatDateTime(value: string): string {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '--'
  return date.toLocaleString('zh-TW', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// =============================================================================
// Small UI
// =============================================================================

function MetricCard({ label, value, tone = 'neutral' }: { label: string; value: number | string; tone?: 'neutral' | 'ok' | 'warn' }) {
  const color = tone === 'ok' ? '#22C55E' : tone === 'warn' ? '#F59E0B' : '#141413'
  return (
    <GlassCard variant="subtle" padding="md" className="min-w-0">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={{
          fontFamily: "'DM Mono', monospace",
          fontSize: 10,
          color: '#87867f',
          textTransform: 'uppercase',
          letterSpacing: '0.5px',
        }}>
          {label}
        </span>
        <span style={{
          fontFamily: 'Syne, sans-serif',
          fontSize: 26,
          fontWeight: 700,
          color,
          lineHeight: 1,
        }}>
          {value}
        </span>
      </div>
    </GlassCard>
  )
}

function CandidatePill({ value, muted = false }: { value: string; muted?: boolean }) {
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      minHeight: 22,
      padding: '3px 7px',
      borderRadius: 5,
      border: `0.5px solid ${muted ? '#e0ddd4' : '#d9775740'}`,
      background: muted ? '#faf9f3' : 'rgba(217,119,87,0.06)',
      color: muted ? '#87867f' : '#141413',
      fontFamily: "'DM Mono', monospace",
      fontSize: 10,
      lineHeight: 1.3,
      maxWidth: '100%',
      overflowX: 'auto',
      overflowY: 'hidden',
      overflowWrap: 'normal',
      whiteSpace: 'nowrap',
    }}>
      {value}
    </span>
  )
}

function CandidateGroup({ title, items, muted = false }: { title: string; items: string[]; muted?: boolean }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
      <div style={{
        fontFamily: 'Syne, sans-serif',
        fontSize: 12,
        fontWeight: 700,
        color: '#141413',
        textTransform: 'uppercase',
        letterSpacing: '0.7px',
      }}>
        {title}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
        {items.length > 0 ? items.map(item => (
          <CandidatePill key={item} value={item} muted={muted} />
        )) : (
          <CandidatePill value="--" muted />
        )}
      </div>
    </div>
  )
}

function PolicyGate({ label, approved }: { label: string; approved: number }) {
  const isApproved = approved > 0
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 10,
      padding: '9px 11px',
      border: '0.5px solid #e0ddd4',
      borderRadius: 7,
      background: '#fff',
      minWidth: 0,
    }}>
      <span style={{
        fontFamily: "'DM Mono', monospace",
        fontSize: 11,
        color: '#141413',
        lineHeight: 1.4,
        minWidth: 0,
      }}>
        {label}
      </span>
      <span style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 5,
        color: isApproved ? '#F59E0B' : '#22C55E',
        fontFamily: "'DM Mono', monospace",
        fontSize: 10,
        fontWeight: 700,
        whiteSpace: 'nowrap',
      }}>
        {isApproved ? <AlertTriangle size={12} /> : <Lock size={12} />}
        {approved}
      </span>
    </div>
  )
}

function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
      <span style={{
        fontFamily: "'DM Mono', monospace",
        fontSize: 10,
        color: '#87867f',
        textTransform: 'uppercase',
        letterSpacing: '0.5px',
      }}>
        {label}
      </span>
      <div style={{
        fontFamily: "'DM Mono', monospace",
        fontSize: 11,
        color: '#141413',
        minWidth: 0,
      }}>
        {children}
      </div>
    </div>
  )
}

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

export function AgentMarketTab() {
  const t = useTranslations('governance.agentMarket')
  const [snapshot, setSnapshot] = useState<AgentMarketGovernanceSnapshot | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  const fetchSnapshot = () => {
    setLoading(true)
    apiClient.getAgentMarketGovernanceSnapshot()
      .then((data: AgentMarketGovernanceSnapshot) => {
        setSnapshot(data)
        setError(false)
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    fetchSnapshot()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  if (loading) {
    return (
      <div style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }} className="agent-market-kpi-grid">
        {[0, 1, 2, 3].map(i => (
          <GlassCard key={i} variant="subtle" padding="md">
            <div style={{ width: 84, height: 10, borderRadius: 4, background: '#e0ddd4', animation: 'pulse 1.5s infinite', marginBottom: 10, animationDelay: `${i * 0.08}s` }} />
            <div style={{ width: 52, height: 26, borderRadius: 4, background: '#e0ddd4', animation: 'pulse 1.5s infinite' }} />
          </GlassCard>
        ))}
      </div>
    )
  }

  if (error || !snapshot) {
    return (
      <div style={{ padding: 20 }}>
        <GlassCard variant="subtle" padding="lg">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: '24px 0' }}>
            <AlertTriangle size={24} style={{ color: '#F59E0B' }} />
            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 12, color: '#87867f' }}>
              {t('error')}
            </span>
            <button
              onClick={fetchSnapshot}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                padding: '6px 14px',
                border: '0.5px solid #d97757',
                borderRadius: 6,
                background: 'transparent',
                color: '#d97757',
                cursor: 'pointer',
                fontFamily: "'DM Mono', monospace",
                fontSize: 11,
              }}
            >
              <RefreshCw size={12} />
              {t('retry')}
            </button>
          </div>
        </GlassCard>
      </div>
    )
  }

  const summary = snapshot.summary
  const allApprovals =
    summary.priority_upgrades_approved +
    summary.market_scorecard_updates_approved +
    summary.replay_candidates_approved +
    summary.sdk_installations_approved +
    summary.paid_api_calls_approved +
    summary.production_changes_approved +
    summary.shadow_or_canary_approved +
    summary.replacement_decisions_approved
  const watchHealth = snapshot.market_watch_health
  const watchHealthHealthy = watchHealth.status === 'healthy'

  return (
    <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
            <div style={{
              width: 34,
              height: 34,
              borderRadius: 8,
              border: '0.5px solid #22C55E40',
              background: 'rgba(34,197,94,0.08)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}>
              <ShieldCheck size={17} style={{ color: '#22C55E' }} />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 3 }}>
                <StatusOrb status={allApprovals === 0 ? 'healthy' : 'warning'} size="sm" glow />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 15, fontWeight: 700, color: '#141413' }}>
                  {t('title')}
                </span>
              </div>
              <div style={{
                fontFamily: "'DM Mono', monospace",
                fontSize: 11,
                color: '#87867f',
                maxWidth: '100%',
                overflowX: 'auto',
                overflowY: 'hidden',
                overflowWrap: 'normal',
                whiteSpace: 'nowrap',
              }}>
                {snapshot.current_decision}
              </div>
            </div>
          </div>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
            {t('generatedAt')} {formatDateTime(snapshot.generated_at)}
          </div>
        </div>
      </GlassCard>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 12,
      }} className="agent-market-kpi-grid">
        <MetricCard label={t('metrics.candidates')} value={summary.candidate_count} />
        <MetricCard label={t('metrics.sources')} value={summary.source_count} />
        <MetricCard label={t('metrics.blocked')} value={summary.blocked_from_integration} tone="warn" />
        <MetricCard label={t('metrics.prescreenReady')} value={summary.eligible_for_market_scorecard_prescreen} tone="ok" />
      </div>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            {watchHealthHealthy ? (
              <ShieldCheck size={14} style={{ color: '#22C55E' }} />
            ) : (
              <AlertTriangle size={14} style={{ color: '#F59E0B' }} />
            )}
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('health.title')}
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            gap: 12,
          }} className="agent-market-health-grid">
            <DetailRow label={t('health.status')}>
              <span style={{ color: watchHealthHealthy ? '#22C55E' : '#F59E0B', fontWeight: 700 }}>
                {t(`health.statuses.${watchHealth.status}`)}
              </span>
            </DetailRow>
            <DetailRow label={t('health.freshnessSla')}>
              {t('health.slaValue', {
                slaHours: watchHealth.freshness_sla_hours,
                graceHours: watchHealth.stale_grace_hours,
              })}
            </DetailRow>
            <DetailRow label={t('health.staleAfter')}>
              {formatDateTime(watchHealth.stale_after)}
            </DetailRow>
            <DetailRow label={t('health.priorityGate')}>
              {watchHealth.source_failures_block_priority_upgrade ? t('health.blocked') : t('health.clear')}
            </DetailRow>
            <DetailRow label={t('health.blockedIntegrations')}>
              {watchHealth.blocked_from_integration}
            </DetailRow>
            <DetailRow label={t('health.blockers')}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                {watchHealth.operator_blockers.length > 0 ? (
                  watchHealth.operator_blockers.map(blocker => (
                    <CandidatePill key={blocker} value={blocker} muted />
                  ))
                ) : (
                  <CandidatePill value={t('health.noBlockers')} />
                )}
              </div>
            </DetailRow>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <CalendarClock size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('cadence.title')}
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 12,
          }} className="agent-market-cadence-grid">
            <DetailRow label={t('cadence.workflow')}>
              <CandidatePill value={snapshot.evaluation_cadence.workflow} />
            </DetailRow>
            <DetailRow label={t('cadence.schedule')}>
              <CandidatePill value={snapshot.evaluation_cadence.schedule} />
            </DetailRow>
            <DetailRow label={t('cadence.nextRun')}>
              {formatDateTime(snapshot.evaluation_cadence.next_scheduled_run_at)}
            </DetailRow>
            <DetailRow label={t('cadence.sourcePolicy')}>
              <CandidatePill value={snapshot.evaluation_cadence.primary_source_policy} />
            </DetailRow>
            <DetailRow label={t('cadence.reviewGate')}>
              <CandidatePill value={snapshot.evaluation_cadence.operator_review_gate} muted />
            </DetailRow>
            <DetailRow label={t('cadence.triggerModes')}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                {snapshot.evaluation_cadence.trigger_modes.map(mode => (
                  <CandidatePill key={mode} value={mode} />
                ))}
              </div>
            </DetailRow>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
          gap: 18,
        }} className="agent-market-groups-grid">
          <CandidateGroup title={t('groups.baseline')} items={snapshot.candidate_groups.production_baseline} />
          <CandidateGroup title={t('groups.blocked')} items={snapshot.candidate_groups.replay_or_integration_blocked} muted />
          <CandidateGroup title={t('groups.watchOnly')} items={snapshot.candidate_groups.watch_only_candidates} />
          <CandidateGroup title={t('groups.prescreenReady')} items={snapshot.candidate_groups.watch_only_scorecard_prescreen_ready} />
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <ListChecks size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('decisionQueue.title')}
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
            gap: 10,
          }} className="agent-market-decision-grid">
            {snapshot.operator_decision_queue.map(item => {
              const activeBoundaries = Object.entries(item.approval_boundary)
                .filter(([, required]) => required)
                .map(([key]) => key)
              return (
                <div
                  key={item.candidate_id}
                  style={{
                    minWidth: 0,
                    padding: 12,
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 7,
                    background: '#fff',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 9,
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 13,
                        fontWeight: 700,
                        color: '#141413',
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      }}>
                        {item.display_name}
                      </span>
                      <CandidatePill value={item.candidate_id} muted />
                    </div>
                    <span style={{
                      color: item.queue_status === 'baseline_protected' ? '#22C55E' : '#F59E0B',
                      fontFamily: "'DM Mono', monospace",
                      fontSize: 10,
                      fontWeight: 700,
                      whiteSpace: 'nowrap',
                    }}>
                      {t('decisionQueue.priority')} {item.priority}
                    </span>
                  </div>

                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
                    gap: 8,
                  }} className="agent-market-status-detail-grid">
                    <DetailRow label={t('decisionQueue.status')}>
                      <CandidatePill value={t(`decisionQueue.statuses.${item.queue_status}`)} />
                    </DetailRow>
                    <DetailRow label={t('decisionQueue.nextAction')}>
                      <CandidatePill value={item.recommended_action} muted />
                    </DetailRow>
                  </div>

                  <DetailRow label={t('decisionQueue.approvalBoundary')}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {activeBoundaries.length > 0 ? (
                        activeBoundaries.map(key => (
                          <CandidatePill key={key} value={t(`decisionQueue.boundaries.${key}`)} muted />
                        ))
                      ) : (
                        <CandidatePill value={t('decisionQueue.none')} muted />
                      )}
                    </div>
                  </DetailRow>

                  <DetailRow label={t('decisionQueue.riskNotes')}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {item.risk_notes.length > 0 ? (
                        item.risk_notes.map(note => <CandidatePill key={note} value={note} muted />)
                      ) : (
                        <CandidatePill value={t('decisionQueue.none')} muted />
                      )}
                    </div>
                  </DetailRow>

                  <DetailRow label={t('decisionQueue.evidence')}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {item.evidence_refs.length > 0 ? (
                        item.evidence_refs.map(ref => <CandidatePill key={ref} value={ref} />)
                      ) : (
                        <CandidatePill value={t('decisionQueue.none')} muted />
                      )}
                    </div>
                  </DetailRow>
                </div>
              )
            })}
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <ShieldCheck size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('matrix.title')}
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
            gap: 10,
          }} className="agent-market-status-grid">
            {snapshot.candidate_statuses.map(candidate => {
              const evidence = [
                candidate.evidence.latest_smoke_model,
                candidate.evidence.latest_replay_summary,
                candidate.evidence.latest_smoke_gate,
              ].filter((item): item is string => Boolean(item))
              return (
                <div
                  key={candidate.candidate_id}
                  style={{
                    minWidth: 0,
                    padding: 12,
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 7,
                    background: '#fff',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 9,
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 13,
                        fontWeight: 700,
                        color: '#141413',
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      }}>
                        {candidate.display_name}
                      </span>
                      <CandidatePill value={candidate.candidate_id} muted />
                    </div>
                    <span style={{
                      color: candidate.gate_status === 'production_baseline' ? '#22C55E' : '#F59E0B',
                      fontFamily: "'DM Mono', monospace",
                      fontSize: 10,
                      fontWeight: 700,
                      whiteSpace: 'nowrap',
                    }}>
                      {t(`matrix.gateStatuses.${candidate.gate_status}`)}
                    </span>
                  </div>

                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
                    gap: 8,
                  }} className="agent-market-status-detail-grid">
                    <DetailRow label={t('matrix.role')}>
                      <CandidatePill value={candidate.role || t('matrix.none')} />
                    </DetailRow>
                    <DetailRow label={t('matrix.score')}>
                      {candidate.score === null ? t('matrix.noScore') : candidate.score.toFixed(4)}
                    </DetailRow>
                    <DetailRow label={t('matrix.currentGate')}>
                      <CandidatePill value={candidate.current_gate || t('matrix.none')} />
                    </DetailRow>
                    <DetailRow label={t('matrix.nextGate')}>
                      <CandidatePill value={candidate.required_next_gate || t('matrix.none')} muted />
                    </DetailRow>
                    <DetailRow label={t('matrix.runtimeApprovals')}>
                      {t('matrix.noRuntimeApprovals')}
                    </DetailRow>
                    <DetailRow label={t('matrix.blockers')}>
                      {candidate.operator_blockers.length}
                    </DetailRow>
                  </div>

                  <DetailRow label={t('matrix.evidence')}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {evidence.length > 0 ? (
                        evidence.map(item => <CandidatePill key={item} value={item} />)
                      ) : (
                        <CandidatePill value={t('matrix.noEvidence')} muted />
                      )}
                    </div>
                  </DetailRow>
                </div>
              )
            })}
          </div>
        </div>
      </GlassCard>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 12,
      }} className="agent-market-policy-grid">
        <GlassCard variant="subtle" padding="md" className="min-w-0">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <Ban size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('policy.title')}
              </span>
            </div>
            <div style={{ display: 'grid', gap: 7 }}>
              <PolicyGate label={t('policy.replacement')} approved={summary.replacement_decisions_approved} />
              <PolicyGate label={t('policy.replay')} approved={summary.replay_candidates_approved} />
              <PolicyGate label={t('policy.sdk')} approved={summary.sdk_installations_approved} />
              <PolicyGate label={t('policy.paidApi')} approved={summary.paid_api_calls_approved} />
              <PolicyGate label={t('policy.production')} approved={summary.production_changes_approved} />
              <PolicyGate label={t('policy.shadowCanary')} approved={summary.shadow_or_canary_approved} />
            </div>
          </div>
        </GlassCard>

        <GlassCard variant="subtle" padding="md" className="min-w-0">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 8 }}>
                <CheckCircle2 size={14} style={{ color: '#22C55E' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('allowed.title')}
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {snapshot.next_allowed_actions.map(action => (
                  <CandidatePill key={action} value={action} />
                ))}
              </div>
            </div>

            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 8 }}>
                <Lock size={14} style={{ color: '#F59E0B' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('forbidden.title')}
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {snapshot.forbidden_actions_without_new_approval.map(action => (
                  <CandidatePill key={action} value={action} muted />
                ))}
              </div>
            </div>
          </div>
        </GlassCard>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .agent-market-kpi-grid,
          .agent-market-health-grid,
          .agent-market-cadence-grid,
          .agent-market-decision-grid,
          .agent-market-status-grid,
          .agent-market-status-detail-grid,
          .agent-market-policy-grid,
          .agent-market-groups-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </div>
  )
}
