import React, { useRef, useState, useCallback, useLayoutEffect } from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-segmented", `
  .at-segmented{position:relative;display:inline-flex;width:max-content;gap:2px;padding:2px;
    background:var(--bg-tint);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
  .at-segmented__thumb{position:absolute;top:2px;bottom:2px;left:0;width:var(--seg-w,0);
    transform:translateX(var(--seg-x,0));background:var(--at-white);border-radius:4px;
    box-shadow:0 1px 2px rgba(43,24,38,.1);transition:none;pointer-events:none}
  .at-segmented.is-ready .at-segmented__thumb{transition:transform .14s ease,width .14s ease}
  .at-segmented button{position:relative;z-index:1;border:0;background:transparent;padding:4px 12px;
    border-radius:4px;font-family:var(--font-sans);font-size:12px;line-height:18px;font-weight:600;
    color:var(--fg-4);cursor:pointer;transition:color .12s ease}
  .at-segmented button[aria-pressed="true"]{color:var(--fg-1)}
  @media (prefers-reduced-motion: reduce){.at-segmented.is-ready .at-segmented__thumb{transition:none}}
`);

export function Segmented({ options = [], value, defaultValue, onChange, "aria-label": ariaLabel }) {
  const controlled = value !== undefined;
  const first = options[0] ? options[0].value : undefined;
  const [internal, setInternal] = useState(defaultValue !== undefined ? defaultValue : first);
  const current = controlled ? value : internal;
  const ref = useRef(null);
  const ready = useRef(false);

  const place = useCallback(() => {
    const root = ref.current;
    if (!root) return;
    const active = root.querySelector('button[aria-pressed="true"]') || root.querySelector("button");
    const thumb = root.querySelector(".at-segmented__thumb");
    if (!active || !thumb) return;
    const cr = root.getBoundingClientRect();
    if (!cr.width) return;
    const br = active.getBoundingClientRect();
    root.style.setProperty("--seg-x", (br.left - cr.left - root.clientLeft) + "px");
    root.style.setProperty("--seg-w", br.width + "px");
    if (!ready.current) {
      void root.offsetWidth; // commit the initial position before enabling the slide
      root.classList.add("is-ready");
      ready.current = true;
    }
  }, []);

  useLayoutEffect(() => { place(); }, [current, options, place]);
  useLayoutEffect(() => {
    window.addEventListener("resize", place);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(place);
    return () => window.removeEventListener("resize", place);
  }, [place]);

  function select(v) {
    if (!controlled) setInternal(v);
    if (onChange) onChange(v);
  }

  return (
    <div className="at-segmented" role="group" aria-label={ariaLabel} ref={ref}>
      <span className="at-segmented__thumb" aria-hidden="true" />
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          aria-pressed={current === o.value ? "true" : "false"}
          onClick={() => select(o.value)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}