siftlode/frontend/src/components/plexPlayerControls.tsx

import { type ReactNode } from "react";
import { RotateCcw } from "lucide-react";

// ±10s skip glyph: an outline circular arrow with a "10" in the centre — the YouTube/Plex-native
// muscle-memory shape. Deliberately distinct from the episode-level SkipBack/SkipForward (double
// triangles) and from Restart's plain RotateCcw. The arrowhead is an L-corner at the arc's open end,
// the same construction lucide uses for RotateCcw/RotateCw, so it sits consistently in the bar.
export function Skip10({ dir }: { dir: "back" | "forward" }) {
  const back = dir === "back";
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className="w-6 h-6"
      aria-hidden="true"
    >
      {back ? (
        <>
          <path d="M4 8.5 A8 8 0 1 1 4 12" />
          <path d="M4 8.5 L4 4 M4 8.5 L8.5 8.5" />
        </>
      ) : (
        <>
          <path d="M20 8.5 A8 8 0 1 0 20 12" />
          <path d="M20 8.5 L20 4 M20 8.5 L15.5 8.5" />
        </>
      )}
      <text
        x="12"
        y="14.5"
        textAnchor="middle"
        fontSize="8"
        fontWeight={700}
        fill="currentColor"
        stroke="none"
      >
        10
      </text>
    </svg>
  );
}

// --- settings-panel building blocks ------------------------------------------------------------
export function PanelHead({ children }: { children: ReactNode }) {
  return (
    <div className="px-1 pt-2 pb-1 text-2xs uppercase tracking-wide text-white/50">{children}</div>
  );
}
export function Slider({
  label,
  value,
  min,
  max,
  step,
  suffix,
  onChange,
  onReset,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step: number;
  suffix?: string;
  onChange: (v: number) => void;
  onReset?: () => void;
}) {
  return (
    <div className="px-1 py-1">
      <div className="mb-1 flex items-center justify-between text-[0.75rem] text-white/80">
        <span>{label}</span>
        <span className="flex items-center gap-1.5">
          <span className="tabular-nums text-white/60">
            {Number.isInteger(value) ? value : value.toFixed(1)}
            {suffix ?? ""}
          </span>
          {onReset && (
            <button onClick={onReset} className="text-white/40 hover:text-white" aria-label="reset">
              <RotateCcw className="h-3 w-3" />
            </button>
          )}
        </span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full accent-accent"
      />
    </div>
  );
}
export function Toggle({
  label,
  checked,
  onChange,
}: {
  label: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <label className="flex cursor-pointer items-center justify-between px-1 py-1.5">
      <span className="text-[0.75rem] text-white/80">{label}</span>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        className="h-4 w-4 accent-accent"
      />
    </label>
  );
}

// A control button with a tooltip that opens ABOVE it (so it never clips off the bottom of the
// viewport, unlike a native title tooltip on the bottom control bar).
export function Ctrl({
  label,
  onClick,
  disabled,
  align = "center",
  children,
}: {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  // Tooltip horizontal anchor: "start"/"end" for edge buttons so it doesn't clip off the viewport.
  align?: "start" | "center" | "end";
  children: ReactNode;
}) {
  const pos =
    align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2";
  return (
    <div className="relative flex group/ctrl">
      <button
        onClick={onClick}
        disabled={disabled}
        aria-label={label}
        className="p-1 hover:text-accent disabled:opacity-30"
      >
        {children}
      </button>
      <span
        className={`pointer-events-none absolute bottom-full ${pos} mb-2 whitespace-nowrap rounded-sm bg-black/90 px-2 py-1 text-2xs text-white opacity-0 transition group-hover/ctrl:opacity-100`}
      >
        {label}
      </span>
    </div>
  );
}