/* Shared primitives for the Atlantis onboarding prototype */

const BRAND = {
  blue: '#1A6BB5',
  cyan: '#00AEEF',
  yellow: '#FFD700',
  ink: '#0A0A0A',
};

// ─── Phone shell (375×812) ───────────────────────────────
function Phone({ children, statusDark = false, homeLight = false }) {
  const t = new Date();
  const hh = t.getHours() % 12 || 12;
  const mm = String(t.getMinutes()).padStart(2, '0');
  return (
    <div className="phone">
      <div className="phone-notch" />
      <div className={"phone-status" + (statusDark ? ' on-dark' : '')}>
        <span className="time">{hh}:{mm}</span>
        <span className="icons">
          {/* signal */}
          <svg width="17" height="11" viewBox="0 0 17 11">
            <rect x="0" y="7" width="3" height="4" rx="0.8" fill="currentColor"/>
            <rect x="4.5" y="5" width="3" height="6" rx="0.8" fill="currentColor"/>
            <rect x="9" y="2.5" width="3" height="8.5" rx="0.8" fill="currentColor"/>
            <rect x="13.5" y="0" width="3" height="11" rx="0.8" fill="currentColor"/>
          </svg>
          {/* wifi */}
          <svg width="15" height="11" viewBox="0 0 15 11">
            <path d="M7.5 3C9.6 3 11.5 3.8 13 5.2l1-1C12.3 2.5 10 1.4 7.5 1.4S2.7 2.5 1 4.2l1 1C3.5 3.8 5.4 3 7.5 3Z" fill="currentColor"/>
            <path d="M7.5 6.2c1.2 0 2.3.5 3.1 1.2l1-1C10.5 5.5 9 4.8 7.5 4.8S4.5 5.5 3.4 6.4l1 1c.8-.7 1.9-1.2 3.1-1.2Z" fill="currentColor"/>
            <circle cx="7.5" cy="9.5" r="1.2" fill="currentColor"/>
          </svg>
          {/* battery */}
          <svg width="24" height="11" viewBox="0 0 24 11">
            <rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="currentColor" strokeOpacity="0.4" fill="none"/>
            <rect x="2" y="2" width="17" height="7" rx="1.2" fill="currentColor"/>
            <path d="M22 3.5v4c.6-.2 1-.9 1-1.5V5c0-.6-.4-1.3-1-1.5Z" fill="currentColor" fillOpacity="0.5"/>
          </svg>
        </span>
      </div>
      {children}
      <div className={"phone-home" + (homeLight ? ' light' : '')} />
    </div>
  );
}

// ─── Chrome bar with back + progress ─────────────────────
function Chrome({ onBack, step, totalSteps, onDark = false, label }) {
  const pct = step && totalSteps ? Math.round((step / totalSteps) * 100) : 0;
  return (
    <div className={"chrome" + (onDark ? ' on-blue' : '')}>
      <button className="back-btn" onClick={onBack} aria-label="Back">
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
          <path d="M8 2L2 8l6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {step != null && (
        <div className="progress-wrap">
          <div className="progress-meta">
            <span>{label || `Step ${step} of ${totalSteps}`}</span>
            <span className="pct">{pct}%</span>
          </div>
          <div className="progress-bar">
            <div className="progress-fill" style={{ width: `${pct}%` }} />
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Field primitives ────────────────────────────────────
function Field({ label, required, hint, children }) {
  return (
    <div className="field">
      {label && (
        <label className="field-label">
          {label}{required && <span className="req">*</span>}
        </label>
      )}
      {children}
      {hint && <div className="field-hint">{hint}</div>}
    </div>
  );
}

function Input({ value, onChange, onFocus, placeholder, type = 'text', icon, filled }) {
  return (
    <div className="input-wrap">
      {icon && <span className="lead-icon">{icon}</span>}
      <input
        type={type}
        className={"input" + (icon ? ' with-icon' : '') + (filled ? ' filled' : '')}
        value={value || ''}
        onChange={e => onChange && onChange(e.target.value)}
        onFocus={onFocus}
        placeholder={placeholder}
      />
    </div>
  );
}

function Select({ value, onChange, options, placeholder }) {
  return (
    <select
      className="select"
      value={value || ''}
      onChange={e => onChange && onChange(e.target.value)}
    >
      {placeholder && <option value="">{placeholder}</option>}
      {options.map(o => {
        const val = typeof o === 'string' ? o : o.value;
        const lbl = typeof o === 'string' ? o : o.label;
        return <option key={val} value={val}>{lbl}</option>;
      })}
    </select>
  );
}

function Stepper({ value, onChange, min = 0, max = 999, step = 1, unit }) {
  const dec = () => onChange(Math.max(min, value - step));
  const inc = () => onChange(Math.min(max, value + step));
  return (
    <div className="stepper">
      <button className="stepper-btn" onClick={dec}>−</button>
      <div className="stepper-val">
        {value}{unit && <small>{unit}</small>}
      </div>
      <button className="stepper-btn" onClick={inc}>+</button>
    </div>
  );
}

// ─── Yes/No toggle for medical Qs ────────────────────────
function YesNo({ value, onChange }) {
  return (
    <div className="yn-row">
      <button
        className="yn-btn"
        data-state={value === true ? 'yes-on' : 'off'}
        onClick={() => onChange(true)}
      >
        {value === true && <CheckIcon size={12} />} YES
      </button>
      <button
        className="yn-btn"
        data-state={value === false ? 'no-on' : 'off'}
        onClick={() => onChange(false)}
      >
        {value === false && <CheckIcon size={12} />} NO
      </button>
    </div>
  );
}

function Checkbox({ checked, onChange }) {
  return (
    <div className={"check" + (checked ? ' checked' : '')} onClick={() => onChange(!checked)}>
      <svg width="12" height="10" viewBox="0 0 12 10" fill="none">
        <path d="M1 5l3.5 3.5L11 2" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// ─── Tiny icons ──────────────────────────────────────────
function CheckIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7l3.5 3.5L12 3.5" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ─── Fake keyboard for input focus states ────────────────
function Keyboard() {
  const row1 = ['q','w','e','r','t','y','u','i','o','p'];
  const row2 = ['a','s','d','f','g','h','j','k','l'];
  const row3 = ['z','x','c','v','b','n','m'];
  return (
    <div className="keyboard">
      <div className="kb-row">{row1.map(k => <div key={k} className="kb-key">{k}</div>)}</div>
      <div className="kb-row" style={{ padding: '0 22px' }}>{row2.map(k => <div key={k} className="kb-key">{k}</div>)}</div>
      <div className="kb-row">
        <div className="kb-key wide">⇧</div>
        {row3.map(k => <div key={k} className="kb-key">{k}</div>)}
        <div className="kb-key wide">⌫</div>
      </div>
      <div className="kb-row">
        <div className="kb-key wide">123</div>
        <div className="kb-key" style={{ flex: 0.8 }}>😀</div>
        <div className="kb-key space"> </div>
        <div className="kb-key return">go</div>
      </div>
    </div>
  );
}

// ─── Decorative wave SVG ─────────────────────────────────
function Wave({ fill = BRAND.cyan, opacity = 1, flip = false }) {
  return (
    <svg className="wave-deco" viewBox="0 0 375 60" preserveAspectRatio="none" style={{ transform: flip ? 'scaleY(-1)' : 'none', opacity }}>
      <path d="M0 20 Q 50 0 100 20 T 200 20 T 300 20 T 400 20 V60 H0 Z" fill={fill}/>
    </svg>
  );
}

Object.assign(window, {
  BRAND, Phone, Chrome, Field, Input, Select, Stepper,
  YesNo, Checkbox, CheckIcon, Keyboard, Wave,
});