ai-chatbot/app/(admin)/settings/_components/admin-settings-navigation.tsx

"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { ADMIN_SETTINGS_NAV_GROUPS } from "../_lib/settings-navigation";
import type { AdminSettingsNavGroup, AdminSettingsNavItem } from "../_lib/types";
import { cn } from "@/lib/utils";

function getActiveGroup(activeTab: string) {
  return ADMIN_SETTINGS_NAV_GROUPS.find((group) =>
    group.items.some((item) => item.value === activeTab)
  );
}

function SettingsGroupTab({
  group,
  isActive,
  onTabChange,
}: {
  group: AdminSettingsNavGroup;
  isActive: boolean;
  onTabChange: (value: string) => void;
}) {
  const defaultItem = group.items[0];
  const hasHref = Boolean(defaultItem?.href);
  const className = cn(
    "h-10 w-full justify-center rounded-2xl border px-4 text-sm font-medium shadow-none transition-colors",
    isActive
      ? "border-foreground/10 bg-foreground text-background hover:bg-foreground/90 hover:text-background dark:border-white/20 dark:bg-white dark:text-black dark:hover:bg-white/90"
      : "border-border/70 bg-zinc-50/80 text-muted-foreground hover:bg-background hover:text-foreground"
  );

  if (!defaultItem) return null;

  if (hasHref) {
    return (
      <Button
        asChild
        className={className}
        size="sm"
        variant="ghost"
      >
        <Link href={defaultItem.href!}>{group.title}</Link>
      </Button>
    );
  }

  return (
    <Button
      className={className}
      onClick={() => onTabChange(defaultItem.value)}
      size="sm"
      variant="ghost"
    >
      {group.title}
    </Button>
  );
}

function SettingsQuickAction({
  activeTab,
  item,
  onTabChange,
  stretched = false,
}: {
  activeTab: string;
  item: AdminSettingsNavItem;
  onTabChange: (value: string) => void;
  stretched?: boolean;
}) {
  const Icon = item.icon;
  const className =
    item.value === activeTab
      ? "border-foreground/10 bg-foreground text-background shadow-sm hover:bg-foreground/90 dark:border-white/20 dark:bg-white dark:text-black dark:hover:bg-white/90"
      : "border-transparent bg-transparent text-muted-foreground hover:border-border/80 hover:bg-background hover:text-foreground";
  const layoutClassName = stretched
    ? "h-10 w-full min-w-0 justify-center gap-2 rounded-2xl border px-4"
    : "h-9 shrink-0 gap-2 rounded-full border px-3.5";

  if (item.href) {
    return (
      <Button
        asChild
        className={`${layoutClassName} ${className}`}
        size="sm"
        variant="ghost"
      >
        <Link href={item.href}>
          <Icon className="h-4 w-4" />
          <span className={stretched ? "truncate" : ""}>{item.label}</span>
        </Link>
      </Button>
    );
  }

  return (
    <Button
      className={`${layoutClassName} ${className}`}
      onClick={() => onTabChange(item.value)}
      size="sm"
      variant="ghost"
    >
      <Icon className="h-4 w-4" />
      <span className={stretched ? "truncate" : ""}>{item.label}</span>
    </Button>
  );
}

export function AdminSettingsNavigation({
  activeTab,
  onTabChange,
}: {
  activeTab: string;
  onTabChange: (value: string) => void;
}) {
  const activeGroup = getActiveGroup(activeTab);
  const groupButtons = ADMIN_SETTINGS_NAV_GROUPS.map((group) => ({
    group,
    isActive: group.items.some((item) => item.value === activeTab),
  }));

  return (
    <div className="rounded-2xl border bg-background px-4 py-3 shadow-sm">
      <div className="flex flex-col gap-2 md:hidden">
        <div className="flex items-center gap-2">
          <Select onValueChange={onTabChange} value={activeTab}>
            <SelectTrigger className="h-9 flex-1 border-border/70 bg-background shadow-none">
              <SelectValue placeholder="选择设置项" />
            </SelectTrigger>
            <SelectContent>
              {ADMIN_SETTINGS_NAV_GROUPS.map((group, groupIndex) => (
                <SelectGroup key={group.title}>
                  <SelectLabel>{group.title}</SelectLabel>
                  {group.items
                    .filter((item) => !item.href)
                    .map((item) => (
                      <SelectItem key={item.value} value={item.value}>
                        {item.label}
                      </SelectItem>
                    ))}
                  {groupIndex < ADMIN_SETTINGS_NAV_GROUPS.length - 1 ? (
                    <SelectSeparator />
                  ) : null}
                </SelectGroup>
              ))}
            </SelectContent>
          </Select>

          <Button
            asChild
            className="h-9 rounded-full border-border/70 px-3 text-[13px]"
            size="sm"
            variant="outline"
          >
            <Link href="/">
              <ArrowLeft className="h-3.5 w-3.5" />
              返回
            </Link>
          </Button>
        </div>

        <div className="flex flex-wrap gap-1">
          {(activeGroup?.items ?? []).map((item) => (
            <SettingsQuickAction
              activeTab={activeTab}
              item={item}
              key={item.value}
              onTabChange={onTabChange}
            />
          ))}
        </div>
      </div>

      <div className="hidden min-w-0 items-center gap-2 md:flex">
        <div className="shrink-0 text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
          Admin Console
        </div>

        {activeGroup ? (
          <>
            <span className="h-1 w-1 shrink-0 rounded-full bg-border" />
            <span className="shrink-0 text-muted-foreground text-xs">
              {activeGroup.title}
            </span>
          </>
        ) : null}

        <Separator className="mx-1 h-5 shrink-0" orientation="vertical" />

        <div className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden">
          <div className="grid w-[420px] min-w-[420px] grid-cols-3 gap-2">
            {groupButtons.map(({ group, isActive }) => (
              <SettingsGroupTab
                group={group}
                isActive={isActive}
                key={group.title}
                onTabChange={onTabChange}
              />
            ))}
          </div>

          <Separator className="h-6 shrink-0" orientation="vertical" />

          <div
            className="grid min-w-0 flex-1 gap-2"
            style={{
              gridTemplateColumns: `repeat(${Math.max(
                activeGroup?.items.length || 1,
                1
              )}, minmax(0, 1fr))`,
            }}
          >
            {(activeGroup?.items ?? []).map((item) => (
              <SettingsQuickAction
                activeTab={activeTab}
                item={item}
                key={item.value}
                onTabChange={onTabChange}
                stretched
              />
            ))}
          </div>
        </div>

        <Button
          asChild
          className="h-9 shrink-0 rounded-full border-border/70 px-3.5 text-[13px]"
          size="sm"
          variant="outline"
        >
          <Link href="/">
            <ArrowLeft className="h-3.5 w-3.5" />
            返回工作台
          </Link>
        </Button>
      </div>
    </div>
  );
}