// ============================================================
//  ACTIVITY LOGS PAGE (Admin only)
// ============================================================
window.LogsPage = function() {
  const [logs, setLogs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [filterAction, setFilterAction] = React.useState('');
  const [filterUser, setFilterUser] = React.useState('');
  const [users, setUsers] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const PER_PAGE = 30;

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

  const load = async () => {
    setLoading(true);
    try {
      const [logRes, uRes] = await Promise.all([
        API.get('activity_logs', { limit:500 }),
        API.get('users', { limit:100 })
      ]);
      const allLogs = [...(logRes.data||[])].reverse();
      setLogs(allLogs);
      setUsers(uRes.data||[]);
    } catch(e) { toast('Lỗi tải logs', 'error'); }
    setLoading(false);
  };

  const actionLabels = {
    login: '🔑 Đăng nhập',
    logout: '🚪 Đăng xuất',
    create_domain: '🌐 Tạo domain',
    update_domain: '✏️ Cập nhật domain',
    delete_domain: '🗑️ Xoá domain',
    update_checklist: '✅ Cập nhật checklist',
    add_comment: '💬 Thêm comment',
    create_keyword: '🔑 Thêm keyword',
    create_user: '👤 Tạo user',
    update_user: '✏️ Cập nhật user',
    deactivate_user: '🚫 Khoá user',
  };

  const actionIconMap = {
    login: { ico:'fa-sign-in-alt', bg:'rgba(79,70,229,.1)', c:'var(--primary)' },
    logout: { ico:'fa-sign-out-alt', bg:'rgba(100,116,139,.1)', c:'var(--t3)' },
    create_domain: { ico:'fa-globe', bg:'rgba(16,185,129,.1)', c:'var(--green)' },
    update_domain: { ico:'fa-edit', bg:'rgba(59,130,246,.1)', c:'var(--blue)' },
    delete_domain: { ico:'fa-trash', bg:'rgba(239,68,68,.1)', c:'var(--red)' },
    update_checklist: { ico:'fa-check-circle', bg:'rgba(16,185,129,.1)', c:'var(--green)' },
    add_comment: { ico:'fa-comment-alt', bg:'rgba(59,130,246,.1)', c:'var(--blue)' },
    create_keyword: { ico:'fa-key', bg:'rgba(245,158,11,.1)', c:'var(--yellow)' },
    create_user: { ico:'fa-user-plus', bg:'rgba(79,70,229,.1)', c:'var(--primary)' },
    update_user: { ico:'fa-user-edit', bg:'rgba(59,130,246,.1)', c:'var(--blue)' },
    deactivate_user: { ico:'fa-ban', bg:'rgba(239,68,68,.1)', c:'var(--red)' },
    default: { ico:'fa-circle', bg:'rgba(100,116,139,.1)', c:'var(--t3)' },
  };

  const uniqueActions = [...new Set(logs.map(l => l.action))];
  const uniqueUsers = [...new Set(logs.map(l => l.user_id))].map(id => users.find(u=>u.id===id)).filter(Boolean);

  const filtered = logs.filter(l => {
    const oks = !search || l.details?.toLowerCase().includes(search.toLowerCase()) || l.domain_name?.toLowerCase().includes(search.toLowerCase()) || l.user_name?.toLowerCase().includes(search.toLowerCase());
    const oka = !filterAction || l.action === filterAction;
    const oku = !filterUser || l.user_id === filterUser;
    return oks && oka && oku;
  });

  const paged = filtered.slice((page-1)*PER_PAGE, page*PER_PAGE);
  const totalPages = Math.ceil(filtered.length / PER_PAGE);

  if (loading) return <Spinner/>;

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title"><i className="fas fa-history" style={{ marginRight:8,color:'var(--primary)' }}/>Activity Logs</div>
          <div className="ph-sub">{filtered.length} hoạt động được ghi lại</div>
        </div>
        <div className="ph-acts">
          <SearchBar value={search} onChange={v=>{setSearch(v);setPage(1);}} placeholder="Tìm trong logs..."/>
          <select className="fc" value={filterAction} onChange={e=>{setFilterAction(e.target.value);setPage(1);}} style={{width:170}}>
            <option value="">Tất cả hành động</option>
            {uniqueActions.map(a=><option key={a} value={a}>{actionLabels[a]||a}</option>)}
          </select>
          <select className="fc" value={filterUser} onChange={e=>{setFilterUser(e.target.value);setPage(1);}} style={{width:160}}>
            <option value="">Tất cả thành viên</option>
            {uniqueUsers.map(u=><option key={u.id} value={u.id}>{u.full_name}</option>)}
          </select>
          <button className="btn btn-ghost btn-sm" onClick={load} title="Làm mới"><i className="fas fa-sync-alt"/></button>
        </div>
      </div>

      {/* STATS */}
      <div className="stats-row" style={{marginBottom:16}}>
        {[
          {ico:'fa-list',cls:'blue',val:logs.length,lbl:'Tổng hoạt động'},
          {ico:'fa-check-circle',cls:'green',val:logs.filter(l=>l.action==='update_checklist').length,lbl:'Checklist updates'},
          {ico:'fa-comment-alt',cls:'cyan',val:logs.filter(l=>l.action==='add_comment').length,lbl:'Comments'},
          {ico:'fa-globe',cls:'orange',val:logs.filter(l=>l.action==='create_domain').length,lbl:'Domains tạo mới'},
        ].map((s,i)=>(
          <div key={i} className="sc">
            <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="card">
        {paged.length === 0 ? <EmptyState icon="fa-history" title="Chưa có hoạt động nào" sub="Các hoạt động của team sẽ xuất hiện ở đây"/> : (
          <>
            <div className="log-feed">
              {paged.map(log => {
                const ico = actionIconMap[log.action] || actionIconMap.default;
                const phase = log.phase >= 0 ? SOP_PHASES.find(p => p.id === Number(log.phase)) : null;
                return (
                  <div key={log.id} className="log-entry">
                    <div className="log-ico" style={{background:ico.bg,color:ico.c,width:36,height:36,flexShrink:0}}>
                      <i className={`fas ${ico.ico}`}/>
                    </div>
                    <div className="log-body" style={{flex:1,minWidth:0}}>
                      <div className="log-act">{log.details || actionLabels[log.action] || log.action}</div>
                      <div className="log-meta">
                        <span><i className="fas fa-user" style={{marginRight:3}}/>{log.user_name}</span>
                        <Badge cls={log.user_role==='admin'?'b-danger':'b-primary'} label={log.user_role==='admin'?'Admin':'Member'}/>
                        {log.domain_name && <span><i className="fas fa-globe" style={{marginRight:3}}/>{log.domain_name}</span>}
                        {phase && <span style={{color:phase.color}}><i className={`fas ${phase.icon}`} style={{marginRight:3}}/>P{phase.id}: {phase.name}</span>}
                        <span style={{marginLeft:'auto'}}><i className="fas fa-clock" style={{marginRight:3}}/>{formatDate(log.created_at)}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            {totalPages > 1 && (
              <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:8,marginTop:16,paddingTop:16,borderTop:'1px solid var(--border)'}}>
                <button className="btn btn-ghost btn-sm" disabled={page===1} onClick={()=>setPage(p=>p-1)}><i className="fas fa-chevron-left"/></button>
                <span style={{fontSize:'.85rem',color:'var(--t2)'}}>Trang {page} / {totalPages}</span>
                <button className="btn btn-ghost btn-sm" disabled={page===totalPages} onClick={()=>setPage(p=>p+1)}><i className="fas fa-chevron-right"/></button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
};