function DashboardView({ onNavigate }) {
  const SAMPLE_STATS = [
    { label:'ค่าโฆษณา', en:'Spend', value:'฿10,950', trend:'+12%', up:true, Icon:IconCoins },
    { label:'รายได้', en:'Revenue', value:'฿31,200', trend:'+24%', up:true, Icon:IconActivity },
    { label:'ROAS เฉลี่ย', en:'Avg. ROAS', value:'2.85x', trend:'+0.4', up:true, Icon:IconTarget },
    { label:'Conversions', en:'Conversions', value:'142', trend:'+18%', up:true, Icon:IconBolt },
  ];
  const SAMPLE_PERF = [
    { name:'จ.', roas:2.1, spend:1200, revenue:2520 },
    { name:'อ.', roas:2.4, spend:1350, revenue:3240 },
    { name:'พ.', roas:2.2, spend:1100, revenue:2420 },
    { name:'พฤ.', roas:2.8, spend:1500, revenue:4200 },
    { name:'ศ.', roas:3.1, spend:1800, revenue:5580 },
    { name:'ส.', roas:3.5, spend:2100, revenue:7350 },
    { name:'อา.', roas:3.2, spend:1900, revenue:6080 },
  ];
  const SAMPLE_PLACEMENT = [
    { name:'Mobile Feed', value:65, color:'var(--accent)' },
    { name:'Desktop Feed', value:15, color:'var(--ink-3)' },
    { name:'Instagram', value:12, color:'var(--accent-strong)' },
    { name:'Messenger', value:8, color:'var(--ink-4)' },
  ];

  const [stats, setStats]             = useState(null);
  const [perfData, setPerfData]       = useState([]);
  const [placement, setPlacement]     = useState([]);
  const [insights, setInsights]       = useState([]);
  const [isSample, setIsSample]       = useState(false);
  const [isLive, setIsLive]           = useState(false);
  const [loading, setLoading]         = useState(false);
  const [error, setError]             = useState(null);

  // Auto-fetch from Meta API on mount if settings exist
  React.useEffect(() => {
    if (hasMetaKey()) {
      fetchLiveData();
    }
  }, []);

  const fetchLiveData = async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await fetchMetaDashboard();
      if (result.perfData.length > 0) {
        setPerfData(result.perfData);
        setPlacement(result.placementData);
        const totalConversions = Math.round(result.totalRevenue / 220); // estimated
        setStats([
          { label:'ค่าโฆษณา', en:'Spend', value:`฿${Math.round(result.totalSpend).toLocaleString()}`, trend:'LIVE', up:true, Icon:IconCoins },
          { label:'รายได้', en:'Revenue', value:`฿${Math.round(result.totalRevenue).toLocaleString()}`, trend:'LIVE', up:true, Icon:IconActivity },
          { label:'ROAS เฉลี่ย', en:'Avg. ROAS', value:`${result.avgRoas.toFixed(2)}x`, trend:'LIVE', up:result.avgRoas >= 2, Icon:IconTarget },
          { label:'Conversions', en:'Conversions', value:`${totalConversions}`, trend:'LIVE', up:true, Icon:IconBolt },
        ]);
        setInsights(result.insights || []);
        setIsLive(true);
        setIsSample(false);
      } else {
        // API connected but no data in last 7 days
        setError('เชื่อมต่อ Meta API สำเร็จ แต่ยังไม่มีข้อมูลในรอบ 7 วัน');
      }
    } catch (e) {
      setError(e.message);
    }
    setLoading(false);
  };

  const hasData = perfData.length > 0;
  const metaConfigured = hasMetaKey();

  const loadSample = () => {
    setStats(SAMPLE_STATS); setPerfData(SAMPLE_PERF);
    setPlacement(SAMPLE_PLACEMENT); setInsights([]); setIsSample(true); setIsLive(false);
  };
  const clearSample = () => {
    setStats(null); setPerfData([]); setPlacement([]); setInsights([]); setIsSample(false); setIsLive(false);
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:'var(--section-gap)' }} className="fade-up">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:16, flexWrap:'wrap' }}>
        <ViewHeader title="ภาพรวมแคมเปญ" en="Campaign Overview"
          sub="ข้อมูลผลประกอบการโฆษณา Meta Ads ของคุณในรอบ 7 วันที่ผ่านมา" />
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {metaConfigured && !loading && (
            <button className="btn btn-ghost" onClick={fetchLiveData} style={{ fontSize:12 }}>
              <IconRefresh size={13} style={{ color:'var(--accent)' }} /> รีเฟรชข้อมูล Meta
            </button>
          )}
          {isSample && (
            <button className="btn btn-ghost" onClick={clearSample} style={{ fontSize:12 }}>
              <IconWarn size={13} style={{ color:'var(--accent)' }} /> ซ่อน Sample Data
            </button>
          )}
        </div>
      </div>

      {/* Loading state */}
      {loading && (
        <div className="card fade-up" style={{ padding:'40px 32px', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:16 }}>
          <IconRefresh size={32} className="spin" style={{ color:'var(--accent)' }} />
          <div>
            <h3 style={{ margin:'0 0 6px', fontSize:17, fontWeight:700, color:'var(--ink)' }}>กำลังดึงข้อมูลจาก Meta Ads API…</h3>
            <p style={{ margin:0, fontSize:13, color:'var(--ink-2)' }}>กรุณารอสักครู่</p>
          </div>
        </div>
      )}

      {/* Error state with Meta configured */}
      {!loading && error && metaConfigured && (
        <div style={{ display:'flex', gap:12, padding:'14px 18px', borderRadius:'var(--radius-sm)', background:'var(--neg-soft)', border:'1px solid var(--neg)' }} className="fade-up">
          <IconWarn size={18} style={{ color:'var(--neg)', flexShrink:0, marginTop:2 }} />
          <div style={{ flex:1 }}>
            <div style={{ fontSize:13.5, fontWeight:700, color:'var(--neg)', marginBottom:3 }}>ไม่สามารถดึงข้อมูลผ่าน n8n Webhook ได้</div>
            <div style={{ fontSize:12.5, color:'var(--neg)', lineHeight:1.55 }}>{error}</div>
          </div>
          <button className="btn btn-ghost" onClick={loadSample} style={{ fontSize:12, flexShrink:0 }}>
            <IconPlay size={13} /> ดูตัวอย่าง
          </button>
        </div>
      )}

      {!loading && !hasData ? (
        <MetaApiEmptyState onNavigate={onNavigate} onLoadSample={loadSample} view="dashboard" />
      ) : !loading && (
        <>
          {/* live banner */}
          {isLive && (
            <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 16px', borderRadius:'var(--radius-sm)', background:'var(--pos-soft)', border:'1px solid var(--pos)', fontSize:13, color:'var(--pos)', fontWeight:600 }}>
              <span style={{ width:8, height:8, borderRadius:99, background:'var(--pos)', boxShadow:'0 0 0 3px rgba(22,160,106,0.2)' }} />
              ข้อมูลจริงจาก n8n Webhook · อัปเดตล่าสุด
            </div>
          )}
          {/* sample banner */}
          {isSample && (
            <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 16px', borderRadius:'var(--radius-sm)', background:'var(--accent-soft)', border:'1px solid var(--accent)', fontSize:13, color:'var(--accent-strong)', fontWeight:600 }}>
              <IconSpark size={15} />
              แสดงข้อมูลตัวอย่างเพื่อ Preview — <span style={{ textDecoration:'underline', cursor:'pointer' }} onClick={() => onNavigate('settings')}>เชื่อมต่อ n8n Webhook เพื่อดูข้อมูลจริง</span>
            </div>
          )}

          {/* stat cards */}
          <div className="grid-bleed" style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(210px, 1fr))', gap:'var(--gap)' }}>
            {(stats || SAMPLE_STATS).map((s) => <StatCard key={s.en} {...s} />)}
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'minmax(0, 2fr) minmax(0, 1fr)', gap:'var(--gap)' }} className="dash-row">
            <div className="card" style={{ display:'flex', flexDirection:'column' }}>
              <div className="card-head">
                <h3 className="card-title">การใช้จ่าย vs รายได้ <span className="eyebrow" style={{ marginLeft:4 }}>SPEND & REVENUE</span></h3>
                <div style={{ display:'flex', gap:16 }}>
                  <Legend color="var(--accent)" label="รายได้" />
                  <Legend color="var(--ink-4)" label="ค่าโฆษณา" dashed />
                </div>
              </div>
              <div style={{ padding:'var(--pad-card)' }}>
                <AreaChartDual data={perfData} height={300} />
              </div>
            </div>
            <div className="card" style={{ display:'flex', flexDirection:'column' }}>
              <div className="card-head">
                <h3 className="card-title"><IconSpark size={16} style={{ color:'var(--accent)' }} /> AI Insights</h3>
                <span className="chip chip-accent">Live</span>
              </div>
              <div style={{ padding:'var(--pad-card)', display:'flex', flexDirection:'column', gap:14, flex:1 }}>
                {isSample || insights.length === 0 ? (
                  <>
                    <InsightItem title="กลุ่มเป้าหมายเริ่มล้า" desc="Ad Set 'Lookalike 1%' มีค่าความถี่ (Frequency) สูงเกิน 3.5 ใน 7 วัน" action="ดูคำแนะนำ" onClick={() => onNavigate('optimization')} tone="neg" />
                    <InsightItem title="โอกาสเพิ่มงบประมาณ" desc="แคมเปญ 'Promo_MidMonth' มี ROAS คงที่เกิน 3.0 ติดต่อกัน" action="แนะนำเพิ่มงบ 15%" onClick={() => onNavigate('optimization')} tone="pos" />
                  </>
                ) : (
                  insights.map((ins, idx) => (
                    <InsightItem key={idx} title={ins.title} desc={ins.desc} action={ins.action || "ดูคำแนะนำ"} onClick={() => onNavigate('optimization')} tone={ins.tone || "pos"} />
                  ))
                )}
              </div>
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'minmax(0, 1fr) minmax(0, 1.4fr)', gap:'var(--gap)' }} className="dash-row">
            <div className="card">
              <div className="card-head"><h3 className="card-title"><IconTarget size={16} style={{ color:'var(--accent)' }} /> วิเคราะห์ ROAS</h3></div>
              <div style={{ padding:'var(--pad-card)' }}><RoasChart data={perfData} height={230} /></div>
            </div>
            <div className="card">
              <div className="card-head">
                <h3 className="card-title"><IconDevice size={16} style={{ color:'var(--accent)' }} /> การแสดงผลตามตำแหน่ง <span className="eyebrow" style={{ marginLeft:4 }}>PLACEMENTS</span></h3>
              </div>
              <div style={{ padding:'calc(var(--pad-card) + 8px) var(--pad-card)' }}>
                {placement.length > 0 ? <PlacementBars data={placement} /> : <div style={{ color:'var(--ink-4)', fontSize:13, textAlign:'center', padding:'20px 0' }}>ไม่มีข้อมูล Placement</div>}
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}