// ===========================================================
// Inventory — Tồn kho (lookup across 3 stores)
// ===========================================================

function InventoryScreen({ role }) {
  useTvsSession(); // re-render khi thêm/xoá sản phẩm hoặc đổi phân quyền
  const [search, setSearch] = useState('');
  const [catFilter, setCatFilter] = useState('all');
  const [stockFilter, setStockFilter] = useState('all');
  const [selected, setSelected] = useState(null);
  const [showAdd, setShowAdd] = useState(false);

  const cats = ['all', ...new Set(D.products.map(p => p.cat))];

  // Compute per-store stock + central warehouse from product.stock as seed
  const stockOf = (p) => {
    if (p.stock === 0) return { q1: 0, q3: 0, hn: 0, total: 0, warehouse: 0, all: 0 };
    const seed = parseInt(String(p.sku).replace(/\D/g, '').slice(-4), 10) || 7; // SKU tự đặt không có số vẫn không NaN
    const q1 = Math.max(0, Math.round(p.stock * 0.32 + (seed % 7) - 3));
    const q3 = Math.max(0, Math.round(p.stock * 0.28 + ((seed*3) % 5) - 2));
    const hn = Math.max(0, Math.round(p.stock * 0.40 + ((seed*7) % 9) - 4));
    const warehouse = Math.round(p.stock * 2.4);
    return { q1, q3, hn, total: q1+q3+hn, warehouse, all: q1+q3+hn+warehouse };
  };

  // MỘT định nghĩa trạng thái dùng chung cho KPI + filter + tag trên bảng
  const stockStatus = (p) => p.stock === 0 ? 'out' : p.stock < 40 ? 'low' : 'ok';

  const enriched = D.products.map(p => ({...p, stk: stockOf(p), status: stockStatus(p)}));

  const filtered = enriched.filter(p => {
    if (catFilter !== 'all' && p.cat !== catFilter) return false;
    if (stockFilter === 'low' && p.status !== 'low') return false;
    if (stockFilter === 'out' && p.status !== 'out') return false;
    if (search) {
      const s = searchNorm(search);
      if (!searchNorm(p.name).includes(s) && !p.sku.toLowerCase().includes(search.toLowerCase()) && !searchNorm(p.cat).includes(s)) return false;
    }
    return true;
  });

  const lowCount = enriched.filter(p => p.status === 'low').length;
  const outCount = enriched.filter(p => p.status === 'out').length;
  const totalSKU = enriched.length;
  const totalValue = enriched.reduce((s, p) => s + p.stk.all * p.b2bPrice, 0);

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Tồn kho sản phẩm</h1>
          <div className="sub">Tra cứu nhanh tồn kho tại 3 cửa hàng + kho trung tâm · cập nhật từ Sapo</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Quét mã vạch')}><Icon name="barcode" size={14}/>Quét mã vạch</button>
          <button className="btn btn-secondary" onClick={() => window.tvsToast('Đang đồng bộ tồn kho từ Sapo...')}><Icon name="refresh" size={14}/>Đồng bộ Sapo</button>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Yêu cầu điều phối kho')}><Icon name="package" size={14}/>Yêu cầu điều phối</button>
          {tvsCan(role, 'products.add') && (
            <button className="btn btn-cta" onClick={() => setShowAdd(true)}><Icon name="plus" size={14}/>Thêm sản phẩm</button>
          )}
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="Tổng SKU" value={totalSKU} sub="Đang hoạt động"/>
        <KPI label="Giá trị tồn kho" value={fmt.vnd(totalValue)} sub="Theo giá B2B"/>
        <KPI label="SKU sắp hết" value={lowCount} delta={`${lowCount} cảnh báo`} deltaDir="down"/>
        <KPI label="SKU hết hàng" value={outCount} sub="Cần đặt thêm"/>
      </div>

      <Card pad={false}>
        <div style={{padding:'var(--space-3) var(--space-5)',display:'flex',gap:'var(--space-3)',alignItems:'center',borderBottom:'1px solid var(--border-1)',flexWrap:'wrap'}}>
          <div className="topbar-search" style={{flex:'0 1 360px'}}>
            <Icon name="search" size={14} style={{color:'var(--fg-muted)'}}/>
            <input placeholder="Tên sản phẩm, SKU, danh mục..." value={search} onChange={(e)=>setSearch(e.target.value)} autoFocus/>
          </div>
          <Segmented value={stockFilter} options={[
            {value:'all',label:'Tất cả'},
            {value:'low',label:'Sắp hết'},
            {value:'out',label:'Hết hàng'},
          ]} onChange={setStockFilter}/>
          <div className="row gap-1" style={{marginLeft:'auto'}}>
            <span className="text-xs fg-muted">Danh mục:</span>
            <select className="select" style={{width:200}} value={catFilter} onChange={(e)=>setCatFilter(e.target.value)}>
              {cats.map(c => <option key={c} value={c}>{c === 'all' ? 'Tất cả' : c}</option>)}
            </select>
          </div>
        </div>
        <div className="table-wrap">
          <table className="tbl tbl--inv">
            <thead>
              <tr>
                <th>SKU</th>
                <th>Sản phẩm</th>
                <th>Danh mục</th>
                <th className="num">Q.1<br/><span style={{fontSize:9,fontWeight:400,color:'var(--fg-muted)'}}>Lê Lợi</span></th>
                <th className="num">Q.3<br/><span style={{fontSize:9,fontWeight:400,color:'var(--fg-muted)'}}>NĐ.Chiểu</span></th>
                <th className="num">HN<br/><span style={{fontSize:9,fontWeight:400,color:'var(--fg-muted)'}}>Bà Triệu</span></th>
                <th className="num" style={{background:'rgba(65,182,230,0.06)'}}>Tổng store</th>
                <th className="num">Kho TT</th>
                <th>Trạng thái</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => {
                const s = p.stk;
                const status = p.status;
                return (
                  <tr key={p.sku} onClick={() => setSelected(p)}>
                    <td className="tnum text-xs fg-muted">{p.sku}</td>
                    <td>
                      <div className="row gap-2">
                        <div style={{width:32,height:32,background:'var(--bg-soft)',borderRadius:4,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--vs-light-blue)',flexShrink:0}}>
                          <Icon name="pill" size={16}/>
                        </div>
                        <div className="strong" style={{fontSize:13}}>{p.name}{p._new && <Tag variant="info" style={{marginLeft:6}}>Mới</Tag>}</div>
                      </div>
                    </td>
                    <td><Tag variant="outline">{p.cat}</Tag></td>
                    <td className="num tnum" style={{color: s.q1 < 10 ? 'var(--status-sale)' : s.q1 < 25 ? 'var(--status-warning)' : 'var(--fg-1)'}}>{s.q1}</td>
                    <td className="num tnum" style={{color: s.q3 < 10 ? 'var(--status-sale)' : s.q3 < 25 ? 'var(--status-warning)' : 'var(--fg-1)'}}>{s.q3}</td>
                    <td className="num tnum" style={{color: s.hn < 10 ? 'var(--status-sale)' : s.hn < 25 ? 'var(--status-warning)' : 'var(--fg-1)'}}>{s.hn}</td>
                    <td className="num strong" style={{background:'rgba(65,182,230,0.06)'}}>{s.total}</td>
                    <td className="num tnum fg-muted">{s.warehouse}</td>
                    <td>
                      <Tag variant={status === 'out' ? 'danger' : status === 'low' ? 'warning' : 'success'} dot>
                        {status === 'out' ? 'Hết' : status === 'low' ? 'Sắp hết' : 'Đủ hàng'}
                      </Tag>
                    </td>
                    <td>
                      <button className="btn btn-icon btn-sm btn-ghost" title="Xem chi tiết tồn kho"
                        onClick={(e) => { e.stopPropagation(); setSelected(p); }}><Icon name="more" size={14}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <EmptyState icon="package" title="Không có SKU nào khớp bộ lọc"
              desc="Thử đổi từ khoá hoặc chọn bộ lọc khác."
              action={<button className="btn btn-secondary btn-sm" onClick={() => { setSearch(''); setCatFilter('all'); setStockFilter('all'); }}>Xoá bộ lọc</button>}/>
          )}
        </div>
        <div style={{padding:'var(--space-3) var(--space-5)',borderTop:'1px solid var(--border-1)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span className="text-sm fg-muted">Hiển thị {filtered.length} / {totalSKU} SKU</span>
          <div className="row gap-2">
            <span className="text-xs fg-muted">Đồng bộ lần cuối: 2 phút trước từ Sapo</span>
            <span className="status-dot green"/>
          </div>
        </div>
      </Card>

      {selected && <InventoryDetail product={selected} role={role} onClose={() => setSelected(null)}/>}
      {showAdd && <AddProductModal onClose={() => setShowAdd(false)}/>}
    </>
  );
}

// ===========================================================
// Thêm sản phẩm mới vào danh mục — lưu qua TVS_SESSION (sống qua reload)
// ===========================================================
function __genSku() {
  for (let t = 0; t < 80; t++) {
    const sku = 'VS-' + (9000 + Math.floor(Math.random() * 1000));
    if (!D.products.some(p => p.sku === sku)) return sku;
  }
  return 'VS-' + String(Date.now()).slice(-4);
}

function AddProductModal({ onClose }) {
  const cats = [...new Set(D.products.map(p => p.cat))];
  const [f, setF] = useState({ name: '', sku: __genSku(), cat: cats[0] || 'Khác', newCat: '', price: '', b2bPrice: '', stock: '0' });
  const [err, setErr] = useState(null);
  const set = (k, v) => { setErr(null); setF(x => ({ ...x, [k]: v })); };
  const num = (v) => parseInt(String(v).replace(/\D/g, ''), 10) || 0;

  const save = () => {
    const name = f.name.trim();
    const sku = f.sku.trim().toUpperCase();
    const cat = f.cat === '__new' ? f.newCat.trim() : f.cat;
    const price = num(f.price);
    const b2bPrice = num(f.b2bPrice) || Math.round(price * 0.75 / 1000) * 1000;
    const stock = num(f.stock);
    if (!name) return setErr('Nhập tên sản phẩm.');
    if (!/^[A-Z0-9-]{4,}$/.test(sku)) return setErr('SKU không hợp lệ — dùng chữ/số/gạch ngang, tối thiểu 4 ký tự.');
    if (D.products.some(p => p.sku === sku)) return setErr('SKU "' + sku + '" đã tồn tại — chọn mã khác.');
    if (price <= 0) return setErr('Giá bán lẻ phải lớn hơn 0.');
    if (!cat) return setErr('Chọn hoặc nhập danh mục.');
    const p = { sku, name, cat, price, b2bPrice, disc: 25, stock, _new: true };
    D.products.unshift(p);
    window.TVS_SESSION.addProduct(p);
    window.tvsToast('Đã thêm sản phẩm ' + name);
    onClose();
  };

  const field = (label, el) => (
    <div>
      <div className="text-xs fg-muted mb-1" style={{ fontWeight: 600 }}>{label}</div>
      {el}
    </div>
  );

  return (
    <div className="drawer-overlay" style={{ justifyContent: 'center', alignItems: 'center' }}>
      <div onClick={(e) => e.stopPropagation()}
        style={{ background: 'var(--bg-page)', width: 'min(560px, 95vw)', maxHeight: '92vh', display: 'flex', flexDirection: 'column', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-pop)', animation: 'slidein 0.28s var(--ease-out)' }}>
        <div style={{ padding: 'var(--space-5) var(--space-6)', background: 'var(--vs-dark-blue)', color: '#fff' }}>
          <div className="row">
            <div style={{ flex: 1 }}>
              <div className="eyebrow" style={{ color: 'var(--vs-light-blue)' }}>Danh mục sản phẩm</div>
              <h2 style={{ margin: '4px 0 0', fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: '#fff' }}>Thêm sản phẩm mới</h2>
            </div>
            <button onClick={onClose} style={{ background: 'rgba(255,255,255,0.18)', border: 'none', color: '#fff', width: 36, height: 36, borderRadius: '50%', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="close" size={16}/>
            </button>
          </div>
        </div>

        <div style={{ padding: 'var(--space-5) var(--space-6)', overflow: 'auto' }} className="col gap-4">
          {field('Tên sản phẩm *',
            <input className="input" placeholder="VD: VITAMIN D3 5000 IU - Lọ 100 viên" value={f.name} onChange={(e) => set('name', e.target.value)} autoFocus/>)}
          <div className="grid grid-2" style={{ gap: 'var(--space-4)' }}>
            {field('SKU *', <input className="input tnum" value={f.sku} onChange={(e) => set('sku', e.target.value)}/>)}
            {field('Danh mục *',
              <select className="select" value={f.cat} onChange={(e) => set('cat', e.target.value)}>
                {cats.map(c => <option key={c} value={c}>{c}</option>)}
                <option value="__new">+ Danh mục mới…</option>
              </select>)}
          </div>
          {f.cat === '__new' && field('Tên danh mục mới *',
            <input className="input" placeholder="VD: Thể thao — Phục hồi" value={f.newCat} onChange={(e) => set('newCat', e.target.value)}/>)}
          <div className="grid grid-3" style={{ gap: 'var(--space-4)' }}>
            {field('Giá bán lẻ (đ) *', <input className="input tnum" inputMode="numeric" placeholder="599000" value={f.price} onChange={(e) => set('price', e.target.value)}/>)}
            {field('Giá B2B (đ)', <input className="input tnum" inputMode="numeric" placeholder={'Trống = 75% giá lẻ'} value={f.b2bPrice} onChange={(e) => set('b2bPrice', e.target.value)}/>)}
            {field('Tồn kho ban đầu', <input className="input tnum" inputMode="numeric" value={f.stock} onChange={(e) => set('stock', e.target.value)}/>)}
          </div>
          {num(f.stock) === 0 && <div className="text-xs fg-muted">Tồn kho 0 — sản phẩm sẽ hiện trạng thái "Hết hàng" cho tới khi nhập kho.</div>}
          {err && (
            <div className="banner danger">
              <Icon name="close" size={16}/>
              <div style={{ flex: 1 }}>{err}</div>
            </div>
          )}
        </div>

        <div style={{ padding: 'var(--space-4) var(--space-6)', borderTop: '1px solid var(--border-1)', display: 'flex', gap: 'var(--space-3)', background: 'var(--bg-soft)' }}>
          <div style={{ flex: 1 }}/>
          <button className="btn btn-ghost" onClick={onClose}>Huỷ</button>
          <button className="btn btn-cta" onClick={save}><Icon name="plus" size={14}/>Thêm sản phẩm</button>
        </div>
      </div>
    </div>
  );
}

function InventoryDetail({ product, role, onClose }) {
  // Xoá cần bấm 2 lần trong 3 giây — tránh xoá nhầm
  const [confirmDel, setConfirmDel] = useState(false);
  useEffect(() => {
    if (!confirmDel) return;
    const t = setTimeout(() => setConfirmDel(false), 3000);
    return () => clearTimeout(t);
  }, [confirmDel]);
  const deleteProduct = () => {
    if (!confirmDel) { setConfirmDel(true); return; }
    const i = D.products.findIndex(x => x.sku === product.sku);
    if (i >= 0) D.products.splice(i, 1);
    window.TVS_SESSION.removeProduct(product.sku);
    window.tvsToast('Đã xoá sản phẩm ' + product.name);
    onClose();
  };
  // product.stk đã được tính ở bảng — dùng lại, tránh 2 công thức lệch nhau
  const s = product.stk;
  const stores = [
    {id:'Q1', name:'TVS Q.1 — Lê Lợi', qty:s.q1, sold7d:0, reorder:50},
    {id:'Q3', name:'TVS Q.3 — Nguyễn Đình Chiểu', qty:s.q3, sold7d:0, reorder:50},
    {id:'HN', name:'TVS Hà Nội — Bà Triệu', qty:s.hn, sold7d:0, reorder:60},
    {id:'WH', name:'Kho trung tâm', qty:s.warehouse, sold7d:0, reorder:200},
  ];
  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-h">
          <div style={{width:56,height:56,borderRadius:'var(--radius-md)',background:'var(--vs-light-blue)',color:'var(--vs-dark-blue)',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <Icon name="pill" size={28}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--vs-light-blue)',fontWeight:700}}>{product.sku}</div>
            <h2 style={{color:'#fff',margin:'2px 0',fontFamily:'var(--font-display)',fontSize:22,fontWeight:700}}>{product.name}</h2>
            <div className="row gap-3 mt-1" style={{color:'rgba(255,255,255,0.78)',fontSize:13}}>
              <span>{product.cat}</span>
              <span>Giá lẻ <b style={{color:'#fff'}} className="tnum">{fmt.vndFull(product.price)}</b></span>
              <span>Giá B2B <b style={{color:'#fff'}} className="tnum">{fmt.vndFull(product.b2bPrice)}</b></span>
            </div>
          </div>
          <button className="btn btn-cta" onClick={() => window.tvsDemo('Yêu cầu điều phối kho')}><Icon name="package" size={14}/>Yêu cầu điều phối</button>
          {tvsCan(role, 'products.remove') && <button className="btn"
            style={confirmDel
              ? { background: 'var(--status-sale)', color: '#fff', borderColor: 'transparent' }
              : { background: 'rgba(255,255,255,0.10)', color: '#fff', borderColor: 'transparent' }}
            onClick={deleteProduct}>
            <Icon name="trash" size={14}/>{confirmDel ? 'Bấm lần nữa để xoá' : 'Xoá sản phẩm'}
          </button>}
          <button className="close" onClick={onClose}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        <div style={{padding:'var(--space-5) var(--space-6)'}}>
          <div className="grid mb-4" style={{gridTemplateColumns:'repeat(auto-fit,minmax(160px,1fr))',gap:'var(--space-3)'}}>
            {stores.map(st => {
              const days = (st.qty > 0 && st.sold7d > 0) ? Math.round(st.qty / (st.sold7d/7)) : 0;
              const isLow = st.qty < st.reorder;
              return (
                <Card key={st.id} style={{padding:'var(--space-4)'}}>
                  <div className="text-xs fg-muted mb-1">{st.id === 'WH' ? '🏢' : '🏪'} {st.name}</div>
                  <div className="row" style={{alignItems:'baseline'}}>
                    <div className="tnum bold" style={{fontSize:28,fontFamily:'var(--font-display)',color: isLow ? 'var(--status-sale)' : 'var(--fg-1)'}}>{st.qty}</div>
                    <div className="text-xs fg-muted" style={{marginLeft:6}}>sản phẩm</div>
                  </div>
                  <div className="text-xs fg-muted mt-2">
                    7N bán: <b style={{color:'var(--fg-1)'}}>{st.sold7d}</b> · còn ~<b style={{color: days < 7 ? 'var(--status-sale)' : 'var(--fg-1)'}}>{days} ngày</b>
                  </div>
                  {isLow && (
                    <div className="mt-2">
                      <Tag variant="warning" dot>Dưới reorder ({st.reorder})</Tag>
                    </div>
                  )}
                </Card>
              );
            })}
          </div>

          <div className="grid grid-7-5 mb-4">
            <Card pad={false}>
              <CardHeader title="Lịch sử nhập / xuất kho" sub="30 ngày qua"/>
              <div className="table-wrap">
                <table className="tbl">
                  <thead><tr><th>Ngày</th><th>Loại</th><th>Kho</th><th className="num">Số lượng</th><th>Tham chiếu</th></tr></thead>
                  <tbody>
                    {[].map((r, i) => (
                      <tr key={i}>
                        <td className="tnum text-sm">{r.d}</td>
                        <td><Tag variant={r.t === 'Nhập' ? 'success' : r.t === 'Xuất' ? 'info' : 'warning'} dot>{r.t}</Tag></td>
                        <td className="text-sm">{r.store}</td>
                        <td className={`num tnum strong`} style={{color: r.qty > 0 ? 'var(--status-success)' : 'var(--status-sale)'}}>
                          {r.qty > 0 ? '+'+r.qty : r.qty}
                        </td>
                        <td className="text-xs fg-muted tnum">{r.ref}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            <Card pad={false}>
              <CardHeader title="Khách hàng quan tâm" sub="Theo lịch sử mua"/>
              <div className="card-pad">
                {D.customers.slice(0,4).map(c => (
                  <div key={c.id} className="activity">
                    <Avatar name={c.name} size="sm" tier={tierVariant(c.tier)}/>
                    <div className="body">
                      <div className="title text-sm">{c.name}</div>
                      <div className="meta">{c.tags.slice(0,2).join(' · ')} · {c.orders} đơn</div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          <Card pad={false}>
            <CardHeader title="Hiệu suất bán hàng" sub="Số lượng bán theo tuần"/>
            <div className="card-pad">
              <BarChart data={Array.from({length:14}, () => 0)} height={140}/>
              <div className="row mt-3" style={{justifyContent:'space-between',fontSize:11,color:'var(--fg-muted)'}}>
                <span>Tuần 1</span><span>Tuần 4</span><span>Tuần 8</span><span>Tuần 12</span><span>Tuần này</span>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.InventoryScreen = InventoryScreen;