import type { ReactNode } from "react";
import Tooltip from "../Tooltip";

// Shared form/settings primitives, factored out of the many panels that each re-declared
// them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.

/** The standard text/select/number input style (full-width, surface bg, accent focus ring) — the
 * literal string was copy-pasted into DownloadCenter/DownloadDialog/ProfileEditor/ShareDialog/
 * VideoEditor. NOTE: the settings-family panels (Settings/Config/Setup/Welcome) use a DIFFERENT
 * `bg-card rounded-xl focus:border-accent` style; unifying the two is a design call left to the
 * glass-consistency epic, not this DRY extract. */
export const inputCls =
  "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";

/** The standard text button style (used verbatim by ShareDialog + VideoEditor). */
export const btnCls = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50";

/** Pill on/off switch — the bare control; compose it with your own label/row. Pass `label` for
 * the accessible name (the visible row text) since the control itself has no inner text. */
export function Switch({
  checked,
  onChange,
  label,
  disabled,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  label?: string;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={`w-9 h-5 rounded-full transition relative shrink-0 disabled:opacity-50 disabled:cursor-not-allowed ${checked ? "bg-accent" : "bg-border"}`}
    >
      <span
        className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${
          checked ? "left-[18px]" : "left-0.5"
        }`}
      />
    </button>
  );
}

/** A titled settings block. Default = a plain block with an uppercase caption; `card` wraps it
 * in a glass card (the admin pages' style). */
export function Section({
  title,
  card,
  children,
}: {
  title: string;
  card?: boolean;
  children: ReactNode;
}) {
  return (
    <div className={card ? "glass rounded-2xl p-4 mb-4" : "mb-6"}>
      <div className={`text-xs uppercase tracking-wide text-muted ${card ? "mb-3" : "mb-2"}`}>
        {title}
      </div>
      {children}
    </div>
  );
}

/** A label that reveals an explanatory caption on hover (dotted underline) when `hint` is set.
 * No-op styling when there's no hint, so it's safe to use unconditionally. */
function HintLabel({ hint, children }: { hint?: string; children: ReactNode }) {
  return (
    <Tooltip hint={hint ?? ""}>
      <span
        className={
          hint
            ? "underline decoration-dotted decoration-muted/40 underline-offset-4 cursor-help"
            : ""
        }
      >
        {children}
      </span>
    </Tooltip>
  );
}

/** A settings row: a (hint-able) label on the left, a control on the right. */
export function SettingRow({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: ReactNode;
}) {
  return (
    <div className="flex items-center justify-between gap-3 py-1.5 text-sm">
      <HintLabel hint={hint}>{label}</HintLabel>
      {children}
    </div>
  );
}