window.DomainsPage = ({ user, onNavigate }) => {
  const [domains, setDomains] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [filter, setFilter] = React.useState('all');
  const [showModal, setShowModal] = React.useState(false);
  const [editDomain, setEditDomain] = React.useState(null);
  const [users, setUsers] = React.useState([]);
  const isAdmin = user?.role === 'admin';

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

  const loadData = async () => {
    const [domsRes, usersRes] = await Promise.all([
      API.get('domains', { limit:200 }),
      isAdmin ? API.get('users', { limit:100 }) : Promise.resolve({ data:[] })
    ]);
    let doms = domsRes.data || [];
    if (!isAdmin) doms = doms.filter(d => d.assigned_to === user.id);
    setDomains(doms); setUsers((usersRes.data||[]).filter(u=>u.status==='active')); setLoading(false);
  };

  const filtered = domains.filter(d =>
    d.domain_name?.toLowerCase().includes(search.toLowerCase()) &&
    (filter === 'all' || d.status === filter)
  );

  const handleSave = async (data) => {
    try {
      if (editDomain) {
        await API.put('domains', editDomain.id, { ...data, id:editDomain.id });
        await logAction('update_domain', `Cập nhật domain ${data.domain_name}`, editDomain.id, data.domain_name);
        toast('Cập nhật domain thành công!', 'success');
      } else {
        const id = uuid();
        await API.post('domains', { ...data, id, overall_progress:0, current_phase:0 });
        await logAction('create_domain', `Tạo domain mới: ${data.domain_name}`, id, data.domain_name);
        toast('Tạo domain thành công!', 'success');
      }
      setShowModal(false); setEditDomain(null); loadData();
    } catch(e) { toast('Có lỗi xảy ra!', 'error'); }
  };

  const handleDelete = async (d) => {
    await API.del('domains', d.id);
    await logAction('delete_domain', `Xóa domain: ${d.domain_name}`, d.id, d.domain_name);
    toast('Đã xóa domain!', 'success'); loadData();
  };

  if (loading) return <Spinner/>;
  return (
    <div className="fade-in">
      <div className="ph">
        <div><div className="ph-title"><i className="fas fa-globe" style={{marginRight:8,color:'var(--primary)'}}/>Quản lý Domain</div>
          <div className="ph-sub">{domains.length} domain đang quản lý</div></div>
        <div className="ph-acts">
          <SearchBar value={search} onChange={setSearch} placeholder="Tìm domain..."/>
          <select className="fc" style={{width:'auto'}} value={filter} onChange={e=>setFilter(e.target.value)}>
            <option value="all">Tất cả</option>
            {['planning','active','paused','completed'].map(s=><option key={s} value={s}>{domainStatusBadge(s).label}</option>)}
          </select>
          <button className="btn btn-primary" onClick={()=>{setEditDomain(null);setShowModal(true);}}><i className="fas fa-plus"/>Thêm Domain</button>
        </div>
      </div>
      {filtered.length === 0
        ? <EmptyState icon="fa-globe" title="Chưa có domain nào" sub={search?'Không tìm thấy kết quả':'Nhấn Thêm Domain để bắt đầu'}/>
        : <div className="dom-grid">{filtered.map(d=><DomainCard key={d.id} domain={d} onNavigate={onNavigate} onEdit={()=>{setEditDomain(d);setShowModal(true);}} onDelete={()=>handleDelete(d)} isAdmin={isAdmin}/>)}</div>
      }
      {showModal && <DomainFormModal domain={editDomain} users={users} isAdmin={isAdmin} currentUser={user} onSave={handleSave} onClose={()=>{setShowModal(false);setEditDomain(null);}}/>}
    </div>
  );
};

const DomainCard = ({ domain:d, onNavigate, onEdit, onDelete, isAdmin }) => {
  const [confirm, setConfirm] = React.useState(false);
  const sb = domainStatusBadge(d.status), tb = siteTypeBadge(d.site_type);
  const pct = d.overall_progress||0;
  const ph = SOP_PHASES.find(p=>p.id===(d.current_phase||0));
  return (
    <div className="dom-card">
      <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',marginBottom:12}}>
        <div style={{flex:1,minWidth:0}}>
          <div className="dom-name" style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{d.domain_name}</div>
          <div className="dom-type">{d.market||'—'} · {d.language||'—'}</div>
        </div>
        <div style={{display:'flex',gap:4,marginLeft:8}}>
          <button className="icon-btn" style={{padding:'5px 7px'}} onClick={e=>{e.stopPropagation();onEdit();}}><i className="fas fa-edit"/></button>
          {isAdmin && <button className="icon-btn danger" style={{padding:'5px 7px'}} onClick={e=>{e.stopPropagation();setConfirm(true);}}><i className="fas fa-trash"/></button>}
        </div>
      </div>
      <div style={{display:'flex',flexWrap:'wrap',gap:6,marginBottom:12}}>
        <Badge cls={sb.cls} label={sb.label}/><Badge cls={tb.cls} label={tb.label}/>
      </div>
      <div style={{marginBottom:12}}>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:'.76rem',color:'var(--t3)',marginBottom:5}}>
          <span>Tiến độ tổng thể</span>
          <span style={{fontWeight:700,color:pct>=80?'var(--green)':pct>=40?'var(--yellow)':'var(--red)'}}>{pct}%</span>
        </div>
        <ProgressBar pct={pct}/>
      </div>
      {ph && <div style={{fontSize:'.76rem',color:'var(--t3)',marginBottom:12,display:'flex',alignItems:'center',gap:5}}><i className={`fas ${ph.icon}`} style={{color:ph.color}}/>Giai đoạn {ph.id}: {ph.name}</div>}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',paddingTop:12,borderTop:'1px solid var(--border)'}}>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:'.78rem',color:'var(--t3)'}}>
          <AvatarChip name={d.assigned_name||'?'} size={22}/><span>{d.assigned_name||'Chưa assign'}</span>
        </div>
        <button className="btn btn-outline btn-sm" onClick={()=>{Store.set('currentDomainId',d.id);onNavigate('domain-detail');}}>
          <i className="fas fa-tasks"/>Checklist
        </button>
      </div>
      {confirm && <ConfirmModal title="Xóa domain" message={`Xóa domain "${d.domain_name}"? Hành động này không thể hoàn tác.`} danger onConfirm={onDelete} onClose={()=>setConfirm(false)}/>}
    </div>
  );
};

const DomainFormModal = ({ domain, users, isAdmin, currentUser, onSave, onClose }) => {
  const [form, setForm] = React.useState({
    domain_name: domain?.domain_name||'', site_type: domain?.site_type||'money_site',
    market: domain?.market||'Việt Nam', language: domain?.language||'Tiếng Việt',
    hosting: domain?.hosting||'', wordpress_theme: domain?.wordpress_theme||'',
    target_keywords: domain?.target_keywords||'', status: domain?.status||'planning',
    assigned_to: domain?.assigned_to||currentUser.id, assigned_name: domain?.assigned_name||currentUser.full_name, notes: domain?.notes||''
  });
  const set = (k,v) => setForm(f=>({...f,[k]:v}));
  const handleAssign = (uid) => { const u=users.find(x=>x.id===uid); set('assigned_to',uid); set('assigned_name',u?.full_name||''); };
  return (
    <Modal title={domain?'Chỉnh sửa Domain':'Thêm Domain mới'} onClose={onClose} size="lg">
      <div className="mo-body">
        <div className="fr2">
          <div className="fg"><label className="fl">Tên Domain *</label><input className="fc" value={form.domain_name} onChange={e=>set('domain_name',e.target.value)} placeholder="VD: go88.vn" required/></div>
          <div className="fg"><label className="fl">Loại Site</label>
            <select className="fc" value={form.site_type} onChange={e=>set('site_type',e.target.value)}>
              {['money_site','brand_site','microsite','satellite','blog','pbn','entity_site'].map(t=><option key={t} value={t}>{siteTypeBadge(t).label}</option>)}
            </select>
          </div>
        </div>
        <div className="fr2">
          <div className="fg"><label className="fl">Thị trường</label><input className="fc" value={form.market} onChange={e=>set('market',e.target.value)} placeholder="VD: Việt Nam"/></div>
          <div className="fg"><label className="fl">Ngôn ngữ</label><input className="fc" value={form.language} onChange={e=>set('language',e.target.value)} placeholder="VD: Tiếng Việt"/></div>
        </div>
        <div className="fr2">
          <div className="fg"><label className="fl">Hosting / Server</label><input className="fc" value={form.hosting} onChange={e=>set('hosting',e.target.value)} placeholder="Tên hosting..."/></div>
          <div className="fg"><label className="fl">WordPress Theme</label><input className="fc" value={form.wordpress_theme} onChange={e=>set('wordpress_theme',e.target.value)} placeholder="Tên theme..."/></div>
        </div>
        <div className="fr2">
          <div className="fg"><label className="fl">Trạng thái</label>
            <select className="fc" value={form.status} onChange={e=>set('status',e.target.value)}>
              {['planning','active','paused','completed'].map(s=><option key={s} value={s}>{domainStatusBadge(s).label}</option>)}
            </select>
          </div>
          {isAdmin && <div className="fg"><label className="fl">Assign cho</label>
            <select className="fc" value={form.assigned_to} onChange={e=>handleAssign(e.target.value)}>
              {users.map(u=><option key={u.id} value={u.id}>{u.full_name} ({u.role})</option>)}
            </select>
          </div>}
        </div>
        <div className="fg"><label className="fl">Keyword mục tiêu</label><input className="fc" value={form.target_keywords} onChange={e=>set('target_keywords',e.target.value)} placeholder="VD: go88, casino online..."/></div>
        <div className="fg"><label className="fl">Ghi chú</label><textarea className="fc" value={form.notes} onChange={e=>set('notes',e.target.value)} placeholder="Ghi chú về domain..."/></div>
      </div>
      <div className="mo-foot">
        <button className="btn btn-ghost" onClick={onClose}>Hủy</button>
        <button className="btn btn-primary" onClick={()=>form.domain_name.trim()&&onSave(form)} disabled={!form.domain_name.trim()}>
          <i className="fas fa-save"/>{domain?'Cập nhật':'Tạo Domain'}
        </button>
      </div>
    </Modal>
  );
};