"use client";

import type { WidgetConfig } from "../lib/config";

// The small shared pieces both configuration surfaces use: the checkbox, and
// the settings that belong to the widget as a whole rather than to any one
// section. Keeping the labels in one place matters — they are the accessible
// names the e2e suite selects by.

export function Check({
  label,
  hint,
  checked,
  onChange,
}: {
  label: string;
  hint?: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <label className="flex items-start gap-2 text-sm">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        className="mt-0.5 h-4 w-4 shrink-0"
      />
      <span className="min-w-0">
        <span className="block">{label}</span>
        {hint && (
          <span className="block text-xs text-muted-foreground">{hint}</span>
        )}
      </span>
    </label>
  );
}

// Everything that isn't about one section: chrome, time formatting, how the
// columns behave when the window is small, and the two value inputs.
export function GlobalOptions({
  config,
  onChange,
  className = "",
}: {
  config: WidgetConfig;
  onChange: (patch: Partial<WidgetConfig>) => void;
  className?: string;
}) {
  return (
    <div className={`flex flex-col gap-3 ${className}`}>
      <div className="flex flex-wrap gap-x-6 gap-y-2">
        <Check
          label="Show section titles"
          checked={config.showTitles}
          onChange={(v) => onChange({ showTitles: v })}
        />
        <Check
          label="Hide when idle"
          checked={config.hideIdle}
          onChange={(v) => onChange({ hideIdle: v })}
        />
        <Check
          label="Show settings gear"
          checked={config.settings}
          onChange={(v) => onChange({ settings: v })}
        />
        <Check
          label="Absolute timestamps"
          checked={config.syncTimeAbsolute}
          onChange={(v) => onChange({ syncTimeAbsolute: v })}
        />
        <Check
          label="Stack columns when narrow"
          checked={config.stackNarrow}
          onChange={(v) => onChange({ stackNarrow: v })}
        />
      </div>
      <div className="flex flex-wrap gap-4">
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Channel filter (slug, optional)</span>
          <input
            type="text"
            value={config.channel ?? ""}
            onChange={(e) => onChange({ channel: e.target.value || undefined })}
            placeholder="all channels"
            className="rounded border border-border bg-card px-2 py-1"
          />
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Poll interval (seconds)</span>
          <input
            type="number"
            min={1}
            value={config.pollSeconds}
            onChange={(e) =>
              onChange({
                pollSeconds: Math.max(1, Math.round(Number(e.target.value) || 1)),
              })
            }
            className="w-24 rounded border border-border bg-card px-2 py-1"
          />
        </label>
      </div>
    </div>
  );
}