// ─────────────────────────────────────────────
// DEV_Shared.jsx
//
// Shared components used across the DEV UI.
// Counterpart to DO_Shared.jsx on the APP side.
//
// Start small: only DOConfirm for now. Add more shared
// pieces (icons, buttons, common styles) here over time
// as the same pattern shows up in multiple DEV files.
//
// Loading order:
//   Load this file BEFORE any DEV_* file that uses these
//   components. Currently consumed by:
//     - DEV_Database.jsx
//     - DEV_DatabaseData.jsx  (Import / Export tabs)
//     - DEV_Design.jsx        (will eventually replace its
//                              own V6-era DOConfirm)
//
// Babel CDN reminder: hooks called as React.useState(),
// not destructured at the top of the file (causes timing
// errors with babel-standalone).
// ─────────────────────────────────────────────

// ─────────────────────────────────────────────
// DOConfirm
//
// Drop-in replacement for window.confirm() with a
// styled modal that matches the rest of the DEV UI.
//
// Props:
//   msg          string  — short headline (required)
//   detail       string  — optional secondary text
//   okLabel      string  — confirm button text  (default 'OK')
//   cancelLabel  string  — cancel button text   (default 'Cancel')
//   okDanger     bool    — red confirm button   (default false)
//   onOk         fn      — called when confirmed (required)
//   onClose      fn      — called on cancel / backdrop click / Esc (required)
//
// Usage pattern:
//   const [confirm, setConfirm] = React.useState(null);
//   ...
//   <button onClick={() => setConfirm({
//     msg:      'Delete this row?',
//     detail:   'All columns will be removed.',
//     okLabel:  'Delete',
//     okDanger: true,
//     onOk:     () => deleteRow(row.id),
//   })}>Delete</button>
//   ...
//   {confirm && <DOConfirm {...confirm} onClose={() => setConfirm(null)} />}
// ─────────────────────────────────────────────
function DOConfirm({ msg, detail, okLabel = 'OK', cancelLabel = 'Cancel',
                    okDanger = false, onOk, onClose }) {

  // Close on Escape
  React.useEffect(() => {
    function handleKey(e) {
      if (e.key === 'Escape') onClose?.();
      if (e.key === 'Enter')  { onOk?.(); onClose?.(); }
    }
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [onOk, onClose]);

  function handleBackdrop(e) {
    if (e.target === e.currentTarget) onClose?.();
  }

  function handleOk() {
    onOk?.();
    onClose?.();
  }

  return (
    <div style={SDC.backdrop} onClick={handleBackdrop}>
      <div style={SDC.modal}>
        <div style={SDC.title}>{msg}</div>
        {detail && <div style={SDC.detail}>{detail}</div>}
        <div style={SDC.footer}>
          <button style={SDC.cancelBtn} onClick={onClose}>
            {cancelLabel}
          </button>
          <button
            style={okDanger ? SDC.dangerBtn : SDC.okBtn}
            onClick={handleOk}>
            {okLabel}
          </button>
        </div>
      </div>
    </div>
  );
}


// ─────────────────────────────────────────────
// KB (Knowledge Base) — Info icon + sidebar
//
// Usage: <KBIcon kbKey="valuelists" />
//
// Fetches article from /v6/kb/:key on first open.
// Renders a slide-in sidebar with HTML content.
// Add anywhere in DEV or APP with one line.
// ─────────────────────────────────────────────
function KBIcon({ kbKey, size = 14 }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button
        onClick={() => setOpen(true)}
        title="Learn more"
        style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: '1px 3px', lineHeight: 1, display: 'inline-flex',
          alignItems: 'center', color: '#94a3b8', flexShrink: 0,
        }}
        onMouseEnter={e => e.currentTarget.style.color = '#2563eb'}
        onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'}
      >
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <line x1="12" y1="8" x2="12" y2="8" strokeWidth="2.5"/>
          <line x1="12" y1="12" x2="12" y2="16"/>
        </svg>
      </button>
      {open && <KBSidebar kbKey={kbKey} onClose={() => setOpen(false)} />}
    </>
  );
}



// ─────────────────────────────────────────────
// SDC — Shared DEV Component styles
//
// Self-contained so consumers don't need to import
// styles from elsewhere. Visual language matches
// SDB (DEV_Database) and SDS (DEV_Design) modals.
// ─────────────────────────────────────────────
const SDC = {
  backdrop:  { position:'fixed', inset:0, background:'rgba(0,0,0,0.4)',
               display:'flex', alignItems:'center', justifyContent:'center',
               zIndex:300 },
  modal:     { background:'#fff', borderRadius:14, padding:'28px 32px',
               width:'100%', maxWidth:400,
               boxShadow:'0 20px 60px rgba(0,0,0,0.2)',
               fontFamily:'DM Sans, sans-serif' },
  title:     { fontSize:15, fontWeight:600, color:'#0f1923', marginBottom:8 },
  detail:    { fontSize:13, color:'#374151', marginBottom:24, lineHeight:1.6 },
  footer:    { display:'flex', gap:8, justifyContent:'flex-end', marginTop:8 },
  cancelBtn: { padding:'9px 18px', background:'#fff', color:'#374151',
               border:'1.5px solid #e2e8f0', borderRadius:7, fontSize:13,
               cursor:'pointer', fontFamily:'DM Sans, sans-serif' },
  okBtn:     { padding:'9px 20px', background:'#0f1923', color:'#fff',
               border:'none', borderRadius:7, fontSize:13, fontWeight:600,
               cursor:'pointer', fontFamily:'DM Sans, sans-serif' },
  dangerBtn: { padding:'9px 20px', background:'#dc2626', color:'#fff',
               border:'none', borderRadius:7, fontSize:13, fontWeight:600,
               cursor:'pointer', fontFamily:'DM Sans, sans-serif' },
};