// ===========================================================
// Inventory — Tồn kho THẬT (ProductStock theo từng địa điểm từ Sapo)
// ===========================================================

function InventoryScreen() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const [search, setSearch] = useState('');
  const [catFilter, setCatFilter] = useState('all');
  const [stockFilter, setStockFilter] = useState('all');
  const [selected, setSelected] = useState(null);
  const [data, setData] = useState(null); // { summary, categories, products, page, pages, total, lowThreshold, outThreshold }
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);

  useEffect(() => { setPage(1); }, [search, catFilter, stockFilter]);
  useEffect(() => {
    if (!live) { setLoading(false); return; }
    setLoading(true);
    const qs = new URLSearchParams({ q: search, category: catFilter, stock: stockFilter, page: String(page), pageSize: '50' });
    window.TVS_API.api('/api/inventory?' + qs.toString())
      .then((r) => { setData(r); setLoading(false); })
      .catch(() => setLoading(false));
  }, [search, catFilter, stockFilter, page]);

  const summary = (data && data.summary) || { totalSKU: 0, lowCount: 0, outCount: 0, totalValue: 0 };
  const cats = (data && data.categories) || ['all'];
  const products = (data && data.products) || [];
  const LOW = (data && data.lowThreshold) || 80;
  const OUT = (data && data.outThreshold) || 20;

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Tồn kho sản phẩm</h1>
          <div className="sub">Tra cứu tồn kho thật theo từng cửa hàng + kho · đồng bộ 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 && window.tvsToast('Đang đồng bộ tồn kho từ Sapo...'); window.TVS_API && window.TVS_API.syncNow(['products']).then(()=>window.tvsToast && window.tvsToast('Đã yêu cầu đồng bộ tồn kho')).catch(()=>{}); }}><Icon name="refresh" size={14}/>Đồng bộ Sapo</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="Tổng SKU" value={summary.totalSKU} sub="Đang hoạt động"/>
        <KPI label="Giá trị tồn kho" value={fmt.vnd(summary.totalValue)} sub="Theo giá vốn / giá lẻ"/>
        <KPI label="SKU sắp hết" value={summary.lowCount} delta={`< ${LOW} tại cửa hàng`} deltaDir="down"/>
        <KPI label="SKU hết hàng" value={summary.outCount} sub={`< ${OUT} tại cửa hàng`}/>
      </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..." 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">
            <thead>
              <tr>
                <th>SKU</th>
                <th>Sản phẩm</th>
                <th>Danh mục</th>
                <th className="num" style={{background:'rgba(65,182,230,0.06)'}}>Tồn cửa hàng</th>
                <th className="num">Tồn kho TT</th>
                <th className="num">Tổng</th>
                <th>Trạng thái</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {products.map(p => {
                const status = p.storeQty < OUT ? 'out' : p.storeQty < LOW ? 'low' : 'ok';
                return (
                  <tr key={p.id} onClick={() => setSelected(p)} style={{cursor:'pointer'}}>
                    <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}</div>
                      </div>
                    </td>
                    <td><Tag variant="outline">{p.category}</Tag></td>
                    <td className="num strong" style={{background:'rgba(65,182,230,0.06)', color: status==='out' ? 'var(--status-sale)' : status==='low' ? 'var(--status-warning)' : 'var(--fg-1)'}}>{p.storeQty}</td>
                    <td className="num tnum fg-muted">{p.warehouseQty}</td>
                    <td className="num tnum">{p.total}</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"><Icon name="more" size={14}/></button>
                    </td>
                  </tr>
                );
              })}
              {!loading && products.length === 0 && <tr><td colSpan={8}><div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Không có sản phẩm phù hợp</div></td></tr>}
              {loading && <tr><td colSpan={8}><div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Đang tải tồn kho…</div></td></tr>}
            </tbody>
          </table>
        </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ị {products.length} / {data ? data.total.toLocaleString('vi-VN') : 0} SKU</span>
          {data && data.pages > 1 && (
            <div className="row gap-2">
              <span className="text-xs fg-muted">Trang {data.page}/{data.pages}</span>
              <button className="btn btn-secondary btn-sm" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Trước</button>
              <button className="btn btn-secondary btn-sm" disabled={page>=data.pages} onClick={()=>setPage(p=>p+1)}>Sau</button>
            </div>
          )}
        </div>
      </Card>

      {selected && <InventoryDetail product={selected} onClose={() => setSelected(null)}/>}
    </>
  );
}

function InventoryDetail({ product, onClose }) {
  const [detail, setDetail] = useState(null);
  useEffect(() => {
    if (!(window.TVS_API && window.TVS_API.isAuthed())) return;
    window.TVS_API.api('/api/inventory/' + product.id).then(setDetail).catch(() => setDetail({ locations: [], storeTotal: 0, warehouseTotal: 0, product }));
  }, [product.id]);
  const locations = (detail && detail.locations) || [];
  const storeLocs = locations.filter(l => l.type === 'store');
  const whLocs = locations.filter(l => l.type === 'warehouse');
  const p = (detail && detail.product) || product;

  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}}>{p.sku}</div>
            <h2 style={{color:'#fff',margin:'2px 0',fontFamily:'var(--font-display)',fontSize:22,fontWeight:700}}>{p.name}</h2>
            <div className="row gap-3 mt-1" style={{color:'rgba(255,255,255,0.78)',fontSize:13}}>
              <span>{p.category}</span>
              <span>Giá lẻ <b style={{color:'#fff'}} className="tnum">{fmt.vndFull(p.retailPrice || 0)}</b></span>
              {p.costPrice ? <span>Giá vốn <b style={{color:'#fff'}} className="tnum">{fmt.vndFull(p.costPrice)}</b></span> : null}
            </div>
          </div>
          <button className="close" onClick={onClose}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        <div style={{padding:'var(--space-5) var(--space-6)'}}>
          {/* Tổng quan tồn */}
          <div className="grid mb-4" style={{gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-3)'}}>
            <Card style={{padding:'var(--space-4)'}}>
              <div className="text-xs fg-muted mb-1">🏪 Tồn tại cửa hàng</div>
              <div className="tnum bold" style={{fontSize:28,fontFamily:'var(--font-display)',color:'var(--fg-1)'}}>{detail ? detail.storeTotal : '—'}</div>
              <div className="text-xs fg-muted mt-1">{storeLocs.length} cửa hàng</div>
            </Card>
            <Card style={{padding:'var(--space-4)'}}>
              <div className="text-xs fg-muted mb-1">🏢 Tồn tại kho</div>
              <div className="tnum bold" style={{fontSize:28,fontFamily:'var(--font-display)',color:'var(--fg-1)'}}>{detail ? detail.warehouseTotal : '—'}</div>
              <div className="text-xs fg-muted mt-1">{whLocs.length} kho</div>
            </Card>
            <Card style={{padding:'var(--space-4)'}}>
              <div className="text-xs fg-muted mb-1">📦 Tổng cộng</div>
              <div className="tnum bold" style={{fontSize:28,fontFamily:'var(--font-display)',color:'var(--vs-dark-blue)'}}>{detail ? (detail.storeTotal + detail.warehouseTotal) : '—'}</div>
              <div className="text-xs fg-muted mt-1">{locations.length} địa điểm</div>
            </Card>
          </div>

          <Card pad={false}>
            <CardHeader title="Tồn kho theo địa điểm" sub="Số liệu thật từ Sapo"/>
            <div className="table-wrap">
              <table className="tbl">
                <thead><tr><th>Địa điểm</th><th>Loại</th><th className="num">Số lượng</th></tr></thead>
                <tbody>
                  {locations.map((l) => (
                    <tr key={l.storeId}>
                      <td className="strong text-sm">{l.name}</td>
                      <td><Tag variant={l.type === 'warehouse' ? 'info' : 'outline'} dot>{l.type === 'warehouse' ? 'Kho' : 'Cửa hàng'}</Tag></td>
                      <td className="num tnum strong" style={{color: l.qty <= 0 ? 'var(--status-sale)' : l.qty < 10 ? 'var(--status-warning)' : 'var(--fg-1)'}}>{l.qty}</td>
                    </tr>
                  ))}
                  {detail && locations.length === 0 && <tr><td colSpan={3}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Sản phẩm chưa có bản ghi tồn kho tại địa điểm nào.</div></td></tr>}
                  {!detail && <tr><td colSpan={3}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Đang tải…</div></td></tr>}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.InventoryScreen = InventoryScreen;