// 3-way selector: 양호 / 불량 / 해당없음
const STATES = [
  { key: 'O',  label: '양호',   color: '#15803d', bg: '#e8f5ed', icon: 'check' },
  { key: 'X',  label: '불량',   color: '#cc2222', bg: '#fde8e8', icon: 'x' },
  { key: '/',  label: '해당없음', color: '#8a8880', bg: '#ffffff', icon: 'dash' },
];

function SelectorIcon({ kind, color, size = 16 }) {
  const s = size;
  if (kind === 'check') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
        <path d="M5 12.5l5 5 9-10" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    );
  }
  if (kind === 'x') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
        <path d="M6 6l12 12M18 6L6 18" stroke={color} strokeWidth="2.6" strokeLinecap="round"/>
      </svg>
    );
  }
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 12h14" stroke={color} strokeWidth="2.6" strokeLinecap="round"/>
    </svg>
  );
}

// Segmented 3-part
function SelectorSegment({ value, onChange }) {
  const idx = STATES.findIndex(s => s.key === value);
  const active = STATES[idx];
  return (
    <div style={{
      position: 'relative',
      display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
      background: '#f1efea', borderRadius: 12,
      padding: 4, height: 52,
      border: '1px solid #e0ddd4',
    }}>
      {idx >= 0 && (
        <div style={{
          position: 'absolute',
          top: 4, left: `calc(${idx} * (100% - 8px) / 3 + 4px)`,
          width: 'calc((100% - 8px) / 3)', height: 44,
          background: '#fff',
          border: `2px solid ${active.color}`,
          borderRadius: 9,
          transition: 'left 260ms cubic-bezier(.5,1.4,.5,1), border-color 180ms',
          boxShadow: `0 2px 8px ${active.color}22, 0 1px 2px rgba(0,0,0,.04)`,
        }} />
      )}
      {STATES.map(s => {
        const selected = s.key === value;
        return (
          <button
            key={s.key}
            onClick={() => onChange(s.key)}
            style={{
              position: 'relative', zIndex: 1,
              background: 'transparent', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              color: selected ? s.color : '#5a5a55',
              fontWeight: selected ? 700 : 500,
              fontSize: 13.5, cursor: 'pointer',
              fontFamily: 'inherit',
              transition: 'color 180ms',
              WebkitTapHighlightColor: 'transparent',
              letterSpacing: '-0.02em',
            }}
          >
            <span style={{
              transform: selected ? 'scale(1)' : 'scale(0.85)',
              opacity: selected ? 1 : 0.55,
              transition: 'transform 220ms cubic-bezier(.5,1.6,.5,1), opacity 180ms',
              display: 'inline-flex',
            }}>
              <SelectorIcon kind={s.icon} color={selected ? s.color : '#8a8880'} size={14} />
            </span>
            {s.label}
          </button>
        );
      })}
    </div>
  );
}

function SelectorCards({ value, onChange }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
      {STATES.map(s => {
        const selected = s.key === value;
        return (
          <button
            key={s.key}
            onClick={() => onChange(s.key)}
            style={{
              background: selected ? s.bg : '#fff',
              border: `2px solid ${selected ? s.color : '#e0ddd4'}`,
              borderRadius: 12, padding: '12px 6px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              cursor: 'pointer', fontFamily: 'inherit',
              transition: 'all 220ms cubic-bezier(.4,1.2,.4,1)',
              transform: selected ? 'translateY(-2px)' : 'translateY(0)',
              boxShadow: selected ? `0 6px 14px ${s.color}22` : '0 1px 2px rgba(0,0,0,0.03)',
              WebkitTapHighlightColor: 'transparent',
            }}
          >
            <div style={{
              width: 30, height: 30, borderRadius: '50%',
              background: selected ? s.color : '#f3f4f6',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'background 220ms',
            }}>
              <SelectorIcon kind={s.icon} color={selected ? '#fff' : '#8a8880'} size={16} />
            </div>
            <span style={{
              fontSize: 12.5, fontWeight: selected ? 700 : 500,
              color: selected ? s.color : '#5a5a55',
            }}>{s.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function SelectorChips({ value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      {STATES.map(s => {
        const selected = s.key === value;
        return (
          <button
            key={s.key}
            onClick={() => onChange(s.key)}
            style={{
              flex: '1 1 0',
              minHeight: 44,
              background: selected ? s.color : '#fff',
              border: `1.5px solid ${selected ? s.color : '#d4d1c7'}`,
              borderRadius: 999,
              padding: '0 8px',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 13, fontWeight: selected ? 700 : 500,
              color: selected ? '#fff' : '#5a5a55',
              transition: 'all 200ms cubic-bezier(.4,1.2,.4,1)',
              boxShadow: selected ? `0 4px 12px ${s.color}40` : 'none',
              WebkitTapHighlightColor: 'transparent',
              letterSpacing: '-0.02em',
            }}
          >
            <SelectorIcon kind={s.icon} color={selected ? '#fff' : s.color} size={13} />
            {s.label}
          </button>
        );
      })}
    </div>
  );
}

window.STATES = STATES;
window.SelectorIcon = SelectorIcon;
window.SelectorSegment = SelectorSegment;
window.SelectorCards = SelectorCards;
window.SelectorChips = SelectorChips;