// ─── Shared: RulesRow ──────────────────────────────────────────────────────
// props: rule, type ('ops'|'eval'), headers, load, toast, setEditing

const RulesRow = ({ rule, type, headers, load, toast, setEditing }) => {
  const active  = type === 'eval' ? rule.enabled : rule.is_active;
  const valDisp = rule.value_type === 'boolean'
    ? (rule.value === 'true' ? '✅ بله' : '❌ خیر')
    : (rule.value + (rule.unit ? ' ' + rule.unit : ''));
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderRadius: 9,
      background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)',
      opacity: active ? 1 : 0.45, transition: 'opacity 0.15s',
    }}>
      <button
        onClick={() => {
          const updated = type === 'eval'
            ? { ...rule, enabled: rule.enabled ? 0 : 1 }
            : { ...rule, is_active: rule.is_active ? 0 : 1 };
          const url  = type === 'eval'
            ? `/api/distrules/evaluation/rules/${rule.rule_key}`
            : `/api/distrules/rules/${rule.id}`;
          const body = type === 'eval'
            ? { enabled: updated.enabled }
            : { is_active: updated.is_active };
          fetch(url, { method: 'PUT', headers, body: JSON.stringify(body) })
            .then(r => r.json()).then(d => { if (d.success) load(); else toast('خطا', 'error'); });
        }}
        style={{
          width: 28, height: 16, borderRadius: 8, padding: 0, border: 'none', cursor: 'pointer', flexShrink: 0,
          background: active ? 'rgba(52,211,153,0.3)' : 'rgba(107,114,128,0.2)',
          position: 'relative', transition: 'background 0.2s',
        }}>
        <div style={{
          width: 10, height: 10, borderRadius: '50%', position: 'absolute', top: 3,
          left: active ? 14 : 4, background: active ? '#34D399' : '#6B7280', transition: 'left 0.2s',
        }} />
      </button>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0' }}>{rule.label || rule.name}</div>
        {rule.description && <div style={{ fontSize: 10, color: '#475569', marginTop: 2, lineHeight: 1.5 }}>{rule.description}</div>}
      </div>

      <div style={{ fontSize: 12, fontWeight: 700, color: active ? '#38BDF8' : '#374151', flexShrink: 0, whiteSpace: 'nowrap' }}>
        {valDisp}
      </div>

      <button onClick={() => setEditing({ rule: { ...rule }, type })} style={{
        padding: '4px 10px', borderRadius: 7, fontSize: 11, cursor: 'pointer', flexShrink: 0,
        border: '1px solid rgba(99,102,241,0.25)', background: 'rgba(99,102,241,0.08)', color: '#818CF8',
      }}>
        {'ویرایش'}
      </button>
    </div>
  );
};