// =============================================================================
// WOOO AIOps - AwoooP Operator Console 佈局
// =============================================================================
// AwoooP 專屬次級導航列（水平 tab bar），在 DashboardLayout main 區域內運作
// 設計方向：工業監控儀表板風格，橘色 accent 與品牌系統一致

"use client";

import { AppLayout } from "@/components/layout";
import { Link, usePathname } from "@/i18n/routing";
import { Activity, BrainCircuit, Building2, ClipboardList, FileText, ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

// =============================================================================
// 導航設定
// =============================================================================

const navItems = [
  {
    label: "工作鏈路",
    href: "/awooop/work-items" as const,
    icon: ClipboardList,
  },
  {
    label: "租戶管理",
    href: "/awooop/tenants" as const,
    icon: Building2,
  },
  {
    label: "合約儀表板",
    href: "/awooop/contracts" as const,
    icon: FileText,
  },
  {
    label: "Run 監控",
    href: "/awooop/runs" as const,
    icon: Activity,
  },
  {
    label: "審批佇列",
    href: "/awooop/approvals" as const,
    icon: ShieldCheck,
  },
];

// =============================================================================
// AwoooP Console 佈局
// =============================================================================

export default function AwoooPLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const pathname = usePathname();

  return (
    <AppLayout locale={params.locale} showBackground={false}>
      <div className="min-h-[calc(100vh-116px)] bg-[#f7f5ee] border border-[#e0ddd4]">
        <div className="border-b border-[#e0ddd4] bg-[#faf9f3] px-5 py-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center border border-[#d8d3c7] bg-white text-[#141413]">
                <BrainCircuit className="h-4 w-4" aria-hidden="true" />
              </span>
              <div>
                <h1 className="text-lg font-semibold tracking-normal text-[#141413]">
                  AwoooP Operator Console
                </h1>
                <div className="mt-1 flex items-center gap-2 text-xs text-[#77736a]">
                  <span className="font-mono">Control Plane</span>
                  <span className="h-1 w-1 rounded-full bg-[#d97757]" />
                  <span className="font-mono">Shadow First</span>
                </div>
              </div>
            </div>
            <span className="inline-flex items-center gap-2 border border-[#d8d3c7] bg-white px-3 py-1.5 text-xs font-semibold text-[#141413]">
              <span className="h-1.5 w-1.5 rounded-full bg-[#22c55e]" />
              OPERATOR
            </span>
          </div>

          <nav
            className="mt-4 flex flex-wrap gap-1"
            role="navigation"
            aria-label="AwoooP 主要導航"
          >
            {navItems.map((item) => {
              const Icon = item.icon;
              const isActive =
                pathname === item.href ||
                pathname?.startsWith(item.href + "/");

              return (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-current={isActive ? "page" : undefined}
                  className={cn(
                    "inline-flex items-center gap-2 border px-3 py-2 text-sm font-medium transition-colors",
                    isActive
                      ? "border-[#d97757] bg-white text-[#141413]"
                      : "border-transparent text-[#77736a] hover:border-[#d8d3c7] hover:bg-white hover:text-[#141413]"
                  )}
                >
                  <Icon className="h-4 w-4" aria-hidden="true" />
                  {item.label}
                </Link>
              );
            })}
          </nav>
        </div>

        <main className="px-5 py-5">{children}</main>
      </div>
    </AppLayout>
  );
}
