/* ui.jsx — shared Resum3 components, exported to window */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  /* ---------- Segmented control ---------- */
  function Segmented({ options, value, onChange, size }) {
    const refs = useRef({});
    const [pill, setPill] = useState(null);
    useEffect(() => {
      const el = refs.current[value];
      if (el) setPill({ left: el.offsetLeft, width: el.offsetWidth });
    }, [value, options]);
    return (
      React.createElement('div', { className: 'seg' + (size === 'sm' ? ' seg-sm' : '') },
        pill && React.createElement('div', { className: 'seg-pill', style: { left: pill.left, width: pill.width } }),
        options.map((o) => {
          const val = typeof o === 'string' ? o : o.value;
          const label = typeof o === 'string' ? o : o.label;
          return React.createElement('button', {
            key: val, ref: (n) => (refs.current[val] = n),
            className: 'seg-btn' + (value === val ? ' active' : ''),
            onClick: () => onChange(val),
          }, o.icon && React.createElement(Icon[o.icon], null), React.createElement('span', null, label));
        })
      )
    );
  }

  /* ---------- Score ring ---------- */
  function ScoreRing({ score, size = 132, label, animate = true }) {
    const [val, setVal] = useState(animate ? 0 : score);
    useEffect(() => {
      if (!animate) { setVal(score); return; }
      let raf, start;
      const dur = 1100;
      const tick = (t) => {
        if (!start) start = t;
        const p = Math.min(1, (t - start) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(eased * score));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [score, animate]);
    const stroke = 11;
    const r = (size - stroke) / 2;
    const c = 2 * Math.PI * r;
    const off = c * (1 - val / 100);
    const tone = score >= 80 ? 'var(--accent)' : score >= 65 ? 'var(--amber)' : 'var(--rose)';
    return (
      React.createElement('div', { className: 'ring', style: { width: size, height: size } },
        React.createElement('svg', { width: size, height: size, style: { transform: 'rotate(-90deg)' } },
          React.createElement('circle', { cx: size / 2, cy: size / 2, r, fill: 'none', stroke: 'var(--line-2)', strokeWidth: stroke }),
          React.createElement('circle', { cx: size / 2, cy: size / 2, r, fill: 'none', stroke: tone, strokeWidth: stroke,
            strokeLinecap: 'round', strokeDasharray: c, strokeDashoffset: off, style: { transition: 'stroke-dashoffset .1s linear' } }),
        ),
        React.createElement('div', { className: 'ring-mid' },
          React.createElement('div', { className: 'ring-num', style: { color: tone } }, val, React.createElement('span', null, '%')),
          label && React.createElement('div', { className: 'ring-label' }, label),
        )
      )
    );
  }

  /* ---------- Keyword chip ---------- */
  function Chip({ children, tone = 'match', icon }) {
    return React.createElement('span', { className: 'chip chip-' + tone },
      icon && React.createElement(Icon[icon], null),
      children);
  }

  /* ---------- Copy button (with feedback) ---------- */
  function CopyBtn({ text, label = 'Copy', className = 'btn btn-ghost btn-sm' }) {
    const [done, setDone] = useState(false);
    return React.createElement('button', {
      className, onClick: () => {
        try { navigator.clipboard && navigator.clipboard.writeText(text || ''); } catch (e) {}
        setDone(true); setTimeout(() => setDone(false), 1400);
      }
    },
      React.createElement(done ? Icon.check : Icon.copy, null),
      React.createElement('span', null, done ? 'Copied' : label));
  }

  /* ---------- Toast ---------- */
  function Toast({ toast }) {
    if (!toast) return null;
    return React.createElement('div', { className: 'toast', key: toast.id },
      React.createElement(Icon[toast.icon || 'checkCircle'], null),
      React.createElement('span', null, toast.msg));
  }

  /* ---------- Tooltip-free section header ---------- */
  function SectionHead({ n, icon, title, sub, right }) {
    return React.createElement('div', { className: 'sec-head' },
      React.createElement('div', { className: 'sec-head-l' },
        n && React.createElement('div', { className: 'sec-n' }, n),
        icon && React.createElement('div', { className: 'sec-ic' }, React.createElement(Icon[icon], null)),
        React.createElement('div', null,
          React.createElement('div', { className: 'sec-title' }, title),
          sub && React.createElement('div', { className: 'sec-sub' }, sub),
        ),
      ),
      right && React.createElement('div', { className: 'sec-head-r' }, right),
    );
  }

  window.UI = { Segmented, ScoreRing, Chip, CopyBtn, Toast, SectionHead };
})();