// =============================================================================
// WOOO AIOps - AwoooP 工作鏈路
// =============================================================================
// 將 AwoooP 實施項目對齊到 Operator Console 可觀測面。

"use client";

import {
  Activity,
  ArrowRight,
  ClipboardList,
  Database,
  Gauge,
  GitBranch,
  Network,
  ShieldCheck,
} from "lucide-react";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";

type WorkStatus = "live" | "in_progress" | "blocked" | "watching";

type WorkItem = {
  phase: string;
  title: string;
  status: WorkStatus;
  surface: string;
  source: string;
  gate: string;
  href: "/awooop/tenants" | "/awooop/contracts" | "/awooop/runs" | "/awooop/approvals";
};

const statusConfig: Record<WorkStatus, { label: string; className: string }> = {
  live: {
    label: "已接線",
    className: "border-[#9bc7a4] bg-[#f0faf2] text-[#17602a]",
  },
  in_progress: {
    label: "推進中",
    className: "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]",
  },
  blocked: {
    label: "阻塞",
    className: "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]",
  },
  watching: {
    label: "觀察期",
    className: "border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]",
  },
};

const workItems: WorkItem[] = [
  {
    phase: "P0",
    title: "AI 路由以 GCP-A/GCP-B/111 Ollama 優先",
    status: "live",
    surface: "Run 監控",
    source: "ai_routing_decision / ollama_failover_decision",
    gate: "Gemini 僅能作為 fallback",
    href: "/awooop/runs",
  },
  {
    phase: "P0",
    title: "飛輪 KPI 改讀 auto_repair_executions",
    status: "in_progress",
    surface: "工作鏈路 / 系統報告",
    source: "auto_repair_executions",
    gate: "修復率不得再讀 incidents.outcome",
    href: "/awooop/runs",
  },
  {
    phase: "P0",
    title: "審批與 Run State 對齊",
    status: "live",
    surface: "審批佇列",
    source: "awooop_run_state",
    gate: "waiting_approval 才能 decide",
    href: "/awooop/approvals",
  },
  {
    phase: "P1",
    title: "Contract Lifecycle",
    status: "watching",
    surface: "合約儀表板",
    source: "awooop_contract_revisions",
    gate: "draft → published → active",
    href: "/awooop/contracts",
  },
  {
    phase: "P1",
    title: "Tenant Migration State",
    status: "watching",
    surface: "租戶管理",
    source: "awooop_projects",
    gate: "shadow gate 需量化",
    href: "/awooop/tenants",
  },
  {
    phase: "P1",
    title: "MCP Gateway 與 Context Firewall",
    status: "watching",
    surface: "Run 監控",
    source: "mcp_gateway audit / redaction",
    gate: "tool call 必須帶 project_id",
    href: "/awooop/runs",
  },
  {
    phase: "P2",
    title: "Communication Hub",
    status: "watching",
    surface: "Run 監控 / 審批佇列",
    source: "conversation_event / outbound_message",
    gate: "Telegram 先 mirror 再切流",
    href: "/awooop/runs",
  },
  {
    phase: "P2",
    title: "Operator Console 正式接入主站",
    status: "in_progress",
    surface: "AwoooP",
    source: "apps/web/src/app/[locale]/awooop",
    gate: "/zh-TW/awooop 不得再 redirect 異常",
    href: "/awooop/tenants",
  },
];

function StatusBadge({ status }: { status: WorkStatus }) {
  const config = statusConfig[status];
  return (
    <span
      className={cn(
        "inline-flex items-center border px-2 py-0.5 text-xs font-semibold",
        config.className
      )}
    >
      {config.label}
    </span>
  );
}

const summary = [
  { label: "Live", value: workItems.filter((i) => i.status === "live").length, icon: Activity },
  { label: "In Progress", value: workItems.filter((i) => i.status === "in_progress").length, icon: GitBranch },
  { label: "Watching", value: workItems.filter((i) => i.status === "watching").length, icon: Gauge },
  { label: "Blocked", value: workItems.filter((i) => i.status === "blocked").length, icon: ShieldCheck },
];

export default function AwoooPWorkItemsPage() {
  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <ClipboardList className="h-5 w-5 text-[#d97757]" aria-hidden="true" />
          <div>
            <h2 className="text-lg font-semibold tracking-normal text-[#141413]">
              工作鏈路
            </h2>
            <p className="text-xs text-[#77736a]">
              {workItems.length} 個控制點
            </p>
          </div>
        </div>
      </div>

      <div className="grid gap-px border border-[#e0ddd4] bg-[#e0ddd4] md:grid-cols-4">
        {summary.map((item) => {
          const Icon = item.icon;
          return (
            <div key={item.label} className="bg-white px-4 py-3">
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium text-[#77736a]">{item.label}</span>
                <Icon className="h-4 w-4 text-[#87867f]" aria-hidden="true" />
              </div>
              <div className="mt-2 font-mono text-2xl font-semibold text-[#141413]">
                {item.value}
              </div>
            </div>
          );
        })}
      </div>

      <div className="overflow-hidden border border-[#e0ddd4] bg-white">
        <div className="overflow-x-auto">
          <table className="w-full" role="table" aria-label="AwoooP 工作鏈路">
            <thead>
              <tr className="border-b border-[#e0ddd4] bg-[#faf9f3]">
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  Phase
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  工作項目
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  狀態
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  操作面
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  Source
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  Gate
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-[#77736a]">
                  Link
                </th>
              </tr>
            </thead>
            <tbody>
              {workItems.map((item) => (
                <tr key={`${item.phase}-${item.title}`} className="border-b border-[#eee9dd] last:border-b-0">
                  <td className="px-4 py-3 font-mono text-xs font-semibold text-[#141413]">
                    {item.phase}
                  </td>
                  <td className="px-4 py-3 text-sm font-medium text-[#141413]">
                    {item.title}
                  </td>
                  <td className="px-4 py-3">
                    <StatusBadge status={item.status} />
                  </td>
                  <td className="px-4 py-3 text-sm text-[#5f5b52]">
                    {item.surface}
                  </td>
                  <td className="px-4 py-3">
                    <span className="inline-flex items-center gap-1.5 font-mono text-xs text-[#5f5b52]">
                      <Database className="h-3.5 w-3.5" aria-hidden="true" />
                      {item.source}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="inline-flex items-center gap-1.5 text-sm text-[#5f5b52]">
                      <Network className="h-3.5 w-3.5" aria-hidden="true" />
                      {item.gate}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <Link
                      href={item.href}
                      className="inline-flex items-center gap-1.5 border border-[#d8d3c7] px-2.5 py-1 text-xs font-semibold text-[#141413] hover:border-[#d97757]"
                    >
                      開啟
                      <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
