import { type ReactNode } from "react";

// Shared MATCH / segmented primitive — a rounded-full pill track where exactly ONE option is active
// (radio-like). Backs the feed any/all + or/and "Match" toggles and the feed Mine/Library scope bar,
// and the Plex any/all combine toggles. The active paint comes entirely from the
// `.pill[aria-pressed="true"]` recipe (index.css) — do NOT add bg/text/border-colour utilities on the
// buttons here or a utility-layer class would beat the pressed fill.

export interface SegmentedOption<T extends string> {
  value: T;
  label: string;
  icon?: ReactNode;
  title?: string; // optional per-option tooltip
}

export default function SegmentedToggle<T extends string>({
  options,
  value,
  onChange,
  ariaLabel,
  label,
  title,
  fullWidth = false,
  size = "sm",
  className,
}: {
  options: readonly SegmentedOption<T>[];
  value: T;
  onChange: (v: T) => void;
  ariaLabel: string;
  // Optional left-hand caption; when set the control renders as a justify-between row (the feed/Plex
  // "Match" toggles). Omit for a standalone bar (the Mine/Library scope switch).
  label?: ReactNode;
  title?: string; // tooltip on the whole row (caption mode only)
  // Full-width track with flex-1 buttons (the scope bar); default is intrinsic width.
  fullWidth?: boolean;
  // sm = text-3xs, compact padding (the captioned match toggles); md = text-xs (the scope bar).
  size?: "sm" | "md";
  className?: string;
}) {
  const track = (
    <div
      className={`inline-flex items-center rounded-full border border-border bg-card p-0.5 ${
        size === "md" ? "text-xs" : "text-3xs"
      }${fullWidth ? " w-full" : ""}`}
      role="group"
      aria-label={ariaLabel}
    >
      {options.map((o) => (
        <button
          key={o.value}
          onClick={() => onChange(o.value)}
          title={o.title}
          aria-pressed={value === o.value}
          className={`pill inline-flex items-center justify-center gap-1 rounded-full ${
            size === "md" ? "px-2.5 py-1" : "px-2 py-0.5"
          }${fullWidth ? " flex-1" : ""}`}
        >
          {o.icon}
          <span>{o.label}</span>
        </button>
      ))}
    </div>
  );

  if (label == null) {
    return className ? <div className={className}>{track}</div> : track;
  }
  return (
    <div className={`flex items-center justify-between ${className ?? "mb-1.5"}`} title={title}>
      <span className="text-3xs uppercase tracking-wide text-muted">{label}</span>
      {track}
    </div>
  );
}