"use client";

/**
 * HorizonSelector — segmented control «Горизонт прогноза» (958-B1 / #996).
 *
 * Controlled segmented control over the forecast horizons accepted by
 * POST /api/v1/parcels/{cad}/analyze?horizon= (6 / 12 / 18 / 24; default 12).
 * Drives useParcelAnalyzeQuery on the Site Finder analysis screen.
 *
 * A11y: role="radiogroup" wrapper + role="radio"/aria-checked per <button>
 * segment (real buttons → native keyboard focus; visible focus ring kept).
 */

const HORIZONS = [6, 12, 18, 24] as const;

interface Props {
  /** Currently selected horizon (one of 6 / 12 / 18 / 24). */
  value: number;
  /** Called with the newly selected horizon. */
  onChange: (horizon: number) => void;
  /** Disable the control while a re-analyze is in flight (prevents spamming). */
  disabled?: boolean;
}

export function HorizonSelector({ value, onChange, disabled = false }: Props) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span
        style={{
          fontSize: 12,
          fontWeight: 500,
          letterSpacing: "0.04em",
          textTransform: "uppercase",
          color: "var(--fg-secondary)",
          whiteSpace: "nowrap",
        }}
      >
        Горизонт прогноза
      </span>
      <div
        role="radiogroup"
        aria-label="Горизонт прогноза"
        style={{
          display: "inline-flex",
          borderRadius: 8,
          border: "1px solid var(--border-card)",
          background: "var(--bg-card)",
          padding: 2,
          gap: 2,
          opacity: disabled ? 0.6 : 1,
        }}
      >
        {HORIZONS.map((h) => {
          const selected = h === value;
          return (
            <button
              key={h}
              type="button"
              role="radio"
              aria-checked={selected}
              disabled={disabled}
              onClick={() => onChange(h)}
              style={{
                appearance: "none",
                cursor: disabled ? "not-allowed" : "pointer",
                padding: "6px 16px",
                borderRadius: 6,
                border: "none",
                background: selected ? "var(--accent)" : "transparent",
                color: selected ? "var(--fg-on-dark)" : "var(--fg-secondary)",
                fontSize: 13,
                fontWeight: selected ? 600 : 500,
                fontVariantNumeric: "tabular-nums",
                whiteSpace: "nowrap",
                transition: "background 0.12s, color 0.12s",
              }}
            >
              {h} мес
            </button>
          );
        })}
      </div>
    </div>
  );
}