// =============================================================================
// WOOO AIOps - AwoooP Operator Console 佈局
// =============================================================================
// AwoooP 專屬工作殼，在 DashboardLayout main 區域內運作。
// 2026-06-06 D1：全站 sidebar 作為唯一主導航，頁面內只保留 scope bar 與工具列。
// 視覺仍維持 WOOO Open Design token、8px panel radius 與既有色彩規範。

"use client";

import { AppLayout } from "@/components/layout";
import { usePathname } from "@/i18n/routing";
import {
  BrainCircuit,
  CalendarDays,
  Download,
  MessageSquareText,
  RefreshCw,
} from "lucide-react";
import { useTranslations } from "next-intl";

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

const navItems = [
  {
    labelKey: "overview",
    href: "/awooop" as const,
    exact: true,
  },
  {
    labelKey: "workItems",
    href: "/awooop/work-items" as const,
  },
  {
    labelKey: "runs",
    href: "/awooop/runs" as const,
  },
  {
    labelKey: "approvals",
    href: "/awooop/approvals" as const,
  },
  {
    labelKey: "contracts",
    href: "/awooop/contracts" as const,
  },
  {
    labelKey: "tenants",
    href: "/awooop/tenants" as const,
  },
];

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

export default function AwoooPLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const pathname = usePathname();
  const t = useTranslations("awooop.shell");
  const activeItem = navItems.find((item) => (
    pathname === item.href ||
    (!item.exact && pathname?.startsWith(item.href + "/"))
  )) ?? navItems[0];

  return (
    <AppLayout locale={params.locale} showBackground={false} fullBleed>
      <div className="min-h-[calc(100vh-68px)] w-full max-w-full overflow-x-hidden bg-[#f3f1ea]">
        <div className="border-b border-[#e0ddd4] bg-[#faf9f3]">
          <div className="grid gap-3 px-3 py-3 sm:px-5 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-center">
            <div className="flex min-w-0 flex-wrap items-center gap-3">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-button border border-[#d8d3c7] bg-white text-[#141413]">
                <BrainCircuit className="h-5 w-5" aria-hidden="true" />
              </span>
              <div>
                <h1 className="text-lg font-semibold tracking-normal text-[#141413] sm:text-xl">
                  {t("title")}
                </h1>
                <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-[#77736a]">
                  <span>{t("subtitle")}</span>
                  <span className="h-1 w-1 rounded-full bg-[#d97757]" />
                  <span>{t("mode")}</span>
                </div>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2 xl:justify-end">
              <div className="grid min-w-[180px] gap-0.5 rounded-card border border-[#d8d3c7] bg-white px-3 py-2">
                <span className="text-[11px] font-medium text-[#77736a]">{t("scope.viewLabel")}</span>
                <span className="text-sm font-semibold text-[#141413]">{t("scope.viewValue")}</span>
              </div>
              <div className="grid min-w-[180px] gap-0.5 rounded-card border border-[#d8d3c7] bg-white px-3 py-2">
                <span className="text-[11px] font-medium text-[#77736a]">{t("scope.projectLabel")}</span>
                <span className="text-sm font-semibold text-[#141413]">{t("scope.projectValue")}</span>
              </div>
              <div className="inline-flex items-center gap-2 rounded-card border border-[#d8d3c7] bg-white px-3 py-2 text-xs font-semibold text-[#141413]">
                <span className="h-1.5 w-1.5 rounded-full bg-[#22c55e]" />
                {t("operator")}
              </div>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-[#e0ddd4] px-3 py-2 text-xs text-[#77736a] sm:px-5">
            <span className="inline-flex items-center gap-1.5 text-[#141413]">
              <span className="h-2 w-2 rounded-full bg-[#159947]" />
              {t("status.enabled")}
            </span>
            <span>{t("status.eligibility")}</span>
            <span>{t("status.mode")}</span>
            <span>{t("status.budget")}</span>
            <span>{t("status.score")}</span>
          </div>
        </div>

        <div className="w-full max-w-full">
          <div className="min-w-0">
            <div className="border-b border-[#e0ddd4] bg-[#f3f1ea] px-3 pt-4 sm:px-5">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-center gap-3">
                  <h2 className="text-xl font-semibold tracking-normal text-[#141413]">
                    {t(`nav.${activeItem.labelKey}`)}
                  </h2>
                  <span className="hidden text-xs text-[#77736a] sm:inline">{t("pageScope")}</span>
                </div>
                <div className="flex items-center gap-2 text-xs text-[#77736a]">
                  <span className="inline-flex items-center gap-1.5 rounded-button border border-[#d8d3c7] bg-white px-2.5 py-1.5">
                    <CalendarDays className="h-3.5 w-3.5" aria-hidden="true" />
                    {t("toolbar.dateRange")}
                  </span>
                  <span className="inline-flex items-center gap-1.5 rounded-button border border-[#d8d3c7] bg-white px-2.5 py-1.5">
                    <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" />
                    {t("toolbar.refresh")}
                  </span>
                  <span className="hidden items-center gap-1.5 rounded-button border border-[#d8d3c7] bg-white px-2.5 py-1.5 sm:inline-flex">
                    <Download className="h-3.5 w-3.5" aria-hidden="true" />
                    {t("toolbar.export")}
                  </span>
                  <span className="hidden items-center gap-1.5 rounded-button border border-[#d8d3c7] bg-white px-2.5 py-1.5 md:inline-flex">
                    <MessageSquareText className="h-3.5 w-3.5" aria-hidden="true" />
                    {t("toolbar.feedback")}
                  </span>
                </div>
              </div>
            </div>

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