"use client";

import Link from "next/link";
import { TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ADMIN_SETTINGS_NAV_GROUPS } from "../_lib/settings-navigation";
import { SettingStatusBadge } from "./setting-status-badge";

export function AdminSettingsNavigation({ activeTab }: { activeTab: string }) {
  return (
    <div className="rounded-xl border bg-background">
      <div className="border-b bg-muted/20 px-5 py-4">
        <div className="flex flex-col gap-1">
          <div className="font-semibold text-muted-foreground text-xs uppercase tracking-[0.16em]">
            Admin Console
          </div>
          <h1 className="font-semibold text-2xl tracking-tight">
            系统设置中心
          </h1>
          <p className="max-w-4xl text-muted-foreground text-sm leading-6">
            按后台人员的操作路径重新组织入口：先处理运营数据，再调整站点体验，最后管理模型与基础设施能力。
          </p>
        </div>
      </div>
      <div className="grid gap-px bg-border lg:grid-cols-3">
        {ADMIN_SETTINGS_NAV_GROUPS.map((group) => {
          const hasActiveTab = group.items.some(
            (item) => item.value === activeTab
          );
          return (
            <section className="bg-background p-4" key={group.title}>
              <div className="mb-3 flex items-start justify-between gap-3">
                <div className="space-y-1">
                  <h2 className="font-semibold text-sm">{group.title}</h2>
                  <p className="text-muted-foreground text-xs leading-5">
                    {group.description}
                  </p>
                </div>
                {hasActiveTab ? (
                  <SettingStatusBadge tone="enabled">当前</SettingStatusBadge>
                ) : null}
              </div>
              <TabsList className="grid h-auto w-full grid-cols-1 gap-1 bg-transparent p-0">
                {group.items.map((item) => {
                  const Icon = item.icon;
                  const triggerClassName =
                    "h-auto justify-start gap-2 rounded-md border border-transparent px-3 py-2 text-left data-[state=active]:border-border data-[state=active]:bg-muted/50";
                  const content = (
                    <>
                      <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
                      <span className="min-w-0">
                        <span className="block truncate font-medium text-sm">
                          {item.label}
                        </span>
                        <span className="block truncate font-normal text-[11px] text-muted-foreground">
                          {item.description}
                        </span>
                      </span>
                    </>
                  );

                  if (item.href) {
                    return (
                      <TabsTrigger
                        asChild
                        className={triggerClassName}
                        key={item.value}
                        value={item.value}
                      >
                        <Link href={item.href}>{content}</Link>
                      </TabsTrigger>
                    );
                  }

                  return (
                    <TabsTrigger
                      className={triggerClassName}
                      key={item.value}
                      value={item.value}
                    >
                      {content}
                    </TabsTrigger>
                  );
                })}
              </TabsList>
            </section>
          );
        })}
      </div>
    </div>
  );
}