// ─── API Monitor — helper components (خارج از ApiMonitor) ──
const { useState: useAM, useEffect: useEfAM, useCallback: useCbAM, useRef: useRefAM } = React;

// ── ابزارهای فرمت ──────────────────────────────────────────
const amFc  = v => { const n=parseFloat(v||0); return n===0?'$0':n<0.001?'$'+n.toFixed(5):'$'+n.toFixed(3); };
const amFt  = v => { const n=parseInt(v||0); if(n>=1e6)return(n/1e6).toFixed(2)+'M'; if(n>=1000)return(n/1000).toFixed(1)+'K'; return String(n); };
const amPct = (a,b) => b>0 ? Math.min(100,a/b*100) : 0;
const amBc  = p => p>=90?'#F87171':p>=70?'#FB923C':p>=50?'#FBBF24':'#4ADE80';

// ── Card ───────────────────────────────────────────────────
function AMCard({ children, style={} }) {
  return (
    <div style={{ background:'rgba(255,255,255,.025)', border:'1px solid rgba(255,255,255,.07)', borderRadius:12, padding:'16px 18px', ...style }}>
      {children}
    </div>
  );
}

// ── Bar ────────────────────────────────────────────────────
function AMBar({ p, color, h=5 }) {
  return (
    <div style={{ height:h, background:'rgba(255,255,255,.06)', borderRadius:h, overflow:'hidden', marginTop:6 }}>
      <div style={{ height:'100%', width:`${Math.min(100,p||0)}%`, background:color||amBc(p), borderRadius:h, transition:'width .4s' }}/>
    </div>
  );
}

// ── Toggle ─────────────────────────────────────────────────
function AMTog({ on, onToggle, size=22 }) {
  return (
    <div onClick={onToggle} style={{
      width:size*1.8, height:size, borderRadius:size/2, cursor:'pointer', flexShrink:0,
      background:on?'rgba(74,222,128,.22)':'rgba(255,255,255,.07)',
      border:`1px solid ${on?'rgba(74,222,128,.4)':'rgba(255,255,255,.12)'}`,
      position:'relative', transition:'all .2s',
    }}>
      <div style={{
        position:'absolute', top:2, width:size-4, height:size-4, borderRadius:'50%',
        background:on?'#4ADE80':'#475569', transition:'left .2s,background .2s',
        left:on?size*.8-2:2,
        boxShadow:on?'0 0 6px rgba(74,222,128,.5)':'none',
      }}/>
    </div>
  );
}

// ── BalanceCard — کارت موجودی با فیلد همیشه نمایش ──────────
function AMBalanceCard({ balance, cfgBalance, onSave }) {
  const [val, setVal] = useAM(cfgBalance || '');
  const [saving, setSaving] = useAM(false);
  const [ok, setOk] = useAM(false);
  const balPct = balance.hasBalance ? 100 - amPct(balance.spent, balance.initial) : 0;

  const save = () => {
    if (!val) return;
    setSaving(true);
    window.api('/api-monitor/settings', { method:'PUT', body:{ api_balance: val } })
      .then(d => { if(d.success){ setOk(true); setTimeout(()=>setOk(false),2000); onSave(); } })
      .finally(() => setSaving(false));
  };

  return (
    <AMCard style={{
      background: !balance.hasBalance ? 'rgba(255,255,255,.015)' :
        balPct<20 ? 'rgba(248,113,113,.06)' : balPct<50 ? 'rgba(251,146,60,.05)' : 'rgba(74,222,128,.04)',
      border: !balance.hasBalance ? '1px dashed rgba(255,255,255,.12)' :
        balPct<20 ? '1px solid rgba(248,113,113,.3)' : '1px solid rgba(255,255,255,.07)',
    }}>
      {/* هدر */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
        <div style={{ fontSize:10, color:'#64748b', fontWeight:600 }}>
          موجودی اکانت Anthropic
          <span title="Anthropic هیچ API برای خوندن موجودی نداره — از کنسول بخوون و اینجا وارد کن" style={{ cursor:'help', marginRight:4, opacity:.5 }}>ⓘ</span>
        </div>
        <a href="https://console.anthropic.com/settings/billing" target="_blank"
          style={{ fontSize:9, color:'#818cf8', textDecoration:'none', border:'1px solid rgba(99,102,241,.3)', borderRadius:4, padding:'1px 6px' }}>
          کنسول ↗
        </a>
      </div>

      {/* موجودی فعلی */}
      {balance.hasBalance ? (
        <>
          <div style={{ fontSize:22, fontWeight:700, color:amBc(balPct) }}>{amFc(balance.remaining)}</div>
          <div style={{ fontSize:10, color:'#64748b', marginTop:1 }}>
            از {amFc(balance.initial)} مانده | مصرف از آخرین ثبت: {amFc(balance.spent)}
          </div>
          <AMBar p={balPct} color={amBc(balPct)}/>
          {balance.lastUpdated && (
            <div style={{ fontSize:9, color:'#334155', marginTop:4 }}>
              ⏱ آخرین ثبت موجودی: {new Date(balance.lastUpdated).toLocaleString('fa-IR',{hour:'2-digit',minute:'2-digit',day:'numeric',month:'short'})}
              {' '}— فقط مصرف بعد از این لحظه کم می‌شه
            </div>
          )}
        </>
      ) : (
        <div style={{ fontSize:12, color:'#475569', marginBottom:4 }}>هنوز وارد نشده</div>
      )}

      {/* فیلد ویرایش — همیشه نمایش */}
      <div style={{ marginTop:10, display:'flex', gap:6, alignItems:'center' }}>
        <input
          type="number" step="0.01" placeholder="موجودی $ را وارد کن"
          value={val}
          onChange={e => setVal(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && save()}
          style={{
            flex:1, padding:'6px 10px', borderRadius:7,
            border:'1px solid rgba(255,255,255,.12)', background:'rgba(255,255,255,.06)',
            color:'#e2e8f0', fontSize:13, fontFamily:'JetBrains Mono',
          }}
        />
        <button onClick={save} disabled={saving || !val} style={{
          padding:'6px 12px', borderRadius:7, border:'none', cursor:'pointer', fontWeight:700, fontSize:11,
          background: ok ? 'rgba(74,222,128,.2)' : 'rgba(99,102,241,.2)',
          color: ok ? '#4ADE80' : '#818cf8',
          opacity: !val ? .5 : 1,
        }}>
          {saving ? '...' : ok ? '✓' : 'ثبت'}
        </button>
      </div>
    </AMCard>
  );
}

// ── BudgetCard — کارت بودجه با ویرایش inline ───────────────
function AMBudgetCard({ label, hint, value, limit, cfgKey, formatVal, step, unit, onSave }) {
  const [editing, setEditing] = useAM(false);
  const [tmp, setTmp] = useAM(String(limit));
  const inputRef = useRefAM(null);
  const barPct = amPct(value, limit);

  useEfAM(() => { if(editing && inputRef.current) inputRef.current.focus(); }, [editing]);

  const save = () => {
    window.api('/api-monitor/settings', { method:'PUT', body:{ [cfgKey]: tmp } })
      .then(() => { setEditing(false); onSave(); });
  };

  return (
    <AMCard>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:5 }}>
        <div style={{ fontSize:10, color:'#64748b', fontWeight:600 }}>
          {label}
          {hint && <span title={hint} style={{ cursor:'help', marginRight:4, opacity:.5 }}>ⓘ</span>}
        </div>
        <button onClick={() => { setTmp(String(limit)); setEditing(p=>!p); }} style={{
          background:'none', border:'none', cursor:'pointer', padding:2, color:'#475569', fontSize:11,
        }}>✏️</button>
      </div>

      <div style={{ display:'flex', alignItems:'baseline', gap:6 }}>
        <span style={{ fontSize:22, fontWeight:700, color:amBc(barPct) }}>{formatVal(value)}</span>
        <span style={{ fontSize:11, color:'#475569' }}>/ {formatVal(limit)}</span>
      </div>

      {editing ? (
        <div style={{ marginTop:8, display:'flex', gap:6, alignItems:'center' }}>
          <input ref={inputRef} type="number" step={step} value={tmp}
            onChange={e => setTmp(e.target.value)}
            onKeyDown={e => { if(e.key==='Enter')save(); if(e.key==='Escape')setEditing(false); }}
            style={{ width:80, padding:'4px 8px', borderRadius:6, border:'1px solid rgba(99,102,241,.4)', background:'rgba(99,102,241,.1)', color:'#818cf8', fontSize:13, fontFamily:'JetBrains Mono' }}
          />
          <span style={{ fontSize:11, color:'#64748b' }}>{unit}</span>
          <button onClick={save} style={{ padding:'3px 10px', borderRadius:6, border:'none', background:'rgba(99,102,241,.25)', color:'#818cf8', cursor:'pointer', fontSize:11, fontWeight:700 }}>ثبت</button>
          <button onClick={() => setEditing(false)} style={{ padding:'3px 8px', borderRadius:6, border:'none', background:'rgba(255,255,255,.05)', color:'#64748b', cursor:'pointer', fontSize:11 }}>✕</button>
        </div>
      ) : (
        <>
          <AMBar p={barPct}/>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:4 }}>
            <span style={{ fontSize:10, color:'#475569' }}>{barPct.toFixed(0)}% مصرف</span>
            <span style={{ fontSize:10, color:'#64748b' }}>{formatVal(limit - value)} مانده</span>
          </div>
        </>
      )}
    </AMCard>
  );
}

// ══════════════════════════════════════════════════════════
// ApiMonitor — کامپوننت اصلی
// ══════════════════════════════════════════════════════════
window.ApiMonitor = function ApiMonitor() {
  const { Icon } = window.SB_UI;
  const [data,    setData]   = useAM(null);
  const [period,  setPeriod] = useAM('today');
  const [loading, setLoading]= useAM(true);
  const [cfg,     setCfg]    = useAM({});
  const [saving,  setSaving] = useAM(false);
  const [saved,   setSaved]  = useAM(false);
  const [tab,     setTab]    = window.useStickyState('tab_api_monitor', 'overview');

  const PLATFORMS = [
    { id:'bale',      name:'بله',        icon:'message-circle', color:'#3B82F6' },
    { id:'telegram',  name:'تلگرام',     icon:'send',           color:'#26A5E4' },
    { id:'rubika',    name:'روبیکا',     icon:'smartphone',     color:'#E11D48' },
    { id:'instagram', name:'اینستاگرام', icon:'instagram',      color:'#E1306C' },
    { id:'whatsapp',  name:'واتساپ',     icon:'message-square', color:'#25D366' },
  ];

  const ERROR_LABEL = {
    proxy_down:    ['پروکسی قطع', '#F87171'],
    rate_limit:    ['Rate Limit',  '#FB923C'],
    auth_error:    ['کلید API',    '#C084FC'],
    timeout:       ['تایم‌اوت',   '#FBBF24'],
    network_error: ['شبکه',       '#60A5FA'],
    dns_error:     ['DNS',        '#34D399'],
    server_error:  ['سرور',       '#F87171'],
    api_error:     ['API',        '#94a3b8'],
  };

  const load = useCbAM(() => {
    setLoading(true);
    window.api(`/api-monitor/stats?period=${period}`)
      .then(d => { if(d.success){ setData(d.data); setCfg(d.data.settings||{}); } })
      .catch(()=>{})
      .finally(()=>setLoading(false));
  }, [period]);

  useEfAM(() => { load(); }, [load]);
  useEfAM(() => { const t=setInterval(load,30000); return ()=>clearInterval(t); }, [load]);

  const saveAll = () => {
    setSaving(true);
    window.api('/api-monitor/settings',{ method:'PUT', body:cfg })
      .then(d => { if(d.success){ setSaved(true); setTimeout(()=>setSaved(false),2000); load(); } })
      .finally(()=>setSaving(false));
  };

  const togglePlatform = pid => {
    const key  = `${pid}_enabled`;
    const next = cfg[key]==='0'?'1':'0';
    setCfg(p=>({...p,[key]:next}));
    window.api('/api-monitor/settings',{ method:'PUT', body:{ [key]:next } }).then(load);
  };

  const toggleFeature = fkey => {
    const key  = `feature_${fkey}`;
    const next = cfg[key]==='0'?'1':'0';
    setCfg(p=>({...p,[key]:next}));
    window.api('/api-monitor/settings',{ method:'PUT', body:{ [key]:next } }).then(load);
  };

  const AI_FEATURES = [
    { key:'state_detect',  label:'تشخیص مرحله مکالمه',     desc:'بعد از هر پیام با Haiku تشخیص می‌ده لید کجای اسکریپته',      icon:'map-pin' },
    { key:'data_extract',  label:'استخراج داده از پیام',    desc:'اطلاعات مشتری (سن، بودجه، شغل) از پیام استخراج می‌کنه',      icon:'database' },
    { key:'memory',        label:'خلاصه حافظه بلندمدت',     desc:'بعد از بستن مکالمه، خلاصه مشتری ذخیره می‌شه',                icon:'brain' },
    { key:'lead_analyze',  label:'تحلیل لید قبل از تماس',  desc:'هنگام باز کردن پروفایل لید در پنل، تحلیل هوشمند می‌سازه',   icon:'bar-chart-2' },
    { key:'library_ai',    label:'تحلیل هوشمند کتابخانه',  desc:'پیشنهاد ارتباط فایل‌ها با تریگرها و اسکریپت‌ها',            icon:'package' },
    { key:'script_gen',    label:'ساخت/ویرایش اسکریپت',    desc:'دستیار AI اسکریپت + ساخت نقشه مراحل + پیشنهاد رسانه',      icon:'edit-3' },
    { key:'followup_gen',  label:'تولید پیام فالوآپ',       desc:'تولید خودکار متن پیام‌های پیگیری با AI',                     icon:'send' },
  ];

  const toggleGlobal = () => {
    const next = cfg['global_enabled']==='0'?'1':'0';
    setCfg(p=>({...p,global_enabled:next}));
    window.api('/api-monitor/settings',{ method:'PUT', body:{ global_enabled:next } }).then(load);
  };

  const globalOn    = cfg['global_enabled'] !== '0';
  const dailyBudget = parseFloat(cfg['daily_budget_usd']   || data?.budgets?.daily   || 5);
  const monthBudget = parseFloat(cfg['monthly_budget_usd'] || data?.budgets?.monthly || 50);
  const maxCalls    = parseInt  (cfg['max_daily_calls']    || 500);
  const todayCost   = parseFloat(data?.today?.cost  || 0);
  const monthCost   = parseFloat(data?.month?.cost  || 0);
  const todayCalls  = parseInt  (data?.today?.calls || 0);
  const balance     = data?.balance || { initial:0, spent:0, remaining:0, hasBalance:false };
  const callsPct    = amPct(todayCalls, maxCalls);

  const TABS = [
    { id:'overview',  label:'نمای کلی',  icon:'layout-dashboard' },
    { id:'platforms', label:'پلتفرم‌ها',  icon:'layers' },
    { id:'quota',     label:'سهمیه‌ها',   icon:'shield' },
    { id:'errors',    label:'خطاها',      icon:'alert-triangle' },
    { id:'repair',    label:'تعمیر',      icon:'wrench' },
  ];

  return (
    <div style={{ padding:'20px 24px', maxWidth:1100, margin:'0 auto' }}>

      {/* ── Header ── */}
      <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:18 }}>
        <div>
          <div style={{ fontSize:18, fontWeight:700, color:'#e2e8f0' }}>مدیریت API کلود</div>
          <div style={{ fontSize:11, color:'#475569', marginTop:2 }}>موجودی، مصرف و سهمیه‌بندی</div>
        </div>
        <div style={{ marginRight:'auto', display:'flex', alignItems:'center', gap:10,
          background:globalOn?'rgba(74,222,128,.07)':'rgba(248,113,113,.07)',
          border:`1px solid ${globalOn?'rgba(74,222,128,.2)':'rgba(248,113,113,.2)'}`,
          borderRadius:10, padding:'8px 14px', cursor:'pointer' }} onClick={toggleGlobal}>
          <div style={{ width:7, height:7, borderRadius:'50%', background:globalOn?'#4ADE80':'#F87171', boxShadow:`0 0 6px ${globalOn?'#4ADE80':'#F87171'}` }}/>
          <span style={{ fontSize:12, fontWeight:700, color:globalOn?'#4ADE80':'#F87171' }}>{globalOn?'سرویس فعال':'سرویس غیرفعال'}</span>
          <AMTog on={globalOn} onToggle={()=>{}} size={20}/>
        </div>
        <div style={{ display:'flex', gap:4 }}>
          {['today','week','month'].map(p=>(
            <button key={p} onClick={()=>setPeriod(p)} style={{
              padding:'5px 11px', borderRadius:6, border:'none', fontSize:11, cursor:'pointer', fontWeight:600,
              background:period===p?'rgba(99,102,241,.2)':'rgba(255,255,255,.04)',
              color:period===p?'#818cf8':'#64748b',
            }}>{{today:'امروز',week:'هفته',month:'ماه'}[p]}</button>
          ))}
          <button onClick={load} style={{ padding:'5px 9px', borderRadius:6, border:'none', background:'rgba(255,255,255,.04)', color:'#64748b', cursor:'pointer' }}>
            <Icon name="refresh-cw" size={12}/>
          </button>
        </div>
      </div>

      {/* ── ۴ کارت اصلی ── */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:12, marginBottom:18 }}>
        <AMBalanceCard balance={balance} cfgBalance={cfg['api_balance']} onSave={load}/>

        <AMBudgetCard
          label="بودجه روزانه" cfgKey="daily_budget_usd"
          hint="حداکثر هزینه‌ای که ربات می‌تونه امروز خرج کنه — دکمه ✏️ را بزن تا ویرایش کنی"
          value={todayCost} limit={dailyBudget}
          formatVal={amFc} step="0.5" unit="$" onSave={load}
        />
        <AMBudgetCard
          label="بودجه ماهانه" cfgKey="monthly_budget_usd"
          hint="سقف ماهانه — دکمه ✏️ را بزن تا ویرایش کنی"
          value={monthCost} limit={monthBudget}
          formatVal={amFc} step="5" unit="$" onSave={load}
        />

        {/* کارت درخواست‌ها */}
        <AMBudgetCard
          label="درخواست امروز" cfgKey="max_daily_calls"
          hint="تعداد کل call به Claude در روز — دکمه ✏️ را بزن تا ویرایش کنی"
          value={todayCalls} limit={maxCalls}
          formatVal={v=>String(parseInt(v||0))} step="50" unit="عدد" onSave={load}
        />
      </div>

      {/* ── Tabs ── */}
      <div style={{ display:'flex', gap:2, marginBottom:16, borderBottom:'1px solid rgba(255,255,255,.06)' }}>
        {TABS.map(t=>(
          <button key={t.id} onClick={()=>setTab(t.id)} style={{
            display:'flex', alignItems:'center', gap:6, padding:'8px 16px',
            borderRadius:'8px 8px 0 0', border:'none', cursor:'pointer', fontSize:12, fontWeight:600,
            background:tab===t.id?'rgba(99,102,241,.12)':'transparent',
            color:tab===t.id?'#818cf8':'#64748b',
            borderBottom:tab===t.id?'2px solid #818cf8':'2px solid transparent',
          }}>
            <Icon name={t.icon} size={13}/>{t.label}
          </button>
        ))}
      </div>

      {loading && !data
        ? <div style={{ textAlign:'center', padding:60, color:'#475569' }}>در حال بارگذاری...</div>
        : <>

        {/* ══ نمای کلی ══ */}
        {tab==='overview' && (
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 }}>
              {[
                { l:'هزینه کل دوره',  v:amFc(data?.overview?.cost_usd), s:'دلار', c:'#818cf8' },
                { l:'توکن ورودی',     v:amFt(data?.overview?.tokens_input),  s:'system+history', c:'#60A5FA',
                  hint:'هر call = system prompt اسکریپت + اطلاعات لید + ۱۵ پیام قبلی' },
                { l:'توکن خروجی',     v:amFt(data?.overview?.tokens_output), s:'پاسخ Claude', c:'#34D399' },
                { l:'میانگین پاسخ',   v:(parseFloat(data?.overview?.avg_duration_ms||0)/1000).toFixed(1)+'s', s:'زمان', c:'#FB923C' },
              ].map(c=>(
                <AMCard key={c.l} style={{ padding:'14px 16px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:4, fontSize:10, color:'#64748b', fontWeight:600, marginBottom:4 }}>
                    {c.l} {c.hint&&<span title={c.hint} style={{ cursor:'help', opacity:.5 }}>ⓘ</span>}
                  </div>
                  <div style={{ fontSize:20, fontWeight:700, color:c.c }}>{c.v}</div>
                  <div style={{ fontSize:10, color:'#475569', marginTop:2 }}>{c.s}</div>
                </AMCard>
              ))}
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              <AMCard>
                <div style={{ fontSize:10, color:'#64748b', fontWeight:600, marginBottom:2 }}>فعالیت ۲۴ ساعت اخیر</div>
                <HourlyChart hours={data?.hourly||[]}/>
              </AMCard>
              <AMCard>
                <div style={{ fontSize:10, color:'#64748b', fontWeight:600, marginBottom:8 }}>
                  پر مصرف‌ترین اسکریپت‌ها
                  <span title="بر اساس هزینه کل دوره انتخاب‌شده" style={{ marginRight:4, cursor:'help', opacity:.5 }}>ⓘ</span>
                </div>
                {(data?.byScript||[]).length===0
                  ? <div style={{ textAlign:'center', padding:'20px 0', color:'#475569', fontSize:11 }}>هنوز داده‌ای ثبت نشده</div>
                  : (data?.byScript||[]).map(s=>(
                    <div key={s.script_id||s.script_name} style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                      <div style={{ flex:1, fontSize:11, color:'#cbd5e1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.script_name}</div>
                      <span style={{ fontSize:10, color:'#475569', fontFamily:'JetBrains Mono' }}>{s.calls} call</span>
                      <span style={{ fontSize:11, fontWeight:700, color:'#818cf8', fontFamily:'JetBrains Mono' }}>{amFc(s.cost)}</span>
                    </div>
                  ))
                }
              </AMCard>
            </div>
          </div>
        )}

        {/* ══ پلتفرم‌ها ══ */}
        {tab==='platforms' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {PLATFORMS.map(pl=>{
              const on    = cfg[`${pl.id}_enabled`] !== '0';
              const stats = data?.platformStats?.[pl.id]||{calls:0,cost:0,tokens:0,errors:0};
              const dlim  = parseFloat(cfg[`${pl.id}_daily_cost`]||'0');
              const clim  = parseInt  (cfg[`${pl.id}_daily_calls`]||'0');
              return (
                <div key={pl.id} style={{
                  background:'rgba(255,255,255,.025)', border:'1px solid rgba(255,255,255,.07)',
                  borderRadius:12, padding:'14px 18px',
                  borderRight:`3px solid ${on?pl.color+'55':'transparent'}`,
                  opacity:on?1:.5, transition:'opacity .2s',
                }}>
                  <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                    <div style={{ width:36, height:36, borderRadius:9, background:`${pl.color}18`, border:`1px solid ${pl.color}30`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                      <Icon name={pl.icon} size={17} color={pl.color}/>
                    </div>
                    <div style={{ width:80, flexShrink:0 }}>
                      <div style={{ fontSize:13, fontWeight:700, color:'#e2e8f0' }}>{pl.name}</div>
                      <div style={{ fontSize:10, color:on?'#4ADE80':'#F87171', marginTop:1 }}>{on?'فعال':'غیرفعال'}</div>
                    </div>
                    <div style={{ display:'flex', gap:20, flex:1 }}>
                      {[
                        {l:'درخواست',v:String(stats.calls),c:'#e2e8f0'},
                        {l:'هزینه',  v:amFc(stats.cost),   c:'#818cf8'},
                        {l:'توکن',   v:amFt(stats.tokens), c:'#60A5FA'},
                        ...(stats.errors>0?[{l:'خطا',v:String(stats.errors),c:'#F87171'}]:[]),
                      ].map(it=>(
                        <div key={it.l}>
                          <div style={{ fontSize:9, color:'#475569' }}>{it.l}</div>
                          <div style={{ fontSize:15, fontWeight:700, color:it.c, fontFamily:'JetBrains Mono' }}>{it.v}</div>
                        </div>
                      ))}
                    </div>
                    {(clim>0||dlim>0)&&(
                      <div style={{ flex:1 }}>
                        {clim>0&&(<div style={{ marginBottom:4 }}>
                          <div style={{ display:'flex', justifyContent:'space-between' }}>
                            <span style={{ fontSize:9, color:'#475569' }}>درخواست</span>
                            <span style={{ fontSize:9, color:'#475569', fontFamily:'JetBrains Mono' }}>{stats.calls}/{clim}</span>
                          </div>
                          <AMBar p={amPct(stats.calls,clim)} h={4}/>
                        </div>)}
                        {dlim>0&&(<div>
                          <div style={{ display:'flex', justifyContent:'space-between' }}>
                            <span style={{ fontSize:9, color:'#475569' }}>هزینه</span>
                            <span style={{ fontSize:9, color:'#475569', fontFamily:'JetBrains Mono' }}>{amFc(stats.cost)}/{amFc(dlim)}</span>
                          </div>
                          <AMBar p={amPct(stats.cost,dlim)} h={4}/>
                        </div>)}
                      </div>
                    )}
                    <AMTog on={on} onToggle={()=>togglePlatform(pl.id)} size={22}/>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* ══ سهمیه‌ها ══ */}
        {tab==='quota' && (
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            <AMCard>
              <div style={{ fontSize:11, color:'#94a3b8', fontWeight:700, marginBottom:12 }}>سهمیه کلی</div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16 }}>
                {[
                  {key:'daily_budget_usd',   label:'حداکثر هزینه روزانه ($)', ph:'5.0',  step:'0.5'},
                  {key:'monthly_budget_usd', label:'حداکثر هزینه ماهانه ($)',ph:'50.0', step:'5'},
                  {key:'max_daily_calls',    label:'حداکثر درخواست روزانه',  ph:'500',  step:'50'},
                ].map(f=>(
                  <div key={f.key}>
                    <div style={{ fontSize:11, color:'#64748b', marginBottom:5 }}>{f.label}</div>
                    <input type="number" step={f.step} value={cfg[f.key]||''} placeholder={f.ph}
                      onChange={e=>setCfg(p=>({...p,[f.key]:e.target.value}))}
                      style={{ width:'100%', padding:'7px 10px', borderRadius:7, border:'1px solid rgba(255,255,255,.1)', background:'rgba(255,255,255,.06)', color:'#e2e8f0', fontSize:13, fontFamily:'JetBrains Mono' }}
                    />
                  </div>
                ))}
              </div>
            </AMCard>
            <AMCard>
              <div style={{ fontSize:11, color:'#94a3b8', fontWeight:700, marginBottom:4 }}>سهمیه روزانه هر پلتفرم</div>
              <div style={{ fontSize:10, color:'#475569', marginBottom:12 }}>
                <code style={{ color:'#818cf8' }}>0</code> = بی‌نهایت
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'140px 1fr 1fr', gap:10, marginBottom:8 }}>
                {['پلتفرم','سقف درخواست روزانه','سقف هزینه روزانه ($)'].map(h=>(
                  <div key={h} style={{ fontSize:10, color:'#475569', fontWeight:700 }}>{h}</div>
                ))}
              </div>
              {PLATFORMS.map(pl=>{
                const on = cfg[`${pl.id}_enabled`] !== '0';
                return (
                  <div key={pl.id} style={{ display:'grid', gridTemplateColumns:'140px 1fr 1fr', gap:10, marginBottom:10, alignItems:'center' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <Icon name={pl.icon} size={13} color={pl.color}/>
                      <span style={{ fontSize:12, color:on?'#e2e8f0':'#475569', fontWeight:600 }}>{pl.name}</span>
                      <AMTog on={on} onToggle={()=>togglePlatform(pl.id)} size={18}/>
                    </div>
                    <input type="number" min="0" placeholder="0" value={cfg[`${pl.id}_daily_calls`]||''} disabled={!on}
                      onChange={e=>setCfg(p=>({...p,[`${pl.id}_daily_calls`]:e.target.value}))}
                      style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(255,255,255,.1)', background:on?'rgba(255,255,255,.06)':'rgba(255,255,255,.02)', color:on?'#e2e8f0':'#475569', fontSize:12, fontFamily:'JetBrains Mono', opacity:on?1:.5 }}
                    />
                    <input type="number" min="0" step="0.1" placeholder="0" value={cfg[`${pl.id}_daily_cost`]||''} disabled={!on}
                      onChange={e=>setCfg(p=>({...p,[`${pl.id}_daily_cost`]:e.target.value}))}
                      style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(255,255,255,.1)', background:on?'rgba(255,255,255,.06)':'rgba(255,255,255,.02)', color:on?'#e2e8f0':'#475569', fontSize:12, fontFamily:'JetBrains Mono', opacity:on?1:.5 }}
                    />
                  </div>
                );
              })}
            </AMCard>
            {/* ─── فعال/غیرفعال قابلیت‌های AI ────────────── */}
            <AMCard>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:14 }}>
                <div style={{ fontSize:11, color:'#94a3b8', fontWeight:700 }}>قابلیت‌های هوش مصنوعی</div>
                <div style={{ fontSize:10, color:'#475569', marginRight:4 }}>هر آیتم رو می‌تونی جداگانه خاموش کنی تا توکن مصرف نشه</div>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {AI_FEATURES.map(f => {
                  const on = cfg[`feature_${f.key}`] !== '0';
                  return (
                    <div key={f.key} style={{
                      display:'flex', alignItems:'center', gap:12,
                      padding:'10px 12px', borderRadius:9,
                      background: on ? 'rgba(74,222,128,.04)' : 'rgba(255,255,255,.02)',
                      border: `1px solid ${on ? 'rgba(74,222,128,.12)' : 'rgba(255,255,255,.05)'}`,
                      transition:'all .2s',
                    }}>
                      <Icon name={f.icon} size={15} color={on ? '#4ADE80' : '#475569'}/>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:12, fontWeight:600, color: on ? '#e2e8f0' : '#475569' }}>{f.label}</div>
                        <div style={{ fontSize:10, color:'#475569', marginTop:2 }}>{f.desc}</div>
                      </div>
                      <AMTog on={on} onToggle={()=>toggleFeature(f.key)} size={20}/>
                    </div>
                  );
                })}
              </div>
            </AMCard>

            <button onClick={saveAll} disabled={saving} style={{
              padding:'9px 28px', borderRadius:8, border:'none', cursor:'pointer', alignSelf:'flex-start',
              fontWeight:700, fontSize:13,
              background:saved?'rgba(74,222,128,.2)':'rgba(99,102,241,.2)',
              color:saved?'#4ADE80':'#818cf8',
            }}>
              {saving?'...':saved?'✓ ذخیره شد':'💾 ذخیره همه تنظیمات'}
            </button>
          </div>
        )}

        {/* ══ خطاها ══ */}
        {tab==='errors' && (
          <div style={{ display:'grid', gridTemplateColumns:'220px 1fr', gap:14 }}>
            <AMCard>
              <div style={{ fontSize:10, color:'#64748b', fontWeight:600, marginBottom:8 }}>نوع خطاها</div>
              {(data?.errors||[]).length===0
                ? <div style={{ textAlign:'center', padding:'20px 0', color:'#4ADE80', fontSize:12 }}>✓ بدون خطا</div>
                : (data?.errors||[]).map(e=>{
                  const [lbl,clr]=ERROR_LABEL[e.error_type]||[e.error_type,'#94a3b8'];
                  return (
                    <div key={e.error_type} style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                      <div style={{ width:7, height:7, borderRadius:'50%', background:clr, flexShrink:0 }}/>
                      <div style={{ flex:1, fontSize:11, color:'#94a3b8' }}>{lbl}</div>
                      <div style={{ fontSize:13, fontWeight:700, color:clr, fontFamily:'JetBrains Mono' }}>{e.cnt}</div>
                    </div>
                  );
                })
              }
            </AMCard>
            <AMCard>
              <div style={{ fontSize:10, color:'#64748b', fontWeight:600, marginBottom:8 }}>آخرین خطاها</div>
              {(data?.recentErrors||[]).length===0
                ? <div style={{ textAlign:'center', padding:'20px 0', color:'#4ADE80', fontSize:12 }}>✓ خطایی ثبت نشده</div>
                : (data?.recentErrors||[]).map(e=>{
                  const [lbl,clr]=ERROR_LABEL[e.error_type]||[e.error_type,'#94a3b8'];
                  return (
                    <div key={e.id} style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 0', borderBottom:'1px solid rgba(255,255,255,.04)', fontSize:11 }}>
                      <span style={{ color:'#475569', fontFamily:'JetBrains Mono', width:40, flexShrink:0 }}>{e.created_at?.slice(11,16)}</span>
                      <span style={{ padding:'1px 7px', borderRadius:10, fontSize:9, background:`${clr}18`, color:clr, fontWeight:700, flexShrink:0 }}>{lbl}</span>
                      <span style={{ color:'#94a3b8', width:60, flexShrink:0 }}>{e.platform||'-'}</span>
                      <span style={{ color:'#64748b', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{e.error_msg?.slice(0,60)}</span>
                    </div>
                  );
                })
              }
            </AMCard>
          </div>
        )}

        {/* ══ تعمیر ══ */}
        {tab==='repair' && <RepairTab Icon={Icon}/>}

        </>
      }
    </div>
  );
};

// ─── Repair Tab ──────────────────────────────────────────
function RepairTab({ Icon }) {
  const [diag, setDiag] = useAM(null);
  const [loading, setLoading] = useAM(true);

  const load = () => {
    setLoading(true);
    window.api('/api-monitor/diagnostics')
      .then(d => { if(d.success) setDiag(d.data); })
      .finally(() => setLoading(false));
  };
  useEfAM(() => { load(); }, []);

  const ISSUES = diag ? buildIssues(diag) : [];
  const active = ISSUES.filter(i=>i.active);
  const ok     = ISSUES.filter(i=>!i.active);

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <div style={{ fontSize:11, color:'#64748b' }}>
          تشخیص خودکار — بر اساس خطاهای ۲۴ ساعت اخیر
          <span style={{ marginRight:8, padding:'2px 8px', borderRadius:6, background:'rgba(74,222,128,.1)', color:'#4ADE80', fontSize:10, fontWeight:700 }}>
            ✦ auto-fix فعال
          </span>
        </div>
        <button onClick={load} style={{ marginRight:'auto', padding:'4px 10px', borderRadius:6, border:'none', background:'rgba(255,255,255,.05)', color:'#64748b', cursor:'pointer', fontSize:11, display:'flex', alignItems:'center', gap:5 }}>
          <Icon name="refresh-cw" size={11}/> رفرش
        </button>
      </div>

      {loading
        ? <div style={{ textAlign:'center', padding:60, color:'#475569' }}>در حال تشخیص...</div>
        : <>
          {active.length===0 ? (
            <div style={{ display:'flex', alignItems:'center', gap:14, background:'rgba(74,222,128,.06)', border:'1px solid rgba(74,222,128,.2)', borderRadius:12, padding:'16px 20px' }}>
              <span style={{ fontSize:24 }}>✅</span>
              <div>
                <div style={{ fontSize:14, fontWeight:700, color:'#4ADE80' }}>همه چیز سالمه</div>
                <div style={{ fontSize:12, color:'#475569', marginTop:2 }}>در ۲۴ ساعت اخیر مشکل شناخته‌شده‌ای وجود نداشته</div>
              </div>
            </div>
          ) : active.map(issue => <IssueCard key={issue.id} issue={issue} Icon={Icon} onFixed={load}/>)}

          {ok.length>0 && (
            <div style={{ marginTop:8 }}>
              <div style={{ fontSize:10, color:'#475569', fontWeight:600, marginBottom:10, letterSpacing:.5 }}>✓ بدون مشکل</div>
              {ok.map(issue => (
                <div key={issue.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', background:'rgba(255,255,255,.015)', borderRadius:8, border:'1px solid rgba(255,255,255,.05)', marginBottom:6 }}>
                  <span style={{ fontSize:16 }}>{issue.icon}</span>
                  <span style={{ fontSize:12, color:'#475569' }}>{issue.title}</span>
                  <span style={{ marginRight:'auto', fontSize:10, color:'#4ADE80' }}>✓ مشکلی نیست</span>
                </div>
              ))}
            </div>
          )}
        </>
      }
    </div>
  );
}

// ─── buildIssues ──────────────────────────────────────────
function buildIssues(diag) {
  return [
    {
      id:'proxy', icon:'🔌', title:'پروکسی / VPN قطع یا تنظیم‌شده', severity:'high',
      // active اگه: پروکسی تنظیم شده، یا در ۱ ساعت اخیر خطای proxy_down داشتیم
      active: !!diag.proxyUrl || diag.proxyLast1h > 0,
      fixType: 'remove-proxy',
      lastSeen: diag.lastProxy,
      description: `سرور تلاش می‌کنه از طریق پروکسی محلی به Claude وصل بشه. اگه VPN خاموشه، همه call‌ها قطع می‌شن.`,
      cause: diag.proxyUrl
        ? `در فایل <code>.env</code> خط <code>CLAUDE_HTTPS_PROXY=${diag.proxyUrl}</code> وجود داره.`
        : `در ۱ ساعت اخیر خطای اتصال پروکسی ثبت شده.`,
    },
    {
      id:'auth', icon:'🔑', title:'کلید API کلود معتبر نیست', severity:'high',
      // active اگه: کلید وجود نداره، یا در ۱ ساعت اخیر خطای auth داشتیم
      active: !diag.hasApiKey || diag.authLast1h > 0,
      fixType: 'set-api-key',
      lastSeen: diag.lastAuth,
      description: 'Claude API کلید رو رد کرده (401/403). کلید اشتباه یا منقضی شده.',
      cause: 'مقدار <code>CLAUDE_API_KEY</code> در فایل <code>server/.env</code> مشکل دارد. از <a href="https://console.anthropic.com/settings/keys" target="_blank" style="color:#818cf8">کنسول آنتروپیک</a> کلید جدید بگیر.',
    },
    {
      id:'rate', icon:'⏱️', title:'Rate Limit — درخواست زیاد', severity:'medium',
      // active فقط اگه در ۱ ساعت اخیر rate_limit داشتیم (نه تاریخی)
      active: diag.rateLast1h > 0,
      fixType: 'reduce-calls',
      lastSeen: diag.lastRate,
      description: 'Anthropic درخواست‌های زیاد در مدت کوتاه رو رد می‌کنه (429).',
      cause: 'Plan فعلی محدودیت RPM دارد یا چند کاربر همزمان پیام فرستادن.',
    },
    {
      id:'duplicate', icon:'🔁', title:'پیام تکراری از بله', severity:'low',
      // active فقط اگه در ۱ ساعت اخیر هنوز خطای prefill داشتیم (بعد از اعمال fix)
      active: diag.dupLast1h > 0,
      fixType: 'code-fixed',
      lastSeen: diag.lastDup,
      description: 'بله گاهی یه پیام رو دوبار تحویل می‌ده. اولی پردازش می‌شه، دومی خطای <code>assistant prefill</code> می‌ده.',
      cause: 'رفتار polling بله — duplicate delivery. کد dedup در <code>baleChannel.js</code> اضافه شده و مشکل برطرف شده.',
    },
    {
      id:'script', icon:'📄', title:'اسکریپت فعالی وجود ندارد', severity:'high',
      active: diag.activeScripts === 0,
      fixType: 'enable-scripts',
      lastSeen: null,
      description: 'هیچ اسکریپتی فعال نیست — ربات به هیچ پیامی جواب نمی‌ده.',
      cause: 'همه اسکریپت‌ها غیرفعال شدن. باید حداقل یکی فعال باشه.',
    },
    {
      id:'filesend', icon:'📤', title:'ارسال فایل به کاربر ناموفق', severity:'high',
      active: diag.fileSendLast1h > 0,
      fixType: 'manual',
      lastSeen: diag.lastFileSend,
      description: `ربات سعی کرده فایل بفرسته ولی بله reject کرده.<br/>${diag.lastFileSendMsg ? `<code style="font-size:10px">${diag.lastFileSendMsg.slice(0,120)}</code>` : ''}`,
      cause: 'احتمال ۱: حجم فایل بیشتر از ۲۰MB — بله بات‌ها فایل‌های سنگین رو رد می‌کنن.<br/>احتمال ۲: مشکل شبکه یا timeout.',
      manualSteps: [
        'به صفحه <strong>کتابخانه</strong> برو',
        'ویدیوهای بیشتر از ۲۰MB رو پیدا کن و با HandBrake فشرده‌شون کن',
        'فایل فشرده رو دوباره آپلود کن — الان آپلود بیشتر از ۲۰MB مسدوده',
      ],
    },
    {
      id:'port', icon:'🔒', title:'سرور روی پورت ۳۰۰۰ قفل کرده', severity:'medium',
      active: false,
      fixType: 'manual',
      lastSeen: null,
      description: 'وقتی restart می‌کنی: <code>EADDRINUSE: address already in use :::3000</code>',
      cause: 'پروسه قدیمی node هنوز روی پورت ۳۰۰۰ داره listen می‌کنه.',
      manualSteps: [
        'Ctrl+Shift+Esc → Task Manager رو باز کن',
        'همه <code>node.exe</code> رو راست‌کلیک → End Task',
        'دوباره سرور رو start کن: <code>node index.js</code>',
      ],
    },
  ];
}

// ─── IssueCard ─────────────────────────────────────────────
function IssueCard({ issue, Icon, onFixed }) {
  const [open,       setOpen]       = useAM(true);
  const [fixing,     setFixing]     = useAM(false);
  const [fixResult,  setFixResult]  = useAM(null);   // {ok, msg}
  const [apiKeyVal,  setApiKeyVal]  = useAM('');
  const [scripts,    setScripts]    = useAM(null);
  const [enablingId, setEnablingId] = useAM(null);

  const sevColor = {high:'#F87171', medium:'#FB923C', low:'#FBBF24'}[issue.severity] || '#94a3b8';
  const sevLabel = {high:'بحرانی',  medium:'متوسط',  low:'کم‌اهمیت'}[issue.severity] || '';

  // ── تابع اصلی fix
  const doFix = (endpoint, body={}) => {
    setFixing(true);
    setFixResult(null);
    window.api(`/api-monitor/repair/${endpoint}`, { method:'POST', body })
      .then(d => {
        if(d.success) {
          setFixResult({ ok:true,  msg: d.msg || 'انجام شد ✓' });
          setTimeout(() => onFixed(), 1800);
        } else {
          setFixResult({ ok:false, msg: d.error || 'خطا' });
        }
      })
      .catch(e => setFixResult({ ok:false, msg: e.message }))
      .finally(() => setFixing(false));
  };

  const loadScripts = () => {
    window.api('/api-monitor/repair/scripts').then(d => { if(d.success) setScripts(d.data); });
  };

  const enableScript = (id) => {
    setEnablingId(id);
    window.api('/api-monitor/repair/enable-script', { method:'POST', body:{ id } })
      .then(d => {
        if(d.success) {
          setScripts(prev => prev.map(s => s.id===id ? {...s, is_active:1} : s));
          setFixResult({ ok:true, msg: d.msg });
          setTimeout(() => onFixed(), 1800);
        } else {
          setFixResult({ ok:false, msg: d.error });
        }
      })
      .finally(() => setEnablingId(null));
  };

  // ── پنل fix بر اساس نوع
  const renderFixPanel = () => {
    const btnBase = (color) => ({
      padding:'8px 18px', borderRadius:7, border:'none', cursor:'pointer',
      background:`${color}18`, color, fontWeight:700, fontSize:12,
      display:'inline-flex', alignItems:'center', gap:6,
      opacity: fixing ? .5 : 1,
    });

    if(fixResult) {
      return (
        <div style={{ padding:'10px 14px', borderRadius:8, marginTop:10,
          background: fixResult.ok ? 'rgba(74,222,128,.1)' : 'rgba(248,113,113,.1)',
          border: `1px solid ${fixResult.ok ? 'rgba(74,222,128,.25)' : 'rgba(248,113,113,.25)'}`,
          color: fixResult.ok ? '#4ADE80' : '#F87171', fontSize:12, fontWeight:600,
        }}>{fixResult.msg}</div>
      );
    }

    if(issue.fixType === 'remove-proxy') return (
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:11, color:'#94a3b8', marginBottom:8 }}>
          🔧 این دکمه پروکسی رو از سرور حذف می‌کنه — <strong>بدون ری‌استارت</strong> اعمال می‌شه:
        </div>
        <button disabled={fixing} onClick={() => doFix('remove-proxy')} style={btnBase('#F87171')}>
          {fixing ? '⏳ در حال اعمال...' : '🔌 حذف پروکسی از سرور'}
        </button>
      </div>
    );

    if(issue.fixType === 'set-api-key') return (
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:11, color:'#94a3b8', marginBottom:8 }}>
          🔧 کلید جدید رو اینجا وارد کن — در DB ذخیره می‌شه، <strong>بدون ری‌استارت</strong>:
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <input type="text" placeholder="sk-ant-api03-..."
            value={apiKeyVal} onChange={e=>setApiKeyVal(e.target.value)}
            onKeyDown={e=>e.key==='Enter'&&apiKeyVal.startsWith('sk-ant-')&&doFix('set-api-key',{key:apiKeyVal})}
            style={{ flex:1, padding:'8px 12px', borderRadius:7, border:'1px solid rgba(192,132,252,.3)',
              background:'rgba(192,132,252,.07)', color:'#e2e8f0', fontSize:12, fontFamily:'JetBrains Mono' }}
          />
          <button disabled={fixing || !apiKeyVal.startsWith('sk-ant-')}
            onClick={() => doFix('set-api-key', { key:apiKeyVal })}
            style={btnBase('#C084FC')}>
            {fixing ? '...' : '🔑 ثبت کلید'}
          </button>
        </div>
        {apiKeyVal && !apiKeyVal.startsWith('sk-ant-') && (
          <div style={{ fontSize:10, color:'#F87171', marginTop:4 }}>کلید باید با sk-ant- شروع بشه</div>
        )}
      </div>
    );

    if(issue.fixType === 'reduce-calls') return (
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:11, color:'#94a3b8', marginBottom:8 }}>
          🔧 سهمیه روزانه رو به نصف کاهش بده تا rate limit برطرف بشه:
        </div>
        <button disabled={fixing} onClick={() => doFix('reduce-calls')} style={btnBase('#FB923C')}>
          {fixing ? '⏳...' : '⬇️ کاهش سهمیه به نصف'}
        </button>
      </div>
    );

    if(issue.fixType === 'enable-scripts') return (
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:11, color:'#94a3b8', marginBottom:8 }}>
          🔧 حداقل یه اسکریپت فعال کن تا ربات جواب بده:
        </div>
        {!scripts
          ? <button onClick={loadScripts} style={btnBase('#818cf8')}>📋 نمایش اسکریپت‌ها</button>
          : <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {scripts.length === 0
                ? <div style={{ fontSize:11, color:'#F87171' }}>هیچ اسکریپتی در سیستم وجود ندارد</div>
                : scripts.map(s => (
                  <div key={s.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px',
                    background:'rgba(255,255,255,.03)', borderRadius:7, border:'1px solid rgba(255,255,255,.06)' }}>
                    <span style={{ flex:1, fontSize:12, color:s.is_active?'#e2e8f0':'#64748b' }}>{s.name}</span>
                    {s.is_active
                      ? <span style={{ fontSize:10, color:'#4ADE80', fontWeight:700 }}>✓ فعال</span>
                      : <button disabled={enablingId===s.id}
                          onClick={() => enableScript(s.id)}
                          style={{ padding:'4px 12px', borderRadius:6, border:'none', cursor:'pointer',
                            background:'rgba(99,102,241,.15)', color:'#818cf8', fontSize:11, fontWeight:700 }}>
                          {enablingId===s.id ? '...' : 'فعال کن'}
                        </button>
                    }
                  </div>
                ))
              }
            </div>
        }
      </div>
    );

    if(issue.fixType === 'code-fixed') return (
      <div style={{ marginTop:12, padding:'10px 14px', background:'rgba(74,222,128,.06)',
        border:'1px solid rgba(74,222,128,.2)', borderRadius:8, fontSize:12, color:'#4ADE80' }}>
        ✓ این مشکل قبلاً در کد <code>baleChannel.js</code> درست شده — dedup فعاله.
      </div>
    );

    if(issue.fixType === 'manual' && issue.manualSteps) return (
      <div style={{ marginTop:12 }}>
        <div style={{ fontSize:11, color:'#94a3b8', marginBottom:8 }}>🔧 این مشکل باید دستی حل بشه:</div>
        {issue.manualSteps.map((step,i) => (
          <div key={i} style={{ display:'flex', gap:10, padding:'8px 12px', background:'rgba(255,255,255,.03)',
            borderRadius:7, border:'1px solid rgba(255,255,255,.05)', marginBottom:6, fontSize:12 }}>
            <span style={{ color:'#FB923C', fontWeight:700, flexShrink:0 }}>{i+1}.</span>
            <span style={{ color:'#94a3b8' }} dangerouslySetInnerHTML={{ __html:step }}/>
          </div>
        ))}
      </div>
    );

    return null;
  };

  return (
    <div style={{ background:'rgba(255,255,255,.025)', border:`1px solid ${sevColor}35`,
      borderRight:`3px solid ${sevColor}`, borderRadius:12, overflow:'hidden' }}>

      {/* هدر */}
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 18px', cursor:'pointer' }}
        onClick={()=>setOpen(p=>!p)}>
        <span style={{ fontSize:20 }}>{issue.icon}</span>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
            <span style={{ fontSize:14, fontWeight:700, color:'#e2e8f0' }}>{issue.title}</span>
            <span style={{ fontSize:10, padding:'2px 8px', borderRadius:10, background:`${sevColor}18`, color:sevColor, fontWeight:700 }}>{sevLabel}</span>
            {issue.fixType && issue.fixType !== 'manual' && (
              <span style={{ fontSize:9, padding:'2px 7px', borderRadius:10, background:'rgba(74,222,128,.1)', color:'#4ADE80', fontWeight:700 }}>⚡ auto-fix</span>
            )}
          </div>
          {issue.lastSeen && <div style={{ fontSize:10, color:'#475569', marginTop:2 }}>آخرین بار: {issue.lastSeen.slice(0,16)}</div>}
        </div>
        <Icon name={open?'chevron-up':'chevron-down'} size={14} color="#475569"/>
      </div>

      {/* محتوا */}
      {open && (
        <div style={{ padding:'0 18px 18px', borderTop:'1px solid rgba(255,255,255,.05)' }}>
          <div style={{ marginTop:14 }}>
            <div style={{ fontSize:11, color:'#94a3b8', fontWeight:600, marginBottom:5 }}>🔍 مشکل چیه؟</div>
            <div style={{ fontSize:12, color:'#cbd5e1', lineHeight:1.8 }}
              dangerouslySetInnerHTML={{ __html:issue.description }}/>
          </div>
          <div style={{ marginTop:8 }}>
            <div style={{ fontSize:11, color:'#94a3b8', fontWeight:600, marginBottom:5 }}>⚡ علت</div>
            <div style={{ fontSize:12, color:'#94a3b8', lineHeight:1.8 }}
              dangerouslySetInnerHTML={{ __html:issue.cause }}/>
          </div>

          {/* پنل fix */}
          <div style={{ marginTop:4, padding:'14px', background:'rgba(255,255,255,.02)', borderRadius:9,
            border:'1px solid rgba(255,255,255,.06)' }}>
            {renderFixPanel()}
          </div>

          <div style={{ marginTop:12, display:'flex', justifyContent:'flex-end' }}>
            <button onClick={onFixed} style={{ padding:'5px 14px', borderRadius:6, border:'none', cursor:'pointer',
              background:'rgba(74,222,128,.08)', color:'#4ADE80', fontSize:11, fontWeight:600,
              display:'flex', alignItems:'center', gap:5 }}>
              <Icon name="check-circle" size={11}/> بررسی مجدد
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── نمودار ساعتی ─────────────────────────────────────────
function HourlyChart({ hours }) {
  const buckets = Array.from({length:24},(_,i)=>{
    const h=String(i).padStart(2,'0');
    return hours.find(x=>x.hour===h)||{hour:h,calls:0,errors:0};
  });
  const maxC=Math.max(...buckets.map(b=>parseInt(b.calls||0)),1);
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap:2, height:70, marginTop:8 }}>
      {buckets.map(b=>{
        const p=parseInt(b.calls||0)/maxC, err=parseInt(b.errors||0)>0;
        return (
          <div key={b.hour} title={`${b.hour}:00 — ${b.calls} درخواست`} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center' }}>
            <div style={{ width:'100%', height:Math.max(3,p*60), background:err?'#F87171':'rgba(99,102,241,.55)', borderRadius:'2px 2px 0 0' }}/>
            {parseInt(b.hour)%6===0&&<div style={{ fontSize:8, color:'#475569', marginTop:2, fontFamily:'JetBrains Mono' }}>{b.hour}</div>}
          </div>
        );
      })}
    </div>
  );
}