// ============================================================
//  PROGRESS PAGE — Admin: tiến độ từng member
// ============================================================
window.ProgressPage = function({ onNavigate }) {
  const [domains, setDomains] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [checkItems, setCheckItems] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filterUser, setFilterUser] = React.useState('');

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

  const load = async () => {
    setLoading(true);
    try {
      const [dRes, uRes, ciRes] = await Promise.all([
        API.get('domains', { limit:200 }),
        API.get('users', { limit:100 }),
        API.get('checklist_items', { limit:2000 })
      ]);
      setDomains(dRes.data || []);
      setUsers((uRes.data || []).filter(u => u.status === 'active'));
      setCheckItems(ciRes.data || []);
    } catch(e) { toast('Lỗi tải dữ liệu', 'error'); }
    setLoading(false);
  };

  const getDomainProgress = (domainId) => {
    let total = 0, done = 0;
    SOP_PHASES.forEach(p => {
      const keys = getPhaseItemKeys(p.id);
      total += keys.length;
      done += keys.filter(k => checkItems.find(c => c.item_key === k && c.domain_id === domainId && c.status === 'done')).length;
    });
    return total ? Math.round((done / total) * 100) : 0;
  };

  const getPhaseProgressForDomain = (phaseId, domainId) => {
    const keys = getPhaseItemKeys(phaseId);
    if (!keys.length) return 0;
    const done = keys.filter(k => checkItems.find(c => c.item_key === k && c.domain_id === domainId && c.status === 'done')).length;
    return Math.round((done / keys.length) * 100);
  };

  const filtered = filterUser ? domains.filter(d => d.assigned_to === filterUser) : domains;
  const members = users.filter(u => u.role === 'member');

  if (loading) return <Spinner/>;

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title"><i className="fas fa-tasks" style={{ marginRight:8, color:'var(--primary)' }}/>Tiến độ Team</div>
          <div className="ph-sub">Theo dõi tiến độ triển khai của từng thành viên</div>
        </div>
        <select className="fc" value={filterUser} onChange={e => setFilterUser(e.target.value)} style={{ width:200 }}>
          <option value="">Tất cả thành viên</option>
          {members.map(u => <option key={u.id} value={u.id}>{u.full_name}</option>)}
        </select>
      </div>

      {/* MEMBER SUMMARY CARDS */}
      {members.length > 0 && (
        <div className="stats-row" style={{ marginBottom:20 }}>
          {members.map(u => {
            const myDoms = domains.filter(d => d.assigned_to === u.id);
            const active = myDoms.filter(d => d.status === 'active').length;
            const avgPct = myDoms.length ? Math.round(myDoms.reduce((sum, d) => sum + (Number(d.overall_progress) || 0), 0) / myDoms.length) : 0;
            return (
              <div key={u.id} className="sc" onClick={() => setFilterUser(prev => prev === u.id ? '' : u.id)}
                style={{ cursor:'pointer', flexDirection:'column', alignItems:'flex-start', gap:10, border: filterUser===u.id ? '2px solid var(--primary)' : '1px solid var(--border)', transition:'.15s' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, width:'100%' }}>
                  <AvatarChip name={u.full_name} size={36}/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontWeight:700, fontSize:'.875rem', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.full_name}</div>
                    <div style={{ fontSize:'.74rem', color:'var(--t3)' }}>{myDoms.length} domain · {active} đang làm</div>
                  </div>
                  <span style={{ fontWeight:800, fontSize:'1rem', color: avgPct>=80?'var(--green)':avgPct>=40?'var(--yellow)':'var(--red)', flexShrink:0 }}>{avgPct}%</span>
                </div>
                <div style={{ width:'100%' }}><ProgressBar pct={avgPct}/></div>
              </div>
            );
          })}
        </div>
      )}

      {/* DOMAIN PROGRESS TABLE */}
      <div className="card">
        <div className="ch">
          <div className="ct"><i className="fas fa-globe" style={{ marginRight:7,color:'var(--primary)' }}/>
            {filterUser ? `Domain của ${users.find(u=>u.id===filterUser)?.full_name||'member'}` : 'Chi tiết tiến độ tất cả domain'}
          </div>
          <span className="badge b-secondary">{filtered.length} domain</span>
        </div>
        {filtered.length === 0 ? <EmptyState icon="fa-globe" title="Chưa có domain nào"/> : (
          <div className="tbl-wrap">
            <table>
              <thead>
                <tr>
                  <th>Domain</th>
                  <th>Member</th>
                  <th>Loại site</th>
                  <th>Tiến độ</th>
                  {SOP_PHASES.slice(0,8).map(p => (
                    <th key={p.id} title={`P${p.id}: ${p.name}`} style={{textAlign:'center',minWidth:32}}>
                      <i className={`fas ${p.icon}`} style={{ color:p.color, fontSize:'.9rem' }}/>
                    </th>
                  ))}
                  <th>Trạng thái</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(d => {
                  const pct = getDomainProgress(d.id);
                  const sb = domainStatusBadge(d.status);
                  const tb = siteTypeBadge(d.site_type);
                  const u = users.find(u => u.id === d.assigned_to);
                  return (
                    <tr key={d.id}>
                      <td style={{ fontWeight:600 }}>{d.domain_name}</td>
                      <td>
                        <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:'.84rem' }}>
                          <AvatarChip name={u?.full_name||'?'} size={24}/>
                          <span>{d.assigned_name || '—'}</span>
                        </div>
                      </td>
                      <td><Badge cls={tb.cls} label={tb.label}/></td>
                      <td style={{ minWidth:130 }}>
                        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                          <div style={{ flex:1 }}><ProgressBar pct={pct}/></div>
                          <span style={{ fontSize:'.8rem', fontWeight:700, color:pct>=80?'var(--green)':pct>=40?'var(--yellow)':'var(--red)', minWidth:34, textAlign:'right' }}>{pct}%</span>
                        </div>
                      </td>
                      {SOP_PHASES.slice(0,8).map(p => {
                        const ppct = getPhaseProgressForDomain(p.id, d.id);
                        return (
                          <td key={p.id} style={{textAlign:'center'}}>
                            {ppct === 100
                              ? <span style={{ color:'var(--green)', fontSize:'.95rem' }}><i className="fas fa-check-circle"/></span>
                              : ppct > 0
                              ? <span style={{ color:'var(--yellow)', fontSize:'.73rem', fontWeight:700 }}>{ppct}%</span>
                              : <span style={{ color:'var(--border)', fontSize:'.85rem' }}><i className="fas fa-circle"/></span>}
                          </td>
                        );
                      })}
                      <td><Badge cls={sb.cls} label={sb.label}/></td>
                      <td>
                        <button className="icon-btn" onClick={() => { Store.set('currentDomainId', d.id); onNavigate('domain-detail'); }} title="Xem chi tiết">
                          <i className="fas fa-eye"/>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Phase legend */}
      <div className="card" style={{marginTop:16}}>
        <div className="ch"><div className="ct"><i className="fas fa-info-circle" style={{marginRight:7,color:'var(--primary)'}}/>Chú thích các giai đoạn SOP</div></div>
        <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
          {SOP_PHASES.map(p=>(
            <div key={p.id} style={{display:'flex',alignItems:'center',gap:6,padding:'5px 10px',background:`${p.color}12`,border:`1px solid ${p.color}30`,borderRadius:7,fontSize:'.77rem',fontWeight:600,color:p.color}}>
              <i className={`fas ${p.icon}`}/> P{p.id}: {p.name}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};