// Accessibility.jsx — ГОСТ Р 52872-2019 compliant a11y panel + state

const A11Y_DEFAULTS = {
  font: 'md',       // sm | md | lg | xl
  color: 'bw',      // bw (black on white) | wb (white on black) | bg (black on beige) | bs (light-blue on dark-blue)
  family: 'serif',  // serif | sans
  kerning: 'normal',// normal | wide
  images: 'on',     // on | off
};

function useA11y() {
  const [s, setS] = React.useState(() => {
    try {
      const stored = localStorage.getItem('a11y_v1');
      if (stored) return { ...A11Y_DEFAULTS, ...JSON.parse(stored) };
    } catch (e) {}
    return A11Y_DEFAULTS;
  });
  const setOne = (k, v) => setS(p => ({ ...p, [k]: v }));
  React.useEffect(() => {
    try { localStorage.setItem('a11y_v1', JSON.stringify(s)); } catch (e) {}
  }, [s]);
  return [s, setOne, setS];
}

function applyA11y(active, s) {
  const html = document.documentElement;
  if (active) {
    html.setAttribute('data-acc', '1');
    html.setAttribute('data-acc-font', s.font);
    html.setAttribute('data-acc-color', s.color);
    html.setAttribute('data-acc-family', s.family);
    html.setAttribute('data-acc-kerning', s.kerning);
    html.setAttribute('data-acc-images', s.images);
  } else {
    html.removeAttribute('data-acc');
    html.removeAttribute('data-acc-font');
    html.removeAttribute('data-acc-color');
    html.removeAttribute('data-acc-family');
    html.removeAttribute('data-acc-kerning');
    html.removeAttribute('data-acc-images');
  }
}

function A11yBar({ open, settings, setOne, onClose }) {
  if (!open) return null;
  const Group = ({ label, children }) => (
    <div className="a11y-group">
      <div className="a11y-label">{label}</div>
      <div className="a11y-controls">{children}</div>
    </div>
  );
  const Opt = ({ k, v, label, title, style }) => (
    <button
      type="button"
      title={title || ''}
      className={`a11y-btn ${settings[k] === v ? 'on' : ''}`}
      onClick={() => setOne(k, v)}
      style={style}
    >{label}</button>
  );
  return (
    <div className="a11y-bar" role="region" aria-label="Настройки версии для слабовидящих">
      <div className="a11y-inner">
        <Group label="Размер шрифта">
          <Opt k="font" v="sm" label="А"   title="Стандартный" />
          <Opt k="font" v="md" label="А+"  title="Увеличенный" />
          <Opt k="font" v="lg" label="А++" title="Большой" />
          <Opt k="font" v="xl" label="А+++" title="Очень большой" />
        </Group>
        <Group label="Цвета">
          <Opt k="color" v="bw" label="Ч/Б" title="Чёрным по белому"
            style={{background: '#fff', color: '#000'}} />
          <Opt k="color" v="bg" label="Ч/Ж" title="Чёрным по жёлтому"
            style={{background: '#fff5c2', color: '#000'}} />
          <Opt k="color" v="wb" label="Б/Ч" title="Белым по чёрному"
            style={{background: '#000', color: '#fff'}} />
          <Opt k="color" v="bs" label="Г/С" title="Голубым по синему"
            style={{background: '#003366', color: '#9DD1FF'}} />
        </Group>
        <Group label="Шрифт">
          <Opt k="family" v="serif" label="С засечками" />
          <Opt k="family" v="sans"  label="Без засечек" />
        </Group>
        <Group label="Кернинг">
          <Opt k="kerning" v="normal" label="Стандарт" />
          <Opt k="kerning" v="wide"   label="Большой" />
        </Group>
        <Group label="Изображения">
          <Opt k="images" v="on"  label="Показать" />
          <Opt k="images" v="off" label="Скрыть" />
        </Group>
        <button type="button" className="a11y-close" onClick={onClose}>
          Обычная версия →
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { useA11y, applyA11y, A11yBar, A11Y_DEFAULTS });