// ─────────────────────────────────────────────
// DEV_Design_Rating.jsx
// Inspector panel for the Rating object type
//
// Loaded in: do-dev/index.html  (before DEV_Design.jsx)
// Used by:   Inspector in DEV_Design.jsx as:
//   {local.type === 'rating' && <RatingInspector local={local} set={set} fields={fields} onBrowseIcon={onBrowseIcon} lbl={lbl} inp={inp} sel={sel} />}
//
// Config written to obj:
//   ratingEmoji  — emoji character          (default '⭐')
//   ratingScale  — max steps 3–10           (default 5)
//   field        — DB field name
//   label        — display label in APP
//   labelpos     — 'top' | 'left' | 'none'
//   labelalign   — 'left' | 'center' | 'right'
// ─────────────────────────────────────────────

function RatingInspector({ local, set, fields, onBrowseIcon, lbl, inp, sel }) {
  const emoji = local.ratingEmoji || '⭐';
  const scale = Number(local.ratingScale || 5);

  // Fixed preview: always 4 items shown, first 2 selected, last 2 grey
  const PREVIEW_TOTAL    = 4;
  const PREVIEW_SELECTED = 2;

  return (
    <>
      {/* ── Identifier ── */}
      {lbl('Identifier (internal)')}
      {inp('name', { placeholder:'e.g. quality_rating' })}

      {/* ── Field assignment ── */}
      {lbl('Field')}
      <select
        value={local.field || ''}
        onChange={e => {
          const f = fields.find(f => f.field === e.target.value);
          set('field', e.target.value);
          if (f) {
            if (!local.label) set('label', f.name);
            if (!local.name)  set('name',  f.name);
          }
        }}
        style={{
          width:'100%', padding:'6px 8px', border:'1.5px solid #e2e8f0',
          borderRadius:6, fontSize:12, fontFamily:'DM Sans, sans-serif',
          color:'#0f1923', background:'#fff', outline:'none', marginBottom:10,
        }}
      >
        <option value="">— unassigned —</option>
        {fields.map(f => (
          <option key={f.o_id} value={f.field}>{f.name} ({f.field})</option>
        ))}
      </select>

      {/* ── Emoji picker ── */}
      {lbl('Emoji')}
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
        <div style={{
          width:40, height:40, border:'1.5px solid #e2e8f0', borderRadius:8,
          display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:24, background:'#f8fafc',
        }}>
          {emoji}
        </div>
        <button
          type="button"
          onClick={() => onBrowseIcon && onBrowseIcon(val => set('ratingEmoji', val))}
          style={{
            background:'none', border:'1px solid #e2e8f0', borderRadius:5,
            padding:'5px 12px', fontSize:11, color:'#2563eb', cursor:'pointer',
            fontFamily:'DM Sans, sans-serif', fontWeight:600,
          }}
        >
          🔍 Pick Emoji
        </button>
      </div>

      {/* ── Scale ── */}
      {lbl('Scale (max steps)')}
      <div style={{ display:'flex', flexWrap:'wrap', gap:5, marginBottom:12 }}>
        {[3,4,5,6,7,8,9,10].map(n => (
          <button
            key={n}
            type="button"
            onClick={() => set('ratingScale', n)}
            style={{
              padding:'4px 11px', border:'1.5px solid #e2e8f0', borderRadius:5,
              fontSize:12, cursor:'pointer', fontFamily:'DM Sans, sans-serif', fontWeight:600,
              background: scale === n ? '#0f1923' : '#fff',
              color:      scale === n ? '#fff'    : '#374151',
            }}
          >
            {n}
          </button>
        ))}
      </div>

      {/* ── Preview — fixed 4 items, 2 selected / 2 grey ── */}
      {lbl('Preview')}
      <div style={{
        display:'flex', gap:3, alignItems:'center',
        padding:'10px 14px', background:'#f8fafc',
        borderRadius:8, border:'1px solid #e2e8f0', marginBottom:10,
      }}>
        {Array.from({ length: PREVIEW_TOTAL }).map((_, i) => (
          <span
            key={i}
            style={{
              fontSize: 22,
              opacity:  i < PREVIEW_SELECTED ? 1 : 0.25,
            }}
          >
            {emoji}
          </span>
        ))}
        <span style={{ fontSize:11, color:'#94a3b8', marginLeft:6 }}>
          {PREVIEW_SELECTED} / {scale}
        </span>
      </div>

      {/* ── Divider ── */}
      <div style={{ height:1, background:'#e2e8f0', margin:'14px 0 12px' }} />

      {/* ── Label ── */}
      {lbl('Label')}
      {inp('label', { placeholder:'Display label' })}

      {lbl('Label Position')}
      {sel('labelpos', [
        { v:'top',  l:'Top'          },
        { v:'left', l:'Left (inline)'},
        { v:'none', l:'Hidden'       },
      ])}

      {local.labelpos !== 'none' && <>
        {lbl('Label Align')}
        {sel('labelalign', [
          { v:'left',   l:'Left'   },
          { v:'center', l:'Center' },
          { v:'right',  l:'Right'  },
        ])}
      </>}
    </>
  );
}