/* ============================================================
   B1 — reusable controls: toggle, range, segmented, dialog
   ============================================================ */
function B1Toggle({ on, onChange, accent = 'var(--gold)' }) {
  return (
    <button onClick={() => onChange(!on)} aria-pressed={on} style={{
      width: 42, height: 25, borderRadius: 999, border: 'none', cursor: 'pointer',
      padding: 3, flexShrink: 0, transition: 'background .2s ease',
      background: on ? accent : 'var(--ink-line)',
      display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start',
    }}>
      <span style={{
        width: 19, height: 19, borderRadius: '50%', background: on ? '#1B1408' : 'var(--cream-dim)',
        transition: 'all .2s ease', boxShadow: '0 1px 3px rgba(0,0,0,.3)',
      }} />
    </button>
  );
}

function B1Range({ value, min = 0, max = 100, onChange, accent = 'var(--gold)' }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <input type="range" min={min} max={max} value={value}
      onChange={e => onChange(Number(e.target.value))}
      style={{
        width: '100%', height: 4, borderRadius: 4, appearance: 'none', WebkitAppearance: 'none',
        cursor: 'pointer', outline: 'none',
        background: `linear-gradient(90deg, ${accent} 0 ${pct}%, var(--ink-line) ${pct}% 100%)`,
      }}
      className="b1-range" />
  );
}

function B1Segment({ options, value, onChange, accent = 'var(--gold)', small = false }) {
  return (
    <div style={{
      display: 'flex', gap: 2, padding: 3, borderRadius: 10,
      background: 'var(--ink)', border: '1px solid var(--ink-line)',
    }}>
      {options.map(o => {
        const v = typeof o === 'object' ? o.k : o;
        const lbl = typeof o === 'object' ? o.label : o;
        const on = v === value;
        return (
          <button key={v} onClick={() => onChange(v)} style={{
            flex: 1, border: 'none', cursor: 'pointer', borderRadius: 7,
            padding: small ? '6px 4px' : '8px 6px',
            fontFamily: 'var(--font-body)', fontSize: small ? 11.5 : 12.5, fontWeight: on ? 500 : 400,
            background: on ? accent : 'transparent',
            color: on ? '#1B1408' : 'var(--cream-dim)', transition: 'all .15s ease',
            whiteSpace: 'nowrap',
          }}>{lbl}</button>
        );
      })}
    </div>
  );
}

function ConfirmDialog({ open, title, body, confirmLabel, cancelLabel = 'Quay lại', danger = true, onConfirm, onCancel }) {
  if (!open) return null;
  return (
    <div onClick={onCancel} style={{
      position: 'absolute', inset: 0, zIndex: 80,
      background: 'rgba(13,19,31,.72)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28,
      animation: 'b1-rise-in .2s ease both',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 320, background: 'var(--ink-soft)',
        border: '1px solid var(--ink-line)', borderRadius: 'var(--r-lg)',
        padding: '26px 24px 22px', textAlign: 'center',
        boxShadow: '0 30px 60px -20px rgba(0,0,0,.7)',
      }}>
        <div style={{
          width: 46, height: 46, borderRadius: '50%', margin: '0 auto 16px',
          background: danger ? 'rgba(168,65,58,.16)' : 'rgba(184,153,104,.16)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
        }}>{danger ? '🕯️' : '🪷'}</div>
        <h3 className="b1-display" style={{ fontSize: 25, margin: 0, color: 'var(--cream)' }}>{title}</h3>
        <p style={{ fontSize: 13, color: 'var(--cream-dim)', margin: '9px 0 22px', lineHeight: 1.6 }}>{body}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          <button className={'b1-btn ' + (danger ? 'b1-btn-vermilion' : 'b1-btn-primary')} onClick={onConfirm} style={{ width: '100%' }}>
            {confirmLabel}
          </button>
          <button className="b1-btn b1-btn-ghost" onClick={onCancel} style={{ width: '100%' }}>{cancelLabel}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { B1Toggle, B1Range, B1Segment, ConfirmDialog });