// ─── تب قوانین قبرستان ──────────────────────────────────────────────────────

const RulesGraveyardTab = ({ segments, headers, load, toast }) => {
  const graveSeg = segments.find(sg => sg.id === 'seg_auto_graveyard');
  const graveOn  = graveSeg?.is_active === 1;

  const toggleGrave = () => {
    fetch('/api/pool/segments/seg_auto_graveyard', { method:'PUT', headers,
      body: JSON.stringify({ is_active: graveOn ? 0 : 1 }) })
      .then(r => r.json()).then(d => { if (d.success) load(); else toast('خطا', 'error'); });
  };

  let graveConds = [];
  try {
    graveConds = Array.isArray(graveSeg?.conditions)
      ? graveSeg.conditions
      : JSON.parse(graveSeg?.conditions || '[]');
  } catch {}

  const condLabel = { no_answer_count:'تعداد بی‌پاسخی', last_call_days:'روز از آخرین تماس', status:'وضعیت' };
  const opLabel   = { gte:'≥', lte:'≤', eq:'=', neq:'≠', gt:'>', lt:'<' };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ padding: '10px 14px', borderRadius: 9, background: 'rgba(99,102,241,0.07)', border: '1px solid rgba(99,102,241,0.2)', fontSize: 11, color: '#94a3b8', lineHeight: 1.7 }}>
        {'🪦 قبرستان: لیدهایی که دیگر پتانسیل خرید ندارند — از استخر فروش خارج می‌شوند ولی داده‌هایشان نگه داشته می‌شود.'}
      </div>

      {/* ورود به قبرستان */}
      <div>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#818CF8', marginBottom: 8, padding: '6px 0', borderBottom: '1px solid rgba(99,102,241,0.2)' }}>
          {'🪦 ورود خودکار به قبرستان'}
        </div>
        <div style={{ padding:'12px 14px', borderRadius:9, background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.07)', marginBottom:8 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom: graveConds.length ? 12 : 0 }}>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:12, fontWeight:600, color:'#e2e8f0' }}>{'ورود خودکار به قبرستان'}</div>
              <div style={{ fontSize:11, color:'#475569', marginTop:2 }}>{'موتور سگمنت هر ۶۰ دقیقه بررسی می‌کند'}</div>
            </div>
            <button onClick={toggleGrave}
              style={{ width:36, height:20, borderRadius:10, padding:0, border:'none', cursor:'pointer', flexShrink:0, background: graveOn ? 'rgba(52,211,153,0.3)' : 'rgba(107,114,128,0.2)', position:'relative' }}>
              <div style={{ width:14, height:14, borderRadius:'50%', position:'absolute', top:3, left: graveOn ? 18 : 3, background: graveOn ? '#34D399' : '#6B7280', transition:'left 0.2s' }} />
            </button>
            <span style={{ fontSize:10, color: graveOn ? '#34D399' : '#475569' }}>{graveOn ? 'فعال' : 'غیرفعال'}</span>
          </div>

          {graveConds.length > 0 && (
            <div>
              <div style={{ fontSize:11, color:'#64748b', marginBottom:6 }}>{'شرط‌های ورود:'}</div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
                {graveConds.map((c, i) => (
                  <span key={i} style={{ padding:'3px 10px', borderRadius:20, fontSize:11,
                    background:'rgba(100,116,139,0.15)', border:'1px solid rgba(100,116,139,0.25)', color:'#94a3b8' }}>
                    {condLabel[c.field] || c.field} {opLabel[c.op] || c.op} {c.value}
                  </span>
                ))}
              </div>
              <div style={{ fontSize:10, color:'#334155', marginTop:8 }}>
                {'برای ویرایش شرط‌ها: '}<span style={{ color:'#818cf8' }}>{'استخر لید ← سگمنت‌ها'}</span>
              </div>
            </div>
          )}

          {!graveSeg && (
            <div style={{ fontSize:11, color:'#F87171', marginTop:4 }}>{'سگمنت قبرستان پیدا نشد — موتور سگمنت را اجرا کنید'}</div>
          )}
        </div>
      </div>

      {/* بازگشت از قبرستان */}
      <div>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#818CF8', marginBottom: 8, padding: '6px 0', borderBottom: '1px solid rgba(99,102,241,0.2)' }}>
          {'🌊 بازگشت از قبرستان (رستاخیز)'}
        </div>
        <div style={{ padding:'12px 14px', borderRadius:9, background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.07)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <span style={{ fontSize:20 }}>{'🌊'}</span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:12, fontWeight:600, color:'#e2e8f0' }}>{'بازگشت خودکار هنگام پیام جدید'}</div>
              <div style={{ fontSize:11, color:'#475569', marginTop:4, lineHeight:1.6 }}>
                {'اگر لید قبرستانی پیام جدیدی بفرستد:'}<br />
                {'→ وضعیت به '}<span style={{ color:'#FB923C' }}>{'follow_up'}</span>{' تغییر می‌کند'}<br />
                {'→ تگ '}<span style={{ color:'#818cf8' }}>{'«برگشته از قبرستان»'}</span>{' زده می‌شود'}<br />
                {'→ از سگمنت قبرستان خارج می‌شود'}
              </div>
            </div>
            <span style={{ padding:'4px 12px', borderRadius:20, fontSize:10, background:'rgba(52,211,153,0.1)', border:'1px solid rgba(52,211,153,0.2)', color:'#34D399', whiteSpace:'nowrap', flexShrink:0 }}>{'همیشه فعال'}</span>
          </div>
        </div>
      </div>
    </div>
  );
};
