"use client";

/**
 * SettingsShell — shared chrome for the workspace settings pages: a title,
 * a horizontal tab nav (workspace-scoped route /w/:ws/settings/…), and a
 * content column. Every settings page uses this so the nav stays in one place.
 *
 * The core sidebar deep-links to /w/:ws/settings and /w/:ws/settings/members,
 * so "Members" is first-class here even though it isn't a distinct product
 * "section" — it's where member management lives.
 */
import { useParams } from "next/navigation";
import {
  Building2,
  CreditCard,
  Palette,
  UserCog,
  Users,
  KeyRound,
  Shield,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useWorkspace } from "@/hooks/use-workspace";

const TABS = [
  { href: "", label: "Workspace", icon: Building2 },
  { href: "members", label: "Members", icon: UserCog },
  { href: "teams", label: "Teams", icon: Users },
  { href: "permissions", label: "Permissions", icon: Shield },
  { href: "developers", label: "Developers", icon: KeyRound },
  { href: "automations", label: "Automations", icon: Zap },
  { href: "billing", label: "Billing", icon: CreditCard },
  { href: "appearance", label: "Appearance", icon: Palette },
] as const;

export interface SettingsShellProps {
  title: string;
  description?: string;
  /** Active tab ("" = Workspace index). */
  active: string;
  children: React.ReactNode;
}

export function SettingsShell({ title, description, active, children }: SettingsShellProps) {
  const params = useParams<{ workspace: string }>();
  const ws = params?.workspace ?? "";
  // The Developers tab is Owner/Admin-only (TASK-0128). The server enforces
  // 403 for everyone else (AGENTS rule 19) — this hiding is UX, and a direct
  // URL still resolves to the page (which then says "Owner or Admin
  // required"). Hidden until the role is known (no flicker, no false DOM).
  const { data: roleWs, isLoading: roleLoading } = useWorkspace(ws);
  const role = (roleWs?.role ?? "").toLowerCase();
  const showDevelopers = !roleLoading && (role === "owner" || role === "admin");
  const tabs = TABS.filter((t) => t.href !== "developers" || showDevelopers);

  return (
    <div className="mx-auto max-w-4xl px-6 py-8">
      <h1 className="text-xl font-semibold">{title}</h1>
      {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}

      <nav
        className="mt-5 flex flex-wrap gap-1 border-b border-border"
        aria-label="Settings sections"
      >
        {tabs.map((t) => {
          const href = t.href ? `/w/${ws}/settings/${t.href}` : `/w/${ws}/settings`;
          const isActive = t.href === active;
          return (
            <a
              key={t.href}
              href={href}
              className={cn(
                "inline-flex items-center gap-1.5 rounded-t-md px-3 py-2 text-sm",
                isActive
                  ? "border-b-2 border-primary font-medium text-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
              aria-current={isActive ? "page" : undefined}
            >
              <t.icon className="size-4" aria-hidden />
              {t.label}
            </a>
          );
        })}
      </nav>

      <div className="mt-6">{children}</div>
    </div>
  );
}

/** A labelled settings section card. */
export function Section({
  title,
  description,
  children,
  danger,
}: {
  title: string;
  description?: React.ReactNode;
  children: React.ReactNode;
  danger?: boolean;
}) {
  return (
    <section
      className={cn(
        "rounded-lg border p-4",
        danger ? "border-destructive/40 bg-destructive/5" : "border-border",
      )}
    >
      <h2 className={cn("text-sm font-semibold", danger && "text-destructive")}>{title}</h2>
      {description ? <p className="mt-1 text-xs text-muted-foreground">{description}</p> : null}
      <div className="mt-3">{children}</div>
    </section>
  );
}

/** Standard settings field row (label + control). */
export function Field({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <label className="block">
      <span className="mb-1 block text-xs font-medium text-muted-foreground">{label}</span>
      {children}
      {hint ? <span className="mt-1 block text-[11px] text-muted-foreground">{hint}</span> : null}
    </label>
  );
}

export const inputCls =
  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring";