// ============================================================
//  KEYWORDS TRACKING PAGE
// ============================================================
window.KeywordsPage = function({ user }) {
  const [keywords, setKeywords] = React.useState([]);
  const [domains, setDomains] = React.useState([]);
  const [search, setSearch] = React.useState('');
  const [filterDomain, setFilterDomain] = React.useState('');
  const [filterIntent, setFilterIntent] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [showAdd, setShowAdd] = React.useState(false);
  const [editKw, setEditKw] = React.useState(null);
  const isAdmin = Store.isAdmin();

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

  const load = async () => {
    setLoading(true);
    try {
      const [kRes, dRes] = await Promise.all([API.get('keywords', { limit:500 }), API.get('domains', { limit:200 })]);
      let allK = kRes.data || [];
      let allD = dRes.data || [];
      if (!isAdmin) {
        const myDomIds = allD.filter(d => d.assigned_to === user.id).map(d => d.id);
        allK = allK.filter(k => myDomIds.includes(k.domain_id));
        allD = allD.filter(d => d.assigned_to === user.id);
      }
      setKeywords(allK);
      setDomains(allD);
    } catch(e) { toast('Lỗi tải keywords', 'error'); }
    setLoading(false);
  };

  const filtered = keywords.filter(k => {
    const ok = !search || k.keyword?.toLowerCase().includes(search.toLowerCase());
    const od = !filterDomain || k.domain_id === filterDomain;
    const oi = !filterIntent || k.intent === filterIntent;
    return ok && od && oi;
  });

  const intents = ['brand','commercial','informational','navigational','semantic'];
  const intentLabel = { brand:'Brand', commercial:'Commercial', informational:'Informational', navigational:'Navigational', semantic:'Semantic' };
  const intentCls   = { brand:'b-danger', commercial:'b-success', informational:'b-info', navigational:'b-warning', semantic:'b-cyan' };

  const RankChip = ({ rank }) => {
    const r = Number(rank) || 0;
    if (!r) return <span style={{color:'var(--t3)',fontSize:'.8rem'}}>—</span>;
    const [bg, col] = r<=3 ? ['rgba(16,185,129,.15)','var(--green)'] : r<=10 ? ['rgba(59,130,246,.12)','var(--blue)'] : r<=20 ? ['rgba(245,158,11,.12)','var(--yellow)'] : ['rgba(100,116,139,.1)','var(--t3)'];
    return <span style={{ fontWeight:700, fontSize:'.8rem', padding:'2px 8px', borderRadius:6, background:bg, color:col }}>
      {r<=3?'🏆 ':''}{r}
    </span>;
  };

  const KwModal = ({ kw, onClose }) => {
    const editing = !!kw;
    const [form, setForm] = React.useState(kw ? { ...kw } : {
      domain_id: filterDomain || (domains[0]?.id || ''),
      keyword: '', intent: 'brand', priority: 'core',
      target_url: '', page_type: 'money_page',
      current_rank: '', best_rank: '', gsc_impression: '', gsc_click: '',
      anchor_main: '', status: 'active', notes: ''
    });
    const [saving, setSaving] = React.useState(false);
    const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

    const save = async () => {
      if (!form.keyword?.trim() || !form.domain_id) { toast('Vui lòng nhập keyword và chọn domain', 'warning'); return; }
      setSaving(true);
      try {
        const data = {
          ...form,
          current_rank: Number(form.current_rank) || 0,
          best_rank: Number(form.best_rank) || 0,
          gsc_impression: Number(form.gsc_impression) || 0,
          gsc_click: Number(form.gsc_click) || 0,
        };
        if (editing) {
          const upd = await API.patch('keywords', kw.id, data);
          setKeywords(prev => prev.map(k => k.id === upd.id ? upd : k));
          toast('Đã cập nhật keyword', 'success');
        } else {
          const domainName = domains.find(d=>d.id===form.domain_id)?.domain_name||'';
          const n = await API.post('keywords', { ...data, id: uuid() });
          setKeywords(prev => [...prev, n]);
          await logAction('create_keyword', `Thêm keyword: ${form.keyword}`, form.domain_id, domainName);
          toast('Đã thêm keyword', 'success');
        }
        onClose();
      } catch(e) { toast('Lỗi lưu keyword', 'error'); }
      setSaving(false);
    };

    return (
      <Modal title={editing ? 'Cập nhật Keyword' : 'Thêm Keyword mới'} onClose={onClose} size="lg">
        <div className="mo-body">
          <div className="fr2">
            <div className="fg">
              <label className="fl">Keyword <span style={{color:'var(--red)'}}>*</span></label>
              <input className="fc" value={form.keyword} onChange={e => set('keyword', e.target.value)} placeholder="VD: go88"/>
            </div>
            <div className="fg">
              <label className="fl">Domain <span style={{color:'var(--red)'}}>*</span></label>
              <select className="fc" value={form.domain_id} onChange={e => set('domain_id', e.target.value)}>
                <option value="">— Chọn domain —</option>
                {domains.map(d => <option key={d.id} value={d.id}>{d.domain_name}</option>)}
              </select>
            </div>
          </div>
          <div className="fr2">
            <div className="fg">
              <label className="fl">Intent</label>
              <select className="fc" value={form.intent} onChange={e => set('intent', e.target.value)}>
                {intents.map(i => <option key={i} value={i}>{intentLabel[i]}</option>)}
              </select>
            </div>
            <div className="fg">
              <label className="fl">Priority</label>
              <select className="fc" value={form.priority} onChange={e => set('priority', e.target.value)}>
                {['core','support','traffic','semantic','brand'].map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
          </div>
          <div className="fg">
            <label className="fl">Target URL</label>
            <input className="fc" value={form.target_url} onChange={e => set('target_url', e.target.value)} placeholder="/go88/ hoặc /"/>
          </div>
          <div className="fr3">
            <div className="fg">
              <label className="fl">Rank hiện tại</label>
              <input className="fc" type="number" value={form.current_rank} onChange={e => set('current_rank', e.target.value)} placeholder="0 = chưa rank"/>
            </div>
            <div className="fg">
              <label className="fl">Best Rank</label>
              <input className="fc" type="number" value={form.best_rank} onChange={e => set('best_rank', e.target.value)}/>
            </div>
            <div className="fg">
              <label className="fl">Trạng thái</label>
              <select className="fc" value={form.status} onChange={e => set('status', e.target.value)}>
                <option value="active">Active</option>
                <option value="pending">Pending</option>
                <option value="achieved">Achieved</option>
              </select>
            </div>
          </div>
          <div className="fr2">
            <div className="fg">
              <label className="fl">GSC Impressions</label>
              <input className="fc" type="number" value={form.gsc_impression} onChange={e => set('gsc_impression', e.target.value)}/>
            </div>
            <div className="fg">
              <label className="fl">GSC Clicks</label>
              <input className="fc" type="number" value={form.gsc_click} onChange={e => set('gsc_click', e.target.value)}/>
            </div>
          </div>
          <div className="fg">
            <label className="fl">Anchor Text chính</label>
            <input className="fc" value={form.anchor_main} onChange={e => set('anchor_main', e.target.value)} placeholder="VD: go88"/>
          </div>
          <div className="fg">
            <label className="fl">Ghi chú / Tín hiệu ranking</label>
            <textarea className="fc" value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
              placeholder="VD: Rank top 20 nhưng khó vào top 10 → tăng backlink chất lượng"/>
          </div>
        </div>
        <div className="mo-foot">
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Huỷ</button>
          <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}>
            {saving ? 'Đang lưu...' : (editing ? 'Cập nhật' : 'Thêm')}
          </button>
        </div>
      </Modal>
    );
  };

  const delKw = async (kw) => {
    try {
      await API.del('keywords', kw.id);
      setKeywords(prev => prev.filter(k => k.id !== kw.id));
      toast('Đã xoá keyword', 'success');
    } catch(e) { toast('Lỗi xoá', 'error'); }
  };

  const getDomainName = (id) => domains.find(d => d.id === id)?.domain_name || '—';

  if (loading) return <Spinner/>;

  // Stats
  const top3 = keywords.filter(k => Number(k.current_rank)>=1 && Number(k.current_rank)<=3).length;
  const top10 = keywords.filter(k => Number(k.current_rank)>=1 && Number(k.current_rank)<=10).length;
  const unranked = keywords.filter(k => !Number(k.current_rank)).length;

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title"><i className="fas fa-key" style={{ marginRight:8,color:'var(--primary)' }}/>Keyword Tracking</div>
          <div className="ph-sub">{filtered.length}/{keywords.length} keyword</div>
        </div>
        <div className="ph-acts">
          <select className="fc" value={filterDomain} onChange={e => setFilterDomain(e.target.value)} style={{ width:170 }}>
            <option value="">Tất cả domain</option>
            {domains.map(d => <option key={d.id} value={d.id}>{d.domain_name}</option>)}
          </select>
          <select className="fc" value={filterIntent} onChange={e => setFilterIntent(e.target.value)} style={{ width:150 }}>
            <option value="">Tất cả intent</option>
            {intents.map(i => <option key={i} value={i}>{intentLabel[i]}</option>)}
          </select>
          <SearchBar value={search} onChange={setSearch} placeholder="Tìm keyword..."/>
          <button className="btn btn-primary btn-sm" onClick={() => setShowAdd(true)}>
            <i className="fas fa-plus"/> Thêm Keyword
          </button>
        </div>
      </div>

      {/* SUMMARY */}
      <div className="stats-row" style={{marginBottom:16}}>
        {[
          {ico:'fa-list',cls:'blue',val:keywords.length,lbl:'Tổng Keywords'},
          {ico:'fa-trophy',cls:'green',val:top3,lbl:'Top 3'},
          {ico:'fa-chart-line',cls:'cyan',val:top10,lbl:'Top 10'},
          {ico:'fa-question-circle',cls:'orange',val:unranked,lbl:'Chưa rank'},
        ].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">
        {filtered.length === 0 ? <EmptyState icon="fa-key" title="Chưa có keyword" sub="Thêm keyword để bắt đầu tracking"/> : (
          <div className="tbl-wrap">
            <table>
              <thead>
                <tr>
                  <th>Keyword</th>
                  <th>Domain</th>
                  <th>Intent</th>
                  <th>Priority</th>
                  <th>Target URL</th>
                  <th>Rank hiện tại</th>
                  <th>Best Rank</th>
                  <th>Impression</th>
                  <th>Click</th>
                  <th>Trạng thái</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(kw => {
                  const statusMap = { active:['b-success','Active'], pending:['b-secondary','Pending'], achieved:['b-primary','Achieved'] };
                  const [sCls, sLbl] = statusMap[kw.status] || ['b-secondary', kw.status];
                  return (
                    <tr key={kw.id}>
                      <td style={{ fontWeight:600 }}>{kw.keyword}</td>
                      <td style={{ fontSize:'.8rem', color:'var(--t3)' }}>{getDomainName(kw.domain_id)}</td>
                      <td><Badge cls={intentCls[kw.intent]||'b-secondary'} label={intentLabel[kw.intent]||kw.intent}/></td>
                      <td><Badge cls="b-secondary" label={kw.priority}/></td>
                      <td style={{ fontSize:'.8rem', maxWidth:120, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', color:'var(--primary)' }}>{kw.target_url||'—'}</td>
                      <td><RankChip rank={kw.current_rank}/></td>
                      <td><RankChip rank={kw.best_rank}/></td>
                      <td style={{ fontSize:'.84rem' }}>{Number(kw.gsc_impression)||0}</td>
                      <td style={{ fontSize:'.84rem' }}>{Number(kw.gsc_click)||0}</td>
                      <td><Badge cls={sCls} label={sLbl}/></td>
                      <td>
                        <div style={{ display:'flex', gap:4 }}>
                          <button className="icon-btn" onClick={() => setEditKw(kw)} title="Cập nhật"><i className="fas fa-edit"/></button>
                          <button className="icon-btn danger" onClick={() => delKw(kw)} title="Xoá"><i className="fas fa-trash"/></button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Tín hiệu ranking guide */}
      <div className="card" style={{ marginTop:16 }}>
        <div className="ch"><div className="ct"><i className="fas fa-lightbulb" style={{ marginRight:7,color:'var(--yellow)' }}/>Đọc tín hiệu Ranking & Action tiếp theo</div></div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:10 }}>
          {[
            ['fa-eye','b-info','Có impression, không có click','Tối ưu title/meta CTR, thêm FAQ, tăng internal link, push link nhẹ'],
            ['fa-search','b-secondary','Index nhưng không có impression','Bổ sung semantic keyword, tăng internal link, thêm supporting content, bổ sung schema'],
            ['fa-random','b-warning','Keyword nhảy URL lung tung','Kiểm tra cannibalization, chọn URL chính, sửa internal link, 301 nếu cần'],
            ['fa-pause','b-secondary','Rank top 50 rồi đứng','Tăng topical content, tối ưu onpage, bơm internal link, tăng entity/link nền'],
            ['fa-chart-line','b-warning','Top 20 khó vào top 10','Cải thiện authority, backlink chất lượng, tối ưu CTR, tăng content depth'],
            ['fa-trophy','b-success','Top 10 khó vào top 3','Tăng brand signal, link chất lượng cao, UX/CTR, unique data, microsite SERP'],
          ].map(([ic,cls,title,action]) => (
            <div key={title} style={{ padding:'12px 14px', background:'var(--bg)', borderRadius:'var(--rs)', border:'1px solid var(--border)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:7, fontWeight:700, fontSize:'.83rem' }}>
                <i className={`fas ${ic}`} style={{ color:cls.includes('warning')?'var(--yellow)':cls.includes('success')?'var(--green)':cls.includes('info')?'var(--blue)':'var(--t3)' }}/>
                {title}
              </div>
              <div style={{ fontSize:'.79rem', color:'var(--t2)', lineHeight:1.6 }}>→ {action}</div>
            </div>
          ))}
        </div>
      </div>

      {showAdd && <KwModal onClose={() => setShowAdd(false)}/>}
      {editKw && <KwModal kw={editKw} onClose={() => setEditKw(null)}/>}
    </div>
  );
};