'use client'

/**
 * GovernancePage — AI 治理中樞 (/governance)
 * ============================================
 * PR 2: 頁面骨架 + Sidebar 入口 + 三 Tab 空殼
 * PR 3-5 將填入 SLO / 治理事件 / AI 待辦 真實內容
 *
 * 設計方向: Nothing.tech × Anthropic Warmth
 *   - ComplianceBadge 橫幅作為頁面頂部的治理狀態信號
 *   - 0.5px 邊框 / DM Mono 字體 / #d97757 橘紅 accent
 *
 * @created 2026-05-02 Claude Sonnet 4.6 — governance PR 2
 */

import { useTranslations } from 'next-intl'
import Link from 'next/link'
import {
  Activity,
  BrainCircuit,
  ClipboardList,
  Radar,
  ShieldCheck,
} from 'lucide-react'
import { AppLayout } from '@/components/layout'
import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
import { GlassCard } from '@/components/ui/glass-card'
import { SloTab } from './tabs/slo-tab'
import { EventsTab } from './tabs/events-tab'
import { QueueTab } from './tabs/queue-tab'
import { AgentMarketTab } from './tabs/agent-market-tab'
import { AutomationInventoryTab } from './tabs/automation-inventory-tab'

export default function GovernancePage({
  params,
  searchParams,
}: {
  params: { locale: string }
  searchParams?: { tab?: string | string[] }
}) {
  const t = useTranslations('governance')

  const governanceSections = [
    { id: 'slo', order: '01', label: t('tabs.slo'), content: <SloTab />, Icon: Radar },
    { id: 'events', order: '02', label: t('tabs.events'), content: <EventsTab />, Icon: Activity },
    { id: 'queue', order: '03', label: t('tabs.queue'), content: <QueueTab />, Icon: ClipboardList },
    { id: 'agent-market', order: '04', label: t('tabs.agentMarket'), content: <AgentMarketTab />, Icon: BrainCircuit },
    { id: 'automation-inventory', order: '05', label: t('tabs.automationInventory'), content: <AutomationInventoryTab />, Icon: ShieldCheck },
  ]
  const requestedTab = Array.isArray(searchParams?.tab) ? searchParams?.tab[0] : searchParams?.tab
  const activeSection = governanceSections.find(section => section.id === requestedTab) ?? governanceSections[0]

  return (
    <AppLayout locale={params.locale}>
      {/* ComplianceBadge 橫幅 — PR 3 接 /governance/compliance-score API */}
      <GlassCard variant="subtle" padding="sm" className="mb-3">
        <div className="flex items-center gap-2">
          <ShieldCheck size={14} style={{ color: '#d97757' }} />
          <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 15, color: '#141413' }}>
            {t('complianceBadge.label')}
          </span>
        </div>
      </GlassCard>

      <IwoooSReadOnlyBridge />

      <section className="mb-4 grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-5">
        {governanceSections.map((section) => {
          const selected = section.id === activeSection.id
          const Icon = section.Icon
          return (
            <Link
              key={section.id}
              href={`/${params.locale}/governance?tab=${section.id}`}
              className="group min-w-0 border bg-white p-3 text-[#141413] no-underline transition hover:border-[#d97757] hover:bg-[#fffaf7]"
              style={{
                borderColor: selected ? '#d97757' : '#e0ddd4',
              }}
            >
              <div className="flex items-center justify-between gap-3">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center border border-[#d8d3c7] bg-[#faf9f3] text-[#5f5d57] group-hover:text-[#d97757]">
                  <Icon className="h-4 w-4" aria-hidden="true" />
                </span>
                <span className="min-w-0 text-right text-[11px] font-semibold text-[#87867f]">
                  {section.order}
                </span>
              </div>
              <div className="mt-3 min-w-0 text-sm font-semibold leading-5">
                {section.label}
              </div>
            </Link>
          )
        })}
      </section>

      {activeSection.content}
    </AppLayout>
  )
}
