function CampaignPreview({ campaign: c, onClose, tips }) {
  const tip = tips.find(t => t.adId === c.id);
  const roas = Number(c.roas);
  const roasColor = roas < 1.5 ? 'var(--neg)' : roas >= 3.5 ? 'var(--pos)' : 'var(--accent-strong)';

  // Simple sparkline — mock 7-day trend based on ROAS
  const spark = Array.from({ length: 7 }, (_, i) => {
    const base = Number(c.revenue) / 7;
    return base * (0.7 + Math.sin(i * 0.9 + roas) * 0.3 + i * 0.04);
  });
  const sparkMax = Math.max(...spark);
  const sparkMin = Math.min(...spark);
  const H = 60, W = 240;
  const sx = (i) => (i / 6) * W;
  const sy = (v) => H - ((v - sparkMin) / (sparkMax - sparkMin + 1)) * H * 0.85 - 4;
  const sparkPath = spark.map((v, i) => `${i ? 'L' : 'M'}${sx(i).toFixed(1)},${sy(v).toFixed(1)}`).join(' ');
  const sparkArea = sparkPath + ` L${W},${H} L0,${H} Z`;

  const kpis = [
    { label:'ค่าโฆษณา', en:'SPEND', value:`฿${Number(c.spend).toLocaleString()}`, color:'var(--ink)' },
    { label:'รายได้', en:'REVENUE', value:`฿${Number(c.revenue).toLocaleString()}`, color:'var(--pos)' },
    { label:'ROAS', en:'RETURN', value:`${Number(c.roas).toFixed(2)}x`, color:roasColor },
    { label:'CTR', en:'CLICK RATE', value:`${c.ctr}%`, color:'var(--ink)' },
    { label:'CPC', en:'COST/CLICK', value:`฿${c.cpc}`, color:'var(--ink)' },
    { label:'Conversions', en:'CONV.', value:String(c.conversions), color:'var(--info)' },
  ];

  return (
    <>
      {/* backdrop */}
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.3)', zIndex:100, backdropFilter:'blur(2px)' }} />

      {/* panel */}
      <div style={{
        position:'fixed', top:0, right:0, bottom:0, width:'clamp(320px, 42vw, 520px)',
        background:'var(--surface)', borderLeft:'1px solid var(--border)',
        boxShadow:'-12px 0 40px -10px rgba(0,0,0,0.15)',
        zIndex:101, display:'flex', flexDirection:'column', overflowY:'auto',
        animation:'slideInRight .22s cubic-bezier(.4,0,.2,1)',
      }}>
        <style>{`@keyframes slideInRight{from{transform:translateX(100%)}to{transform:none}}`}</style>

        {/* panel header */}
        <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, flexShrink:0, background:'var(--surface)', position:'sticky', top:0, zIndex:2 }}>
          <div style={{ minWidth:0 }}>
            <div style={{ fontSize:16, fontWeight:800, color:'var(--ink)', letterSpacing:'-0.01em', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.name}</div>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:5 }}>
              <span className="chip chip-pos" style={{ gap:5, fontSize:11 }}>
                <span style={{ width:6, height:6, borderRadius:99, background:'var(--pos)' }} />
                {c.status || 'ACTIVE'}
              </span>
              <span className="eyebrow">ID: {c.adSetId || c.id}</span>
            </div>
          </div>
          <button onClick={onClose} style={{ width:34, height:34, borderRadius:8, border:'1px solid var(--border)', background:'var(--surface-2)', cursor:'pointer', display:'grid', placeItems:'center', color:'var(--ink-2)', flexShrink:0 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>

        {/* body */}
        <div style={{ padding:'20px 22px', display:'flex', flexDirection:'column', gap:22, flex:1 }}>

          {/* KPI grid */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10 }}>
            {kpis.map((k, i) => (
              <div key={i} style={{ padding:'13px 14px', background:'var(--surface-2)', borderRadius:'var(--radius-sm)', border:'1px solid var(--border)' }}>
                <div className="eyebrow" style={{ marginBottom:5 }}>{k.en}</div>
                <div className="mono" style={{ fontSize:18, fontWeight:700, color:k.color, lineHeight:1.1 }}>{k.value}</div>
                <div style={{ fontSize:11, color:'var(--ink-3)', marginTop:3 }}>{k.label}</div>
              </div>
            ))}
          </div>

          {/* 7-day sparkline */}
          <div style={{ background:'var(--surface-2)', borderRadius:'var(--radius-sm)', border:'1px solid var(--border)', padding:'16px 18px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
              <div style={{ fontSize:13, fontWeight:700, color:'var(--ink)' }}>แนวโน้ม 7 วัน</div>
              <div style={{ display:'flex', gap:10 }}>
                <Legend color="var(--accent)" label="Revenue" />
              </div>
            </div>
            <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} style={{ display:'block', overflow:'visible' }}>
              <defs>
                <linearGradient id="sg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d={sparkArea} fill="url(#sg)"/>
              <path d={sparkPath} fill="none" stroke="var(--accent)" strokeWidth="2.2"/>
              {spark.map((v, i) => (
                <circle key={i} cx={sx(i)} cy={sy(v)} r="3" fill="var(--surface)" stroke="var(--accent)" strokeWidth="2"/>
              ))}
            </svg>
            <div style={{ display:'flex', justifyContent:'space-between', marginTop:6 }}>
              {['จ.','อ.','พ.','พฤ.','ศ.','ส.','อา.'].map((d, i) => (
                <span key={i} className="mono" style={{ fontSize:10, color:'var(--ink-4)' }}>{d}</span>
              ))}
            </div>
          </div>

          {/* AI insight for this campaign */}
          {tip ? (
            <div style={{ borderRadius:'var(--radius-sm)', border:`1px solid ${tip.actionType === 'adjust_budget' ? 'var(--pos)' : 'var(--neg)'}`, overflow:'hidden' }}>
              <div style={{ padding:'12px 16px', background: tip.actionType === 'adjust_budget' ? 'var(--pos-soft)' : 'var(--neg-soft)', display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ color: tip.actionType === 'adjust_budget' ? 'var(--pos)' : 'var(--neg)' }}>
                  {tip.actionType === 'adjust_budget' ? <IconTrend size={17} /> : <IconWarn size={17} />}
                </span>
                <span style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)' }}>{tip.issue}</span>
              </div>
              <div style={{ padding:'14px 16px', background:'var(--surface)', fontSize:13, color:'var(--ink-2)', lineHeight:1.6 }}>{tip.recommendation}</div>
            </div>
          ) : (
            <div style={{ padding:'14px 16px', borderRadius:'var(--radius-sm)', background:'var(--surface-2)', border:'1px solid var(--border)', fontSize:13, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:8 }}>
              <IconSpark size={16} style={{ color:'var(--accent)' }} />
              กด "ให้ AI ช่วยวิเคราะห์" เพื่อดูคำแนะนำสำหรับแคมเปญนี้
            </div>
          )}

          {/* Meta Ads API fields (ready for real data) */}
          <div>
            <div className="eyebrow" style={{ marginBottom:10 }}>META ADS FIELDS · API READY</div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {[
                { k:'Campaign ID', v: c.campaignId || 'ยังไม่ได้เชื่อมต่อ' },
                { k:'Ad Set ID', v: c.adSetId || 'ยังไม่ได้เชื่อมต่อ' },
                { k:'Objective', v: c.objective || 'CONVERSIONS' },
                { k:'Bid Strategy', v: c.bidStrategy || 'LOWEST_COST_WITH_BID_CAP' },
              ].map((row, i) => (
                <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'9px 12px', borderRadius:8, background:'var(--surface-2)', border:'1px solid var(--border)' }}>
                  <span className="eyebrow" style={{ fontSize:10 }}>{row.k}</span>
                  <span className="mono" style={{ fontSize:12, color:'var(--ink-2)', fontWeight:500 }}>{row.v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Actions */}
          <div style={{ display:'flex', flexDirection:'column', gap:8, paddingBottom:8 }}>
            <div className="eyebrow" style={{ marginBottom:4 }}>QUICK ACTIONS</div>
            <button className="btn btn-ghost" style={{ justifyContent:'space-between', textAlign:'left' }}>
              <span style={{ display:'flex', alignItems:'center', gap:8 }}><IconBolt size={15} style={{ color:'var(--accent)' }} /> ปรับงบ +20%</span>
              <span className="eyebrow">SCALE</span>
            </button>
            <button className="btn btn-ghost" style={{ justifyContent:'space-between' }}>
              <span style={{ display:'flex', alignItems:'center', gap:8 }}><IconRefresh size={15} style={{ color:'var(--ink-3)' }} /> เปลี่ยน Creative</span>
              <span className="eyebrow">CREATIVE</span>
            </button>
            <button className="btn btn-ghost" style={{ justifyContent:'space-between' }}>
              <span style={{ display:'flex', alignItems:'center', gap:8 }}><IconPlay size={15} style={{ color:'var(--neg)' }} /> หยุดชั่วคราว</span>
              <span className="eyebrow">PAUSE</span>
            </button>
            <a href="https://www.facebook.com/adsmanager" target="_blank" rel="noopener"
              style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8, padding:'10px 16px', borderRadius:'var(--radius-sm)', border:'1px solid var(--border)', background:'var(--surface-2)', color:'var(--ink-2)', fontWeight:600, fontSize:13.5, textDecoration:'none', marginTop:4 }}>
              <IconArrowUpRight size={15} /> ดูใน Meta Ads Manager
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

/* ============================ SETTINGS ============================ */