"use client";

import { KeyRound, PlugZap, Route, type LucideIcon } from "lucide-react";
import type { ReactNode } from "react";

import { cardClass } from "@/lib/ui/variants";

export type SettingsSection = "routing" | "oauth" | "keys";

// 分组的单一标签源：桌面 aside 与移动 SegmentedControl 共用，消除「档位路由 / 路由」漂移。
export const SETTINGS_SECTIONS: Array<{
  value: SettingsSection;
  label: string;
  icon: LucideIcon;
}> = [
  { value: "routing", label: "档位路由", icon: Route },
  { value: "oauth", label: "OAuth", icon: PlugZap },
  { value: "keys", label: "API Key", icon: KeyRound },
];

export const SECTION_OPTIONS = SETTINGS_SECTIONS.map(({ value, label }) => ({
  value,
  label,
}));

interface SettingsNavProps {
  activeSection: SettingsSection;
  onSelect: (value: SettingsSection) => void;
  detailFor: (value: SettingsSection) => string;
}

// 桌面侧栏：设置分组导航（移动端由 SegmentedControl 承担）。
export function SettingsNav({
  activeSection,
  onSelect,
  detailFor,
}: SettingsNavProps) {
  return (
    <aside className="hidden lg:block">
      <nav aria-label="设置分组" className={cardClass("sticky top-20 p-2")}>
        {SETTINGS_SECTIONS.map((section) => (
          <SettingsNavButton
            key={section.value}
            active={activeSection === section.value}
            icon={<section.icon className="h-4 w-4" aria-hidden="true" />}
            label={section.label}
            detail={detailFor(section.value)}
            onClick={() => onSelect(section.value)}
          />
        ))}
      </nav>
    </aside>
  );
}

interface SettingsNavButtonProps {
  active: boolean;
  icon: ReactNode;
  label: string;
  detail: string;
  onClick: () => void;
}

function SettingsNavButton({
  active,
  icon,
  label,
  detail,
  onClick,
}: SettingsNavButtonProps) {
  return (
    <button
      type="button"
      aria-pressed={active}
      onClick={onClick}
      className={`mb-1 flex w-full items-start gap-2 rounded px-3 py-2 text-left transition-colors ${
        active
          ? "bg-[var(--color-cinnabar-wash)] text-cinnabar"
          : "text-ink hover:bg-bg hover:text-cinnabar"
      }`}
    >
      <span className="mt-0.5 shrink-0">{icon}</span>
      <span className="min-w-0">
        <span className="block text-sm font-medium">{label}</span>
        <span className="block truncate text-xs text-ink-soft">{detail}</span>
      </span>
    </button>
  );
}