function MetaApiEmptyState({ onNavigate, onLoadSample, view = 'dashboard' }) {
  const endpoints = META_ENDPOINTS[view] || META_ENDPOINTS.dashboard;
  const title = view === 'dashboard' ? 'ภาพรวมแคมเปญ' : 'ข้อมูลแคมเปญ';
  return (
    <div className="card fade-up" style={{ padding:'clamp(28px,5vw,52px) clamp(20px,4vw,40px)', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:22 }}>
      <div style={{ width:64, height:64, borderRadius:'50%', background:'var(--surface-3)', display:'grid', placeItems:'center' }}>
        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
          <rect width="40" height="40" rx="10" fill="var(--ink)" opacity="0.07"/>
          <circle cx="20" cy="20" r="9" stroke="var(--ink-3)" strokeWidth="1.8"/>
          <path d="M11 20h18M20 11c3.2 2.4 3.2 15.6 0 18M20 11c-3.2 2.4-3.2 15.6 0 18" stroke="var(--ink-3)" strokeWidth="1.4" opacity="0.8"/>
          <ellipse cx="20" cy="20" rx="14.5" ry="6.2" stroke="var(--accent)" strokeWidth="1.5" transform="rotate(-32 20 20)"/>
          <circle cx="31.2" cy="13.2" r="2.4" fill="var(--accent)" opacity="0.7"/>
        </svg>
      </div>
      <div>
        <h3 style={{ margin:'0 0 8px', fontSize:20, fontWeight:800, color:'var(--ink)', letterSpacing:'-0.01em' }}>
          ยังไม่มีข้อมูล{title}
        </h3>
        <p style={{ margin:0, fontSize:14, color:'var(--ink-2)', lineHeight:1.65, maxWidth:400 }}>
          เชื่อมต่อ <b>n8n Webhook</b> เพื่อดึงข้อมูลจริงจาก Facebook Ads Manager มาแสดงอัตโนมัติ
        </p>
      </div>

      {/* API Endpoints */}
      <div style={{ width:'100%', maxWidth:520, textAlign:'left' }}>
        <div className="eyebrow" style={{ marginBottom:10, display:'flex', alignItems:'center', gap:6 }}>
          <IconNetwork size={12} /> N8N WEBHOOK · PAYLOAD EXPECTED
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          <div style={{ display:'flex', gap:12, padding:'10px 14px', borderRadius:'var(--radius-sm)', background:'var(--surface-2)', border:'1px solid var(--border)', alignItems:'flex-start' }}>
            <span className="chip chip-accent" style={{ fontSize:9, padding:'2px 6px', flexShrink:0, marginTop:1 }}>POST</span>
            <div style={{ minWidth:0 }}>
              <div className="mono" style={{ fontSize:11.5, color:'var(--ink)', marginBottom:2, wordBreak:'break-all' }}>{`{ "action": "${view === 'dashboard' ? 'dashboard' : 'campaigns'}" }`}</div>
              <div style={{ fontSize:11.5, color:'var(--ink-3)' }}>n8n จะต้องส่งข้อมูลกลับมาในรูปแบบ JSON Array</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ display:'flex', gap:10, flexWrap:'wrap', justifyContent:'center', marginTop: 10 }}>
        <button className="btn btn-primary" onClick={() => onNavigate('settings')}>
          <IconNetwork size={15} /> ตั้งค่า n8n Webhook
        </button>
        <button className="btn btn-ghost" onClick={onLoadSample}>
          <IconPlay size={15} /> ดูตัวอย่างข้อมูล
        </button>
      </div>
    </div>
  );
}