{canAiDelegate && } {canManage && } {canManage && } }/> {error &&

{error}

} {msg &&

{msg}

}

{summaryCards.map(([label, value, sub, icon]) => (

{label} {value} {sub}

))}

{GIS_STYLES.map(([k, label]) => )}

{canManage && } {draftN > 0 && }

{noMap &&

地圖庫未載入，請刷新頁面或檢查網絡。

} {(mode || placing) &&

{mode === "area" ? "點擊地圖添加區域頂點" : mode === "measure" ? "點擊地圖添加測距點" : "點擊地圖選擇倉庫坐標"}

} {mode === "measure" && draftDistance &&

距離：{draftDistance}

} {mode === "area" && draftN >= 3 && (

setZoneName(e.target.value)} placeholder="區域名稱"/>

)}

倉庫 {data.warehouses.length}

{(data.warehouses || []).map((w) => ( ))} {!loading && !data.warehouses.length &&

暫無倉庫資料。

}

{canAiDelegate && (

AI 分庫托管GIS v1

規範庫位{aiLayoutResult?.summary?.normalized_balance_locations || 0}

新增庫區{aiLayoutResult?.summary?.created_zones || 0}

新增庫位{aiLayoutResult?.summary?.created_locations || 0}

關聯庫存{aiLayoutResult?.summary?.linked_balances || 0}

)} {canLocate && (

AI 識別定位DeepSeek

setAiText(e.target.value)}
                placeholder="例如：在呼和浩特設中心庫，在鄂爾多斯設搶修庫 EDS-01"/>
              <div className="gis-inline">
                <button className="btn btn-primary btn-sm" onClick={parseAiWarehouses} disabled={aiBusy}><Icon name="sparkle" size={14}/>{aiBusy ? "識別中" : "AI 識別"}</button>
                {aiItems.length > 0 && <button className="btn btn-sm" onClick={() => setAiItems([])}><Icon name="x" size={14}/>清空</button>}
              </div>
              {!!aiItems.length && (
                <div className="gis-ai-result">
                  {aiItems.map((item, i) => (
                    <button key={i} onClick={() => {
                      setPinForm({ name: item.name || "", lat: "", lng: "", address: item.address || "" });
                      setAddr(item.address || item.name || "");
                    }}>
                      <b>{item.name}</b>
                      <small>{item.warehouse_type || "未分類"} · {item.address || "待定位"}</small>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

{canLocate && (
            <div className="gis-panel">
              <div className="gis-panel-head"><span>手動定位</span><small>{placing ? "點選中" : "WGS-84"}</small></div>
              <div className="gis-form-grid">
                <label>倉庫名稱<input className="input" value={pinForm.name} onChange={(e) => setPinForm({ ...pinForm, name: e.target.value })}/></label>
                <label>地址<input className="input" value={pinForm.address} onChange={(e) => setPinForm({ ...pinForm, address: e.target.value })}/></label>
                <label>緯度<input className="input" value={pinForm.lat} onChange={(e) => setPinForm({ ...pinForm, lat: e.target.value })}/></label>
                <label>經度<input className="input" value={pinForm.lng} onChange={(e) => setPinForm({ ...pinForm, lng: e.target.value })}/></label>
              </div>
              <div className="gis-inline">
                <input className="input" value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="地址/地名搜索"/>
                <button className="btn btn-sm" onClick={geocode} disabled={geoBusy}><Icon name="search" size={14}/>{geoBusy ? "搜索中" : "搜索"}</button>
              </div>
              {!!geoResults.length && (
                <div className="gis-geocode-list">
                  {geoResults.map((g, i) => <button key={i} onClick={() => pickGeo(g)}>{g.display_name}</button>)}
                </div>
              )}
              <div className="gis-inline">
                <button className="btn btn-sm" onClick={() => { setTool(null); placingRef.current = true; setPlacing(true); }}><Icon name="map" size={14}/>點地圖取點</button>
                <button className="btn btn-primary btn-sm" onClick={savePin} disabled={busy}><Icon name="check" size={14}/>保存定位</button>
              </div>
            </div>
          )}

<div className="gis-panel">
            <div className="gis-panel-head"><span>預警聯動</span><small>{whAlerts.length}</small></div>
            <div className="gis-alert-list">
              {whAlerts.map((a) => (
                <div className={"gis-alert-row " + (a.level || "blue")} key={a.id}>
                  <span>{GIS_LEVEL_LABEL[a.level] || "提示"}</span>
                  <b>{a.item_name || a.alert_type}</b>
                  <small>{a.suggestion || a.scope}</small>
                </div>
              ))}
              {!whAlerts.length && <div className="muted" style={{ fontSize: 13 }}>當前倉庫暫無直接關聯預警。</div>}
            </div>
          </div>
        </aside>
      </section>

<section className="gis-detail-grid">
        <div className="gis-detail-panel">
          <div className="gis-panel-head">
            <span>{selectedWh ? selectedWh.name : "倉庫詳情"}</span>
            <small>{selectedWh ? `${selectedWh.locations_count || 0} 庫位` : "—"}</small>
          </div>
          {selectedWh ? (
            <>
              <div className="gis-kpi-line">
                <div><small>物資種類</small><b>{selectedWh.item_count || 0}</b></div>
                <div><small>庫存量</small><b>{gisNum(selectedWh.stock_total)}</b></div>
                <div><small>容量</small><b className={gisTone(selectedWh.capacity_usage)}>{selectedWh.capacity_usage == null ? "—" : `${gisNum(selectedWh.capacity_usage)}%`}</b></div>
                <div><small>低庫存</small><b className={selectedWh.low_stock_count ? "danger" : "ok"}>{selectedWh.low_stock_count || 0}</b></div>
              </div>
              <div className="gis-zone-strip">
                {selectedZones.map((z) => (
                  <span key={z.id} style={{ borderColor: z.color || "#1B6BFF" }}>
                    <b>{z.zone_code}</b>{z.zone_name} · {z.rack_count || 0} 庫位 · {z.alert_count || 0} 風險
                  </span>
                ))}
                {!selectedZones.length && <span>暫無庫區資料，可點「自動整理庫位」從庫存資料生成。</span>}
              </div>
            </>
          ) : <div className="muted">請選擇倉庫。</div>}
        </div>

<div className="gis-detail-panel">
          <div className="gis-panel-head">
            <span>庫內庫位圖</span>
            <div className="gis-filterline">
              <input className="input" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索庫位/物資"/>
              <select className="input" value={status} onChange={(e) => setStatus(e.target.value)}>
                {GIS_STATUS.map(([k, label]) => <option key={k} value={k}>{label}</option>)}
              </select>
              <button className={"btn btn-sm " + (riskOnly ? "btn-primary" : "")} onClick={() => setRiskOnly((v) => !v)}><Icon name="filter" size={14}/>風險</button>
              {canManage && <button className="btn btn-sm" onClick={() => openLocationForm(null)}><Icon name="plus" size={14}/>新增庫位</button>}
            </div>
          </div>

<div className="gis-location-grid">
            {filteredLocations.map((loc) => (
              <button key={loc.id} className={"gis-location-cell " + gisStatusTone(loc.alert_status)} onClick={() => canManage ? openLocationForm(loc) : setSelectedLoc(loc)}>
                <span className="gis-location-code">{loc.location_code}</span>
                <span className="gis-location-meta">{loc.zone_code || "未分區"} · {loc.item_count || 0} 種</span>
                <span className="gis-capbar"><i style={{ width: `${Math.min(100, Number(loc.capacity_usage || 0))}%` }}/></span>
                <span className="gis-location-items">{(loc.sample_items || []).slice(0, 2).join("、") || "暫無物資"}</span>
                {loc.low_stock_count > 0 && <em>{loc.low_stock_count}</em>}
              </button>
            ))}
            {!filteredLocations.length && <div className="gis-empty">暫無匹配庫位。</div>}
          </div>
        </div>
      </section>

{locForm && (
        <div className="gis-modal" onClick={() => setLocForm(null)}>
          <div className="gis-modal-body" onClick={(e) => e.stopPropagation()}>
            <div className="gis-panel-head">
              <span>{locForm.id ? "編輯庫位" : "新增庫位"}</span>
              <button className="btn btn-sm" onClick={() => setLocForm(null)}><Icon name="x" size={14}/>關閉</button>
            </div>
            <div className="gis-form-grid">
              <label>庫位碼<input className="input" value={locForm.location_code} onChange={(e) => setLocForm({ ...locForm, location_code: e.target.value })}/></label>
              <label>庫區<select className="input" value={locForm.zone_id} onChange={(e) => setLocForm({ ...locForm, zone_id: e.target.value })}>
                <option value="">按庫位碼自動判斷</option>
                {selectedZones.filter((z) => typeof z.id === "number").map((z) => <option key={z.id} value={z.id}>{z.zone_code} · {z.zone_name}</option>)}
              </select></label>
              <label>貨架<input className="input" value={locForm.rack_code} onChange={(e) => setLocForm({ ...locForm, rack_code: e.target.value })}/></label>
              <label>樓層<input className="input" value={locForm.floor_no} onChange={(e) => setLocForm({ ...locForm, floor_no: e.target.value })}/></label>
              <label>X 坐標<input className="input" type="number" value={locForm.x_pos} onChange={(e) => setLocForm({ ...locForm, x_pos: e.target.value })}/></label>
              <label>Y 坐標<input className="input" type="number" value={locForm.y_pos} onChange={(e) => setLocForm({ ...locForm, y_pos: e.target.value })}/></label>
              <label>容量使用率<input className="input" type="number" min="0" max="140" value={locForm.capacity_usage} onChange={(e) => setLocForm({ ...locForm, capacity_usage: e.target.value })}/></label>
              <label>狀態<select className="input" value={locForm.alert_status} onChange={(e) => setLocForm({ ...locForm, alert_status: e.target.value })}>
                {GIS_STATUS.filter(([k]) => k !== "all").map(([k, label]) => <option key={k} value={k}>{label}</option>)}
              </select></label>
            </div>
            <div className="gis-inline" style={{ justifyContent: "flex-end" }}>
              {locForm.id && <button className="btn btn-sm" style={{ color: "var(--danger)" }} onClick={deleteLocation} disabled={busy}>刪除</button>}
              <button className="btn btn-primary" onClick={saveLocation} disabled={busy}><Icon name="check" size={15}/>保存庫位</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.PageWarehouseGIS = PageWarehouseGIS;