import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "../lib/cn";

type Variant = "primary" | "subtle" | "ghost" | "danger";
type Size = "sm" | "md";

const VARIANTS: Record<Variant, string> = {
  primary: "bg-accent-600 text-white hover:bg-accent-500",
  subtle: "border border-zinc-700/60 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-700/60",
  ghost: "text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100",
  danger: "border border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20",
};

const SIZES: Record<Size, string> = {
  sm: "h-8 px-2.5 text-xs gap-1.5",
  md: "h-10 px-4 text-sm gap-2",
};

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  active?: boolean;
}

export function Button({
  variant = "subtle",
  size = "md",
  active = false,
  className,
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex select-none items-center justify-center rounded-lg font-medium transition-transform active:scale-[0.98]",
        "disabled:cursor-not-allowed disabled:opacity-60",
        SIZES[size],
        VARIANTS[variant],
        active && "bg-zinc-700 text-zinc-100 ring-2 ring-accent-500/70",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}

interface SectionProps {
  title: string;
  icon?: ReactNode;
  action?: ReactNode;
  children: ReactNode;
}

export function Section({ title, icon, action, children }: SectionProps) {
  return (
    <section className="border-b border-zinc-800/60 px-4 py-4 last:border-b-0">
      <header className="mb-3 flex items-center justify-between">
        <h2 className="flex items-center gap-2 text-[0.7rem] font-semibold uppercase tracking-wider text-zinc-400">
          {icon}
          {title}
        </h2>
        {action}
      </header>
      {children}
    </section>
  );
}

interface SegmentedOption<T extends string> {
  value: T;
  label: string;
}

interface SegmentedProps<T extends string> {
  options: SegmentedOption<T>[];
  value: T;
  onChange: (value: T) => void;
  ariaLabel?: string;
}

export function Segmented<T extends string>({ options, value, onChange, ariaLabel }: SegmentedProps<T>) {
  return (
    <div
      role="tablist"
      aria-label={ariaLabel}
      className="flex gap-0.5 rounded-lg border border-zinc-700/60 bg-zinc-800 p-0.5"
    >
      {options.map((opt) => (
        <button
          key={opt.value}
          role="tab"
          aria-selected={value === opt.value}
          onClick={() => onChange(opt.value)}
          className={cn(
            "flex-1 rounded-md px-2 py-1.5 text-xs font-medium transition-transform",
            value === opt.value ? "bg-zinc-700 text-zinc-100 shadow-sm" : "text-zinc-400 hover:text-zinc-100",
          )}
        >
          {opt.label}
        </button>
      ))}
    </div>
  );
}