import { useState } from "react";

// Reusable horizontal pill tab-rail for in-page sub-navigation (Configuration, Users & roles…).
// The active tab is persisted to localStorage so a reload (F5) keeps the user where they were,
// per the app's "persist UI state across reload" convention.

export interface TabDef {
  id: string;
  label: string;
  badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
}

/** Persisted active-tab state. Validation is deferred to the caller (it clamps to a valid id at
 * render) so this can be called before an async-loaded tab list is known, keeping hook order stable. */
export function usePersistedTab(storageKey: string, fallback = ""): [string, (id: string) => void] {
  const [tab, setTabState] = useState<string>(() => localStorage.getItem(storageKey) ?? fallback);
  const setTab = (id: string) => {
    setTabState(id);
    localStorage.setItem(storageKey, id);
  };
  return [tab, setTab];
}

export default function Tabs({
  tabs,
  active,
  onChange,
}: {
  tabs: TabDef[];
  active: string;
  onChange: (id: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-1 mb-4">
      {tabs.map((tb) => {
        const on = tb.id === active;
        return (
          <button
            key={tb.id}
            onClick={() => onChange(tb.id)}
            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition ${
              on
                ? "bg-accent text-accent-fg font-medium shadow-md shadow-accent/20"
                : "text-muted hover:text-fg hover:bg-card/60"
            }`}
          >
            {tb.label}
            {tb.badge != null && tb.badge > 0 && (
              <span
                className={`text-[11px] leading-none px-1.5 py-0.5 rounded-full ${
                  on ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
                }`}
              >
                {tb.badge}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}