// East Quabbin Health — shared UI primitives
// Icons drawn as simple line SVGs; illustration uses abstract soft shapes

const EqIcon = ({ name, size = 20, stroke = 1.8, color = 'currentColor' }) => {
  const paths = {
    arrowLeft: <path d="M15 5L8 12L15 19" />,
    arrowRight: <path d="M9 5L16 12L9 19" />,
    check: <path d="M5 12.5L10 17.5L19 7.5" />,
    x: <><path d="M6 6L18 18" /><path d="M18 6L6 18" /></>,
    plus: <><path d="M12 5V19" /><path d="M5 12H19" /></>,
    minus: <path d="M5 12H19" />,
    shield: <path d="M12 3L4 6V11C4 15.5 7.5 19.5 12 21C16.5 19.5 20 15.5 20 11V6L12 3Z" />,
    clock: <><circle cx="12" cy="12" r="8" /><path d="M12 8V12L14.5 14" /></>,
    heart: <path d="M12 20S3 14.5 3 8.5C3 5.5 5.5 3 8.5 3C10 3 11.5 4 12 5C12.5 4 14 3 15.5 3C18.5 3 21 5.5 21 8.5C21 14.5 12 20 12 20Z" />,
    home: <><path d="M4 11L12 4L20 11" /><path d="M6 10V20H18V10" /></>,
    phone: <path d="M5 4H9L11 9L8.5 10.5C9.5 12.5 11.5 14.5 13.5 15.5L15 13L20 15V19C20 20 19 21 18 21C10 20.5 4 14.5 3.5 6.5C3.5 5 4.5 4 5 4Z" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7L12 13L21 7" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21C4 16 8 14 12 14C16 14 20 16 20 21" /></>,
    users: <><circle cx="9" cy="8" r="3.5" /><path d="M3 20C3 16.5 6 15 9 15C12 15 15 16.5 15 20" /><path d="M16 15C18.5 15.5 21 17 21 20" /><circle cx="16.5" cy="9" r="2.5" /></>,
    pill: <><rect x="3" y="9" width="18" height="6" rx="3" /><path d="M12 9V15" /></>,
    car: <><path d="M3 15V11L5 6H19L21 11V15" /><path d="M3 15V18H6V15" /><path d="M18 15V18H21V15" /><circle cx="7" cy="14" r="1.5" /><circle cx="17" cy="14" r="1.5" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10H21" /><path d="M8 3V7" /><path d="M16 3V7" /></>,
    pen: <><path d="M4 20L8 19L19 8L16 5L5 16L4 20Z" /></>,
    sparkle: <><path d="M12 3L13.5 10.5L21 12L13.5 13.5L12 21L10.5 13.5L3 12L10.5 10.5Z" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 11V17" /><circle cx="12" cy="7.5" r="0.8" fill={color} /></>,
    globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12H21" /><path d="M12 3C9 7 9 17 12 21" /><path d="M12 3C15 7 15 17 12 21" /></>,
    printer: <><path d="M6 9V4H18V9" /><rect x="3" y="9" width="18" height="8" rx="2" /><rect x="6" y="14" width="12" height="7" /></>,
    hand: <><path d="M7 13V7C7 6 8 5 9 5C10 5 11 6 11 7V12" /><path d="M11 11V5C11 4 12 3 13 3C14 3 15 4 15 5V12" /><path d="M15 7C15 6 16 5 17 5C18 5 19 6 19 7V15C19 18 16 21 12 21C8 21 6 18 5 16L3 12C3 11 4 10 5 10C6 10 7 11 8 13" /></>,
    moon: <path d="M20 15C19 17.5 16.5 19.5 13.5 19.5C9 19.5 5.5 16 5.5 11.5C5.5 8.5 7.5 6 10 5C9 7 9.5 10 11.5 12C13.5 14 16.5 14.5 20 15Z" />,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 3V5" /><path d="M12 19V21" /><path d="M3 12H5" /><path d="M19 12H21" /><path d="M5.5 5.5L7 7" /><path d="M17 17L18.5 18.5" /><path d="M18.5 5.5L17 7" /><path d="M7 17L5.5 18.5" /></>,
    bell: <><path d="M6 16V11C6 7.5 8.5 5 12 5C15.5 5 18 7.5 18 11V16L20 18H4L6 16Z" /><path d="M10 20C10.5 21 11 21 12 21C13 21 13.5 21 14 20" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={{ flexShrink: 0 }}>
      {paths[name] || null}
    </svg>
  );
};

// Soft organic shape — procedurally generated blob for backgrounds
const EqBlob = ({ color = '#B8C9B4', size = 120, seed = 1, opacity = 1, style = {} }) => {
  const rand = (s) => {
    const x = Math.sin(s * 9999) * 10000;
    return x - Math.floor(x);
  };
  const points = [];
  const n = 8;
  for (let i = 0; i < n; i++) {
    const a = (i / n) * Math.PI * 2;
    const r = 40 + rand(seed + i) * 14;
    points.push([50 + Math.cos(a) * r, 50 + Math.sin(a) * r]);
  }
  const d = points.map((p, i) => {
    if (i === 0) return `M ${p[0]},${p[1]}`;
    const prev = points[i - 1];
    const mid = [(p[0] + prev[0]) / 2, (p[1] + prev[1]) / 2];
    return `Q ${prev[0]},${prev[1]} ${mid[0]},${mid[1]}`;
  }).join(' ') + ' Z';
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ opacity, ...style }}>
      <path d={d} fill={color} />
    </svg>
  );
};

// Little organic "health" logo mark — abstract leaf/heart hybrid
const EqMark = ({ size = 40 }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
    <path d="M20 5 C28 5 34 11 34 20 C34 27 29 33 20 36 C11 33 6 27 6 20 C6 11 12 5 20 5 Z"
          fill="var(--eq-sage)" />
    <path d="M13 22 L18 22 L20 17 L22 26 L24 22 L28 22"
          stroke="var(--eq-sage-deep)" strokeWidth="2.2"
          strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

// Header bar inside phone frame (back arrow + step)
const EqHeader = ({ current, total, onBack, onSave, showBack = true, savedFlash, t }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '14px 20px 10px',
  }}>
    <button className="eq-btn-ghost"
            onClick={onBack}
            disabled={!showBack}
            aria-label="Back"
            style={{
              width: 40, height: 40, borderRadius: 999,
              display: 'grid', placeItems: 'center',
              background: showBack ? 'var(--eq-surface)' : 'transparent',
              boxShadow: showBack ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
              color: showBack ? 'var(--eq-ink)' : 'transparent',
            }}>
      <EqIcon name="arrowLeft" size={18} />
    </button>

    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--eq-muted)',
      }}>
        <span>{t.common.step} {current} {t.common.of} {total}</span>
        <span style={{
          color: savedFlash ? 'var(--eq-sage-deep)' : 'var(--eq-muted)',
          transition: 'color 200ms',
        }}>
          {savedFlash ? '✓ ' + t.common.saved : t.steps[current - 1]?.label}
        </span>
      </div>
      <div className="eq-progress-track">
        <div className="eq-progress-fill" style={{ width: `${(current / total) * 100}%` }} />
      </div>
    </div>

    <button className="eq-btn-ghost"
            onClick={onSave}
            aria-label={t.common.saveResume}
            style={{
              width: 40, height: 40, borderRadius: 999,
              display: 'grid', placeItems: 'center',
              background: 'var(--eq-surface)',
              boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
              color: 'var(--eq-ink)',
            }}>
      <EqIcon name="clock" size={18} />
    </button>
  </div>
);

// Footer with primary action
const EqFooter = ({ children, sticky = true }) => (
  <div style={{
    padding: '12px 20px 20px',
    background: sticky ? 'linear-gradient(to top, var(--eq-bg) 60%, transparent)' : 'transparent',
    position: sticky ? 'sticky' : 'static',
    bottom: 0,
    zIndex: 5,
  }}>
    {children}
  </div>
);

// Big title block used atop each screen
const EqTitle = ({ title, sub, icon, accent }) => (
  <div style={{ padding: '8px 4px 18px', position: 'relative' }}>
    {icon && (
      <div style={{
        width: 44, height: 44, borderRadius: 14,
        background: accent || 'var(--eq-sage)',
        display: 'grid', placeItems: 'center',
        marginBottom: 14,
        color: 'var(--eq-ink)',
      }}>
        <EqIcon name={icon} size={22} stroke={1.6} />
      </div>
    )}
    <h1 className="eq-display" style={{
      fontSize: 32, margin: 0, marginBottom: 8,
      color: 'var(--eq-ink)',
    }}>{title}</h1>
    {sub && <p style={{
      margin: 0, color: 'var(--eq-ink-2)',
      fontSize: 15, lineHeight: 1.45,
      textWrap: 'pretty',
    }}>{sub}</p>}
  </div>
);

// Form row helper
const EqRow = ({ label, children, hint, optional }) => (
  <div style={{ marginBottom: 'var(--eq-gap)' }}>
    {label && (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <label className="eq-label" style={{ margin: 0 }}>{label}</label>
        {optional && <span style={{
          fontSize: 11, color: 'var(--eq-muted)', fontWeight: 500,
        }}>Optional</span>}
      </div>
    )}
    {children}
    {hint && <div style={{
      marginTop: 6, fontSize: 12, color: 'var(--eq-muted)',
    }}>{hint}</div>}
  </div>
);

// Stepper for numeric count
const EqStepper = ({ value, onChange, min = 0, max = 20 }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12,
    background: 'var(--eq-surface)',
    border: '1.5px solid var(--eq-line)',
    borderRadius: 999, padding: '6px',
    width: 160,
  }}>
    <button onClick={() => onChange(Math.max(min, value - 1))}
            style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--eq-surface-2)', display: 'grid', placeItems: 'center' }}>
      <EqIcon name="minus" size={16} />
    </button>
    <div style={{ flex: 1, textAlign: 'center', fontWeight: 600, fontSize: 18 }}>{value}</div>
    <button onClick={() => onChange(Math.min(max, value + 1))}
            style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--eq-ink)', color: 'var(--eq-surface)', display: 'grid', placeItems: 'center' }}>
      <EqIcon name="plus" size={16} />
    </button>
  </div>
);

// Option (select / multi-select) — a tappable row
const EqOption = ({ on, onClick, children, multi = false, icon }) => (
  <button className="eq-option" data-on={on} onClick={onClick}>
    <span className={multi ? 'eq-option-check' : 'eq-option-radio'}>
      {multi && on && <EqIcon name="check" size={14} stroke={2.5} />}
    </span>
    {icon && (
      <span style={{
        width: 34, height: 34, borderRadius: 10,
        background: 'var(--eq-surface-2)',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <EqIcon name={icon} size={18} />
      </span>
    )}
    <span style={{ flex: 1, textWrap: 'pretty' }}>{children}</span>
  </button>
);

// Tweak-panel segmented control
const EqSeg = ({ options, value, onChange }) => (
  <div className="seg">
    {options.map((o) => (
      <button key={o.v} data-on={value === o.v} onClick={() => onChange(o.v)}>{o.l}</button>
    ))}
  </div>
);

Object.assign(window, {
  EqIcon, EqBlob, EqMark, EqHeader, EqFooter, EqTitle, EqRow,
  EqStepper, EqOption, EqSeg,
});