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

// --- 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>
  );
}