"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;
}

// Подсказка на сегментах — поясняет, что даёт ближний / дальний горизонт.
const HORIZON_TOOLTIP =
  "6 мес — ближний спрос, точнее; 24 мес — стратегия, шире интервал";

export function HorizonSelector({ value, onChange, disabled = false }: Props) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-end",
        gap: 6,
      }}
    >
      <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}
                title={HORIZON_TOOLTIP}
                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>
      <span
        style={{
          fontSize: 12,
          lineHeight: "16px",
          color: "var(--fg-tertiary)",
          textAlign: "right",
        }}
      >
        Смена горизонта пересчитывает прогноз заново (~10–30 сек)
      </span>
    </div>
  );
}
