window.DashboardPage = ({ user, onNavigate }) => {
  const [stats, setStats] = React.useState({ domains:0, active:0, completed:0, keywords:0, members:0 });
  const [recentDomains, setRecentDomains] = React.useState([]);
  const [recentLogs, setRecentLogs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const isAdmin = user?.role === 'admin';

  React.useEffect(() => { loadData(); }, []);

  const loadData = async () => {
    try {
      const [domsRes, kwRes, logsRes, usersRes] = await Promise.all([
        API.get('domains', { limit:100 }),
        API.get('keywords', { limit:200 }),
        API.get('activity_logs', { limit:20 }),
        isAdmin ? API.get('users', { limit:100 }) : Promise.resolve({ data:[] })
      ]);
      let doms = domsRes.data || [];
      if (!isAdmin) doms = doms.filter(d => d.assigned_to === user.id);
      const kwDoms = new Set(doms.map(d=>d.id));
      setStats({
        domains: doms.length,
        active: doms.filter(d=>d.status==='active').length,
        completed: doms.filter(d=>d.status==='completed').length,
        keywords: (kwRes.data||[]).filter(k=>kwDoms.has(k.domain_id)).length,
        members: (usersRes.data||[]).filter(u=>u.role==='member'&&u.status==='active').length
      });
      setRecentDomains(doms.slice(0,4));
      setRecentLogs(([...(logsRes.data||[])]).reverse().slice(0,6));
    } catch(e) {}
    setLoading(false);
  };

  const logIconMap = {
    login:{ ico:'fa-sign-in-alt', bg:'rgba(79,70,229,.12)', c:'var(--primary)' },
    create_domain:{ ico:'fa-plus-circle', bg:'rgba(16,185,129,.12)', c:'var(--green)' },
    update_checklist:{ ico:'fa-check-circle', bg:'rgba(16,185,129,.12)', c:'var(--green)' },
    add_comment:{ ico:'fa-comment-alt', bg:'rgba(59,130,246,.12)', c:'var(--blue)' },
    create_keyword:{ ico:'fa-key', bg:'rgba(245,158,11,.12)', c:'var(--yellow)' },
    default:{ ico:'fa-circle', bg:'rgba(100,116,139,.12)', c:'var(--t3)' }
  };

  if (loading) return <Spinner/>;

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title">👋 Xin chào, {user?.full_name}!</div>
          <div className="ph-sub">{new Date().toLocaleDateString('vi-VN',{weekday:'long',day:'2-digit',month:'2-digit',year:'numeric'})}</div>
        </div>
        <div className="ph-acts">
          <button className="btn btn-primary" onClick={()=>onNavigate('domains')}><i className="fas fa-plus"/>Thêm Domain mới</button>
        </div>
      </div>

      <div className="stats-row">
        {[
          { ico:'fa-globe', cls:'blue', val:stats.domains, lbl:'Tổng Domain', page:'domains' },
          { ico:'fa-play-circle', cls:'green', val:stats.active, lbl:'Đang Active' },
          { ico:'fa-flag-checkered', cls:'orange', val:stats.completed, lbl:'Hoàn thành' },
          { ico:'fa-key', cls:'cyan', val:stats.keywords, lbl:'Keywords', page:'keywords' },
          ...(isAdmin ? [{ ico:'fa-users', cls:'purple', val:stats.members, lbl:'Members', page:'users' }] : [])
        ].map((s,i) => (
          <div key={i} className="sc" onClick={s.page?()=>onNavigate(s.page):undefined} style={s.page?{cursor:'pointer'}:{}}>
            <div className={`sc-ico ${s.cls}`}><i className={`fas ${s.ico}`}/></div>
            <div><div className="sc-val">{s.val}</div><div className="sc-lbl">{s.lbl}</div></div>
          </div>
        ))}
      </div>

      <div className="two-col">
        <div className="card">
          <div className="ch">
            <div className="ct"><i className="fas fa-globe" style={{color:'var(--primary)',marginRight:8}}/>Domain gần đây</div>
            <button className="btn btn-ghost btn-sm" onClick={()=>onNavigate('domains')}>Xem tất cả</button>
          </div>
          {recentDomains.length === 0 ? <EmptyState icon="fa-globe" title="Chưa có domain" sub="Thêm domain mới để bắt đầu"/> : (
            <div style={{display:'flex',flexDirection:'column',gap:9}}>
              {recentDomains.map(d => {
                const sb = domainStatusBadge(d.status), tb = siteTypeBadge(d.site_type);
                return (
                  <div key={d.id} onClick={()=>{Store.set('currentDomainId',d.id);onNavigate('domain-detail');}}
                    style={{display:'flex',alignItems:'center',gap:12,padding:'11px 13px',background:'var(--bg)',borderRadius:'var(--rs)',cursor:'pointer',border:'1px solid var(--border)',transition:'.15s'}}
                    onMouseEnter={e=>e.currentTarget.style.borderColor='var(--primary)'}
                    onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border)'}>
                    <div style={{width:36,height:36,borderRadius:10,background:`linear-gradient(135deg,var(--primary),var(--cyan))`,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:'.8rem',flexShrink:0}}>
                      {d.domain_name.substring(0,2).toUpperCase()}
                    </div>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontWeight:700,fontSize:'.875rem',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{d.domain_name}</div>
                      <div style={{marginTop:3}}><Badge cls={tb.cls} label={tb.label}/></div>
                    </div>
                    <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:4}}>
                      <Badge cls={sb.cls} label={sb.label}/>
                      <div style={{fontSize:'.75rem',color:'var(--t3)',fontWeight:700}}>{d.overall_progress||0}%</div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="card">
          <div className="ch">
            <div className="ct"><i className="fas fa-history" style={{color:'var(--primary)',marginRight:8}}/>Hoạt động gần đây</div>
            {isAdmin && <button className="btn btn-ghost btn-sm" onClick={()=>onNavigate('logs')}>Xem tất cả</button>}
          </div>
          {recentLogs.length === 0 ? <EmptyState icon="fa-history" title="Chưa có hoạt động"/> : (
            <div>
              {recentLogs.map(log => {
                const ico = logIconMap[log.action] || logIconMap.default;
                return (
                  <div key={log.id} className="log-row">
                    <div className="log-ico" style={{background:ico.bg,color:ico.c}}><i className={`fas ${ico.ico}`}/></div>
                    <div className="log-body">
                      <div className="log-act">{log.details||log.action}</div>
                      <div className="log-meta">
                        <span><i className="fas fa-user" style={{marginRight:3}}/>{log.user_name}</span>
                        <span><i className="fas fa-clock" style={{marginRight:3}}/>{formatDate(log.created_at)}</span>
                        {log.domain_name && <span><i className="fas fa-globe" style={{marginRight:3}}/>{log.domain_name}</span>}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="card" style={{marginTop:18}}>
        <div className="ch"><div className="ct"><i className="fas fa-stream" style={{color:'var(--primary)',marginRight:8}}/>Quy trình SEO Chuẩn — 14 Giai đoạn</div></div>
        <div style={{display:'flex',flexWrap:'wrap',gap:7,alignItems:'center'}}>
          {SOP_PHASES.map((ph,i) => (
            <React.Fragment key={ph.id}>
              <div style={{padding:'5px 11px',background:`${ph.color}18`,border:`1.5px solid ${ph.color}40`,borderRadius:7,fontSize:'.74rem',fontWeight:700,color:ph.color,cursor:'pointer',whiteSpace:'nowrap'}}
                onClick={()=>onNavigate('guide')} title={ph.desc}>
                <i className={`fas ${ph.icon}`} style={{marginRight:4}}/>{ph.id}. {ph.name}
              </div>
              {i < SOP_PHASES.length-1 && <span style={{color:'var(--t3)',fontSize:'.8rem'}}>→</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};