'use client'

import { AppLayout } from '@/components/layout'
import {
  Activity,
  Bot,
  CheckCircle2,
  ExternalLink,
  GitBranch,
  Gauge,
  SearchCheck,
  ShieldCheck,
} from 'lucide-react'

const GITEA_ACTIONS_URL = 'http://192.168.0.110:3001/wooo/awoooi/actions'

const agents = [
  { name: 'Hermes', role: '變更摘要與規則脈絡', state: 'wired' },
  { name: 'OpenClaw', role: 'AI review orchestration', state: 'wired' },
  { name: 'Elephant Alpha', role: '風險分級與修復決策', state: 'wired' },
  { name: 'NemoTron', role: '高風險推理席位', state: 'standby' },
]

const stages = [
  { label: 'push', state: 'Gitea main' },
  { label: 'start', state: 'Telegram card' },
  { label: 'scan', state: 'secret / destructive / diff-check' },
  { label: 'grade', state: 'CRITICAL / HIGH / MEDIUM / LOW' },
  { label: 'finish', state: 'Telegram report' },
]

export default function CodeReviewPage({ params }: { params: { locale: string } }) {
  return (
    <AppLayout locale={params.locale}>
      <main className="min-h-screen bg-[#0f1115] text-gray-100">
        <div className="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
          <header className="flex flex-col gap-4 border-b border-gray-800 pb-5 md:flex-row md:items-end md:justify-between">
            <div>
              <div className="flex items-center gap-2 text-xs font-mono uppercase text-emerald-300">
                <SearchCheck className="h-4 w-4" />
                AWOOOI Code Review
              </div>
              <h1 className="mt-2 text-2xl font-semibold text-white">AI Code Review 控制面</h1>
              <p className="mt-1 text-sm text-gray-400">
                Hermes → OpenClaw → Elephant Alpha → NemoTron
              </p>
            </div>
            <a
              href={GITEA_ACTIONS_URL}
              target="_blank"
              rel="noreferrer"
              className="inline-flex h-10 items-center justify-center gap-2 rounded border border-emerald-500/40 px-3 text-sm font-medium text-emerald-200 transition-colors hover:border-emerald-300 hover:bg-emerald-500/10"
            >
              <ExternalLink className="h-4 w-4" />
              查看 Gitea Actions
            </a>
          </header>

          <section className="grid gap-3 md:grid-cols-4">
            <div className="rounded border border-gray-800 bg-gray-950 p-4">
              <div className="flex items-center gap-2 text-xs text-gray-400">
                <GitBranch className="h-4 w-4 text-emerald-300" />
                Source
              </div>
              <div className="mt-3 text-lg font-semibold text-white">gitea main</div>
              <div className="mt-1 text-xs text-gray-500">192.168.0.110:3001</div>
            </div>
            <div className="rounded border border-gray-800 bg-gray-950 p-4">
              <div className="flex items-center gap-2 text-xs text-gray-400">
                <Activity className="h-4 w-4 text-sky-300" />
                Trigger
              </div>
              <div className="mt-3 text-lg font-semibold text-white">push / manual</div>
              <div className="mt-1 text-xs text-gray-500">Code Review workflow</div>
            </div>
            <div className="rounded border border-gray-800 bg-gray-950 p-4">
              <div className="flex items-center gap-2 text-xs text-gray-400">
                <ShieldCheck className="h-4 w-4 text-amber-300" />
                Gate
              </div>
              <div className="mt-3 text-lg font-semibold text-white">non-blocking v1</div>
              <div className="mt-1 text-xs text-gray-500">critical / high visible</div>
            </div>
            <div className="rounded border border-gray-800 bg-gray-950 p-4">
              <div className="flex items-center gap-2 text-xs text-gray-400">
                <Gauge className="h-4 w-4 text-lime-300" />
                Report
              </div>
              <div className="mt-3 text-lg font-semibold text-white">Telegram + Actions</div>
              <div className="mt-1 text-xs text-gray-500">start and completion cards</div>
            </div>
          </section>

          <section className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-white">
                <CheckCircle2 className="h-4 w-4 text-emerald-300" />
                Review Pipeline
              </div>
              <div className="grid gap-2">
                {stages.map((stage, index) => (
                  <div
                    key={stage.label}
                    className="grid grid-cols-[2rem_8rem_1fr] items-center rounded border border-gray-800 bg-gray-950 px-3 py-2 text-sm"
                  >
                    <span className="font-mono text-gray-500">{String(index + 1).padStart(2, '0')}</span>
                    <span className="font-mono text-emerald-200">{stage.label}</span>
                    <span className="truncate text-gray-300">{stage.state}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-white">
                <Bot className="h-4 w-4 text-sky-300" />
                Agent Assignment
              </div>
              <div className="grid gap-2">
                {agents.map((agent) => (
                  <div
                    key={agent.name}
                    className="grid grid-cols-[8rem_1fr_4.5rem] items-center rounded border border-gray-800 bg-gray-950 px-3 py-2 text-sm"
                  >
                    <span className="font-semibold text-white">{agent.name}</span>
                    <span className="truncate text-gray-400">{agent.role}</span>
                    <span className="justify-self-end rounded bg-emerald-500/10 px-2 py-1 text-xs font-mono text-emerald-200">
                      {agent.state}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </div>
      </main>
    </AppLayout>
  )
}
