/* ============================================================
   Operion WTT — shared hooks + UI primitives
   window: useStore, useApp, AppCtx, Card, CardHead, KPI, Badge,
   SDot, Btn, Toggle, ModeSwitch, MetricRow, ProgressBar,
   Drawer, statusInfo, Field, Seg, SearchBox, Sel
   ============================================================ */
(function () {
  const { useSyncExternalStore, useContext, createContext, useState } = React;
  const Icon = window.Icon;

  const AppCtx = createContext(null);
  window.AppCtx = AppCtx;
  window.useApp = () => useContext(AppCtx);

  window.useStore = function useStore() {
    useSyncExternalStore(window.STORE.subscribe, window.STORE.getVersion);
    return window.STORE.state;
  };

  // status -> {cls, labelKey}
  const STATUS = {
    run: { cls: 'run', k: 'st.run' },
    running: { cls: 'run', k: 'state.running' },
    on: { cls: 'run', k: 'st.on' },
    open: { cls: 'run', k: 'st.open' },
    online: { cls: 'run', k: 'st.online' },
    conform: { cls: 'run', k: 'st.conform' },
    ok: { cls: 'run', k: 'st.ok' },
    idle: { cls: 'idle', k: 'st.idle' },
    off: { cls: 'idle', k: 'st.off' },
    stopped: { cls: 'idle', k: 'st.stopped' },
    closed: { cls: 'idle', k: 'st.closed' },
    paused: { cls: 'idle', k: 'state.paused' },
    warn: { cls: 'warn', k: 'st.attention' },
    warning: { cls: 'warn', k: 'sev.warning' },
    partial: { cls: 'warn', k: 'st.partial' },
    attention: { cls: 'warn', k: 'st.attention' },
    maintenance: { cls: 'warn', k: 'state.maintenance' },
    alarm: { cls: 'alarm', k: 'state.alarm' },
    fault: { cls: 'alarm', k: 'st.fault' },
    critical: { cls: 'alarm', k: 'sev.critical' },
    offline: { cls: 'alarm', k: 'st.offline' },
    nonconform: { cls: 'alarm', k: 'st.nonconform' },
    info: { cls: 'info', k: 'sev.info' },
    sim: { cls: 'info', k: 'st.sim' },
    auto: { cls: 'info', k: 'st.auto' },
    manual: { cls: 'idle', k: 'st.manual' },
  };
  function statusInfo(s) { return STATUS[s] || { cls: 'idle', k: s }; }
  window.statusInfo = statusInfo;

  function Badge({ status, label, pulse, cls }) {
    const t = window.useApp().t;
    const inf = status ? statusInfo(status) : { cls: cls || 'idle' };
    const txt = label !== undefined ? label : t(inf.k);
    return React.createElement('span', { className: 'badge ' + inf.cls + (pulse ? ' pulse' : '') },
      React.createElement('span', { className: 'bdot' }), txt);
  }
  function SDot({ status, title }) {
    const inf = statusInfo(status);
    return React.createElement('span', { className: 'sdot ' + inf.cls, title });
  }

  function Card({ children, cls = '', style, onClick, span }) {
    return React.createElement('div', { className: 'card ' + cls, style: Object.assign(span ? { gridColumn: 'span ' + span } : {}, style), onClick }, children);
  }
  function CardHead({ icon, title, sub, right, bordered }) {
    return React.createElement('div', { className: 'card-head' + (bordered ? ' bordered' : '') },
      icon && React.createElement('span', { className: 'ic' }, React.createElement(Icon, { name: icon, size: 18 })),
      React.createElement('div', { style: { flex: 1, minWidth: 0 } },
        React.createElement('h3', null, title),
        sub && React.createElement('div', { className: 'sub' }, sub)),
      React.createElement('span', { className: 'spacer' }),
      right);
  }

  function KPI({ icon, label, value, unit, delta, deltaDir, spark, sparkColor, accent, badge, onClick }) {
    return React.createElement('div', { className: 'card kpi' + (accent ? ' accent' : ''), onClick, style: onClick ? { cursor: 'pointer' } : null },
      React.createElement('div', { className: 'kpi-top' },
        icon && React.createElement('span', { className: 'kpi-ic' }, React.createElement(Icon, { name: icon, size: 21 })),
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'kpi-label' }, label),
          value !== undefined && React.createElement('div', { className: 'kpi-val' }, value, unit && React.createElement('span', { className: 'unit' }, unit)),
          badge)),
      delta !== undefined && React.createElement('div', { className: 'kpi-delta ' + (deltaDir || 'flat') },
        deltaDir && React.createElement(Icon, { name: deltaDir === 'up' ? 'arrowUp' : deltaDir === 'down' ? 'arrowDown' : 'flow', size: 12 }), delta),
      spark && React.createElement('div', { className: 'kpi-spark' }, React.createElement(window.Sparkline, { data: spark, color: sparkColor || '#F2941F', w: 80, h: 30 })));
  }

  function Btn({ children, icon, variant = 'ghost', sm, onClick, disabled, style, title }) {
    return React.createElement('button', { className: 'btn btn-' + variant + (sm ? ' btn-sm' : ''), onClick, disabled, style, title },
      icon && React.createElement(Icon, { name: icon, size: sm ? 14 : 16 }), children);
  }

  function Toggle({ on, onChange }) {
    return React.createElement('button', { className: 'toggle' + (on ? ' on' : ''), onClick: () => onChange(!on), 'aria-pressed': on });
  }
  function ModeSwitch({ mode, onChange }) {
    const t = window.useApp().t;
    return React.createElement('div', { className: 'modeswitch' },
      React.createElement('button', { className: mode === 'auto' ? 'active' : '', onClick: () => onChange('auto') }, t('st.auto')),
      React.createElement('button', { className: mode === 'manual' ? 'active' : '', onClick: () => onChange('manual') }, t('st.manual')));
  }

  function MetricRow({ label, value, unit }) {
    return React.createElement('div', { className: 'metric-row' },
      React.createElement('span', { className: 'ml' }, label),
      React.createElement('span', { className: 'mv' }, value, unit && React.createElement('span', { className: 'u' }, unit)));
  }

  function ProgressBar({ value, color, max = 100 }) {
    const pct = Math.max(0, Math.min(100, (value / max) * 100));
    const col = color || (pct > 85 ? 'var(--status-alarm)' : pct > 70 ? 'var(--status-warn)' : 'var(--status-run)');
    return React.createElement('div', { className: 'bar-track' },
      React.createElement('div', { className: 'bar-fill', style: { width: pct + '%', background: col } }));
  }

  function Drawer({ title, sub, icon, status, children, footer, onClose }) {
    return React.createElement(React.Fragment, null,
      React.createElement('div', { className: 'drawer-scrim', onClick: onClose }),
      React.createElement('div', { className: 'drawer' },
        React.createElement('div', { className: 'drawer-head' },
          icon && React.createElement('span', { className: 'd-ic' }, React.createElement(Icon, { name: icon, size: 20 })),
          React.createElement('div', { style: { flex: 1 } },
            React.createElement('h3', null, title),
            sub && React.createElement('div', { className: 'd-sub' }, sub)),
          status && React.createElement(Badge, { status }),
          React.createElement('button', { className: 'icon-btn', onClick: onClose, style: { width: 32, height: 32 } }, React.createElement(Icon, { name: 'x', size: 17 }))),
        React.createElement('div', { className: 'drawer-body' }, children),
        footer && React.createElement('div', { className: 'drawer-foot' }, footer)));
  }

  function DList({ items }) {
    return React.createElement('dl', { className: 'dl' },
      items.filter(Boolean).map((it, i) => React.createElement(React.Fragment, { key: i },
        React.createElement('dt', null, it[0]),
        React.createElement('dd', null, it[1]))));
  }
  function DetailSection({ title, children }) {
    return React.createElement('div', { className: 'detail-section' },
      React.createElement('h4', null, title), children);
  }

  function Seg({ options, value, onChange }) {
    return React.createElement('div', { className: 'seg' },
      options.map((o) => React.createElement('button', { key: o.v, className: value === o.v ? 'active' : '', onClick: () => onChange(o.v) }, o.label)));
  }
  function SearchBox({ value, onChange, placeholder }) {
    return React.createElement('div', { className: 'search' },
      React.createElement(Icon, { name: 'search', size: 16 }),
      React.createElement('input', { value, onChange: (e) => onChange(e.target.value), placeholder }));
  }
  function Sel({ value, onChange, options }) {
    return React.createElement('select', { className: 'select', value, onChange: (e) => onChange(e.target.value) },
      options.map((o) => React.createElement('option', { key: o.v, value: o.v }, o.label)));
  }

  function PageHead({ children }) { return React.createElement('p', { className: 'page-intro' }, children); }

  function Empty({ msg }) {
    return React.createElement('div', { className: 'empty' },
      React.createElement(Icon, { name: 'check', size: 38 }),
      React.createElement('div', null, msg));
  }

  Object.assign(window, { Badge, SDot, Card, CardHead, KPI, Btn, Toggle, ModeSwitch, MetricRow, ProgressBar, Drawer, DList, DetailSection, Seg, SearchBox, Sel, PageHead, Empty });
})();