/* ══════════════════════════════════════════════════════════════════
   ATLAS COCKPIT — SETTINGS · CONNECTIONS
   Three-column provider rows, masked credential inputs, save chip,
   tri-state status pill, and the orchestrator-unreachable fallback.
   Never persists raw secrets — saveConnection() posts to the
   orchestrator and stores only a masked tail.
   ══════════════════════════════════════════════════════════════════ */

const AGG_NOTE = {
  live: 'All providers connected.',
  partial: 'Some providers connected; others pending.',
  errored: 'A provider reported an error — open it to retry.',
  local: 'No providers saved yet. Keys live in orchestrator/.env until connected.'
};

function ConnAggPill() {
  useStore(s => s.connections);
  const agg = connectionsAggregate();
  return React.createElement('span', { className: cls('agg-pill', 'agg-' + agg.tone) },
    React.createElement('span', { className: 'agg-dot' }), agg.label);
}

function StatusPillConn({ name, conn, onViewError }) {
  const status = (conn && conn.status) || 'pending';
  if (status === 'connected') return React.createElement('span', { className: 'conn-status connected' }, React.createElement('span', { className: 'cs-dot' }), 'Connected');
  if (status === 'errored') return React.createElement('button', { className: 'conn-status errored', onClick: onViewError }, React.createElement('span', { className: 'cs-dot' }), 'Errored — view');
  return React.createElement('span', { className: 'conn-status pending' }, React.createElement('span', { className: 'cs-dot' }), 'Pending');
}

function ConnectionRow({ provider }) {
  const conn = useStore(s => (s.connections || {})[provider.name]);
  const reachable = useStore(s => s.orchestratorReachable !== false);
  const connected = conn && conn.status === 'connected';
  const [editing, setEditing] = useState(false);
  const [vals, setVals] = useState({});
  const [show, setShow] = useState({});
  const [saving, setSaving] = useState(false);
  const dirty = provider.fields.some(f => (vals[f.key] || '').trim());

  const reset = () => { setVals({}); setShow({}); };
  const save = async () => {
    const payload = {};
    provider.fields.forEach(f => { if ((vals[f.key] || '').trim()) payload[f.key] = vals[f.key].trim(); });
    setSaving(true);
    try {
      await saveConnection(provider.name, payload);
    } finally {
      setSaving(false);
      setEditing(false);
      reset();
    }
  };
  const viewError = () => openDrawer('connection', provider.name);

  const showInputs = !connected || editing;

  return React.createElement('div', { className: 'conn-row' },
    /* Name + dot */
    React.createElement('div', { className: 'conn-name' },
      React.createElement('span', { className: 'conn-dot', style: { background: provider.dot || 'var(--accent)' } }),
      React.createElement('span', { className: 'conn-nm' }, provider.name)),
    /* Credentials */
    React.createElement('div', { className: 'conn-creds' },
      connected && !editing
        ? React.createElement('div', { className: 'conn-saved' },
            React.createElement('span', { className: 'conn-mask mono' }, '\u2022\u2022\u2022\u2022 ', (conn.tail || '').replace(/^\u2026/, '')),
            React.createElement('button', { className: 'btn xs', onClick: () => { setEditing(true); reset(); } }, 'Replace'))
        : React.createElement('div', { className: 'conn-fields' },
            provider.fields.map(f => React.createElement('div', { key: f.key, className: 'conn-field' },
              React.createElement('input', {
                className: 'field conn-input', type: (f.secret && !show[f.key]) ? 'password' : 'text',
                placeholder: f.label + (f.type === 'url' ? '  (https://\u2026)' : ''), value: vals[f.key] || '',
                disabled: !reachable || saving, autoComplete: 'off', spellCheck: false,
                onChange: e => setVals(v => ({ ...v, [f.key]: e.target.value }))
              }),
              f.secret && React.createElement('button', { className: 'conn-eye', type: 'button', tabIndex: -1, title: show[f.key] ? 'Hide' : 'Show', onClick: () => setShow(s => ({ ...s, [f.key]: !s[f.key] })), disabled: saving },
                React.createElement(Icon, { name: show[f.key] ? 'sun' : 'focus', size: 14 })),
              dirty && f === provider.fields[provider.fields.length - 1] && reachable && React.createElement('button', { className: cls('conn-save-chip', saving && 'saving'), onClick: save, disabled: saving },
                saving
                  ? React.createElement(React.Fragment, null, React.createElement('span', { className: 'conn-spinner' }), 'Saving\u2026')
                  : 'Save')
            )),
            saving
              ? React.createElement('span', { className: 'conn-help mono' }, 'Validating against ', provider.name, '\u2026 (Render cold start can take up to 60s)')
              : provider.help
                ? React.createElement('a', { className: 'conn-help', href: provider.help, target: '_blank', rel: 'noopener' }, 'How to get this ', React.createElement(Icon, { name: 'arrowR', size: 11 }), provider.helpHint ? ' \u00b7 ' + provider.helpHint : '')
                : React.createElement('span', { className: 'conn-help muted-help' }, 'Paste any incoming webhook URL')),
    ),
    /* Status */
    React.createElement('div', { className: 'conn-stat' },
      React.createElement(StatusPillConn, { name: provider.name, conn, onViewError: viewError }))
  );
}

function ConnectionsSection() {
  const D = window.ATLAS_DATA;
  const reachable = useStore(s => s.orchestratorReachable !== false);
  const agg = connectionsAggregate();
  return React.createElement('div', { className: 'block' },
    React.createElement('div', { className: 'block-head' },
      React.createElement('span', { className: 'block-title' }, 'Connections'),
      React.createElement('span', { className: 'block-aside' }, React.createElement(ConnAggPill))),
    !reachable && React.createElement('div', { className: 'conn-unreachable' },
      React.createElement(Icon, { name: 'alert', size: 16, className: 'cu-ico' }),
      React.createElement('span', null, 'Orchestrator unreachable \u2014 paste keys into ', React.createElement('span', { className: 'mono' }, 'orchestrator/.env'), ' and reload. Status pills read live from ', React.createElement('span', { className: 'mono' }, '/health'), ' once available.')),
    React.createElement('div', { className: 'card', style: { overflow: 'hidden' } },
      React.createElement('div', { className: 'conn-row conn-head' },
        React.createElement('div', { className: 'conn-name' }, 'Provider'),
        React.createElement('div', { className: 'conn-creds' }, 'Credentials'),
        React.createElement('div', { className: 'conn-stat' }, 'Status')),
      D.connections.map(p => React.createElement(ConnectionRow, { key: p.name, provider: p }))),
    React.createElement('div', { className: 'conn-foot eyebrow' }, AGG_NOTE[agg.tone])
  );
}

Object.assign(window, { ConnectionsSection, ConnAggPill, ConnectionRow });