"use client";

import { useTranslations } from "next-intl";
import {
  Activity,
  ArrowRight,
  BellRing,
  CheckCircle2,
  ListChecks,
  ShieldCheck,
} from "lucide-react";

import { AutonomousRuntimeReceiptPanel } from "@/components/awooop/autonomous-runtime-receipt-panel";
import { Link } from "@/i18n/routing";

const NAV_ITEMS = [
  {
    href: "/awooop/runs#ai-alert-card-delivery-readback",
    labelKey: "runs",
    icon: Activity,
  },
  {
    href: "/awooop/work-items",
    labelKey: "workItems",
    icon: ListChecks,
  },
  {
    href: "/awooop/approvals",
    labelKey: "approvals",
    icon: ShieldCheck,
  },
] as const;

export default function AwoooPAlertsPage() {
  const t = useTranslations("awooop.alerts.aiLoop");

  return (
    <main
      className="min-h-screen bg-[#f5f2ea] px-4 py-5 text-[#141413] md:px-6 lg:px-8"
      data-testid="awooop-alerts-ai-loop-page"
    >
      <div className="mx-auto flex w-full max-w-[1600px] flex-col gap-5">
        <section className="border border-[#e0ddd4] bg-white">
          <div className="flex flex-wrap items-start justify-between gap-4 px-4 py-4">
            <div className="flex min-w-0 items-start gap-3">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center border border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]">
                <BellRing className="h-5 w-5" aria-hidden="true" />
              </span>
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <h1 className="text-lg font-semibold tracking-normal text-[#141413]">
                    {t("title")}
                  </h1>
                  <span className="inline-flex items-center gap-1 border border-[#9bc7a4] bg-[#f0faf2] px-2 py-0.5 text-xs font-semibold text-[#17602a]">
                    <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />
                    {t("badge")}
                  </span>
                </div>
                <p className="mt-1 max-w-3xl text-xs leading-5 text-[#5f5b52]">
                  {t("subtitle")}
                </p>
              </div>
            </div>
            <nav className="flex flex-wrap items-center gap-2" aria-label={t("title")}>
              {NAV_ITEMS.map((item) => {
                const Icon = item.icon;
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className="inline-flex items-center gap-2 border border-[#d8d3c7] bg-[#faf9f3] px-3 py-2 text-xs font-semibold text-[#141413] hover:border-[#d97757]"
                  >
                    <Icon className="h-4 w-4" aria-hidden="true" />
                    <span>{t(item.labelKey)}</span>
                    <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
                  </Link>
                );
              })}
            </nav>
          </div>
        </section>

        <AutonomousRuntimeReceiptPanel mode="full" />
      </div>
    </main>
  );
}
