// doc-pill.jsx — shared doctor pill component + chip selector

function DocPill({ doctor, mode = 'both', size = 'sm', onRemove, accent, variant }) {
  // mode: 'both' | 'color' | 'text'
  // variant: undefined (normal) | 'template' (50% opacity) | 'added' (100%) | 'removed' (strikethrough)
  if (!doctor) return null;
  const isColor = mode === 'color' || mode === 'both';
  const isText = mode === 'text' || mode === 'both';
  const pad = size === 'xs' ? '1px 6px' : size === 'sm' ? '2px 8px' : '3px 10px';
  const fs = size === 'xs' ? 10 : size === 'sm' ? 11 : 12;
  const isTpl = variant === 'template';
  const isRemoved = variant === 'removed';
  if (isRemoved) {
    return (
      <span style={{
        display:'inline-block',
        padding: '2px 4px',
        fontSize: fs, fontWeight: 500, lineHeight: 1.3,
        whiteSpace:'nowrap',
        color:'#29261b',
        opacity: 0.5,
        position:'relative',
      }}>
        {mode === 'color' ? doctor.name.slice(0,1) : doctor.name}
        <span aria-hidden style={{
          position:'absolute',
          left: -2, right: -2, top:'50%',
          height: 2,
          background:'#000',
          transform:'translateY(-50%) rotate(-6deg)',
          transformOrigin:'center',
          opacity: 1,
          pointerEvents:'none',
        }} />
      </span>
    );
  }
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: isColor ? doctor.tone : '#f4f1ec',
      color: isColor ? doctor.text : '#3f3a36',
      border: isColor ? 'none' : '1px solid rgba(0,0,0,.08)',
      padding: pad, borderRadius: 10,
      fontSize: fs, fontWeight: 500,
      whiteSpace: 'nowrap', lineHeight: 1.3,
      opacity: isTpl ? 0.5 : 1,
    }}>
      {mode === 'color' ? (
        <>
          <span style={{ width:6, height:6, borderRadius:'50%', background: doctor.dark }} />
          {doctor.name.slice(0,1)}
        </>
      ) : isText && !isColor ? (
        <>
          <span style={{ width:6, height:6, borderRadius:'50%', background: doctor.dark }} />
          {doctor.name}
        </>
      ) : (
        doctor.name
      )}
      {onRemove && (
        <button onClick={(e)=>{e.stopPropagation(); onRemove();}} style={{
          appearance:'none', border:0, background:'transparent', cursor:'pointer',
          fontSize: 11, color: 'rgba(0,0,0,.4)', padding: 0, marginLeft: 2,
          lineHeight: 1,
        }}>×</button>
      )}
    </span>
  );
}

function DoctorMultiSelect({ doctors, selectedIds, onChange, mode }) {
  return (
    <div style={{ display:'flex', flexWrap:'wrap', gap: 4 }}>
      {doctors.map(d => {
        const on = selectedIds.includes(d.id);
        return (
          <button key={d.id} onClick={() => {
            onChange(on ? selectedIds.filter(x=>x!==d.id) : [...selectedIds, d.id]);
          }} style={{
            appearance:'none', border: 0,
            background: on ? d.tone : '#f4f1ec',
            color: on ? d.text : '#86827a',
            opacity: on ? 1 : 0.85,
            padding: '4px 10px', borderRadius: 12, fontSize: 12, fontWeight: 500,
            cursor: 'pointer',
            boxShadow: on ? `inset 0 0 0 1px ${d.dark}55` : 'inset 0 0 0 1px rgba(0,0,0,.06)',
          }}>
            {on ? '✓ ' : ''}{d.name}
          </button>
        );
      })}
    </div>
  );
}

function DraggableDoctor({ doctor, mode = 'both' }) {
  return (
    <div draggable
      onDragStart={(e)=>{
        e.dataTransfer.setData('text/doctor-id', doctor.id);
        e.dataTransfer.effectAllowed = 'copy';
      }}
      style={{
        display:'flex', alignItems:'center', gap: 8,
        padding: '6px 10px', borderRadius: 8,
        background: doctor.tone, color: doctor.text,
        cursor: 'grab', fontSize: 12, fontWeight: 500,
        userSelect: 'none',
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.04)',
      }}>
      <span style={{ width:8, height:8, borderRadius:'50%', background: doctor.dark }} />
      {doctor.name}
      <span style={{ marginLeft:'auto', color:'rgba(0,0,0,.3)', fontSize: 11 }}>⋮⋮</span>
    </div>
  );
}

Object.assign(window, { DocPill, DoctorMultiSelect, DraggableDoctor });