// warehouse-pages.jsx — Склад: реєстр майна + інвентаризація

// ============ QR-ЕТИКЕТКА (плейсхолдер) ============
// Детермінований патерн зі квадратів на основі інв. номера.
function AssetQR({ code, size = 88 }) {
  const grid = 9;
  const cells = React.useMemo(() => {
    let h = 2166136261;
    for (let i = 0; i < code.length; i++) { h ^= code.charCodeAt(i); h = Math.imul(h, 16777619); }
    const out = [];
    let x = h >>> 0;
    for (let i = 0; i < grid * grid; i++) {
      x ^= x << 13; x ^= x >>> 17; x ^= x << 5; x >>>= 0;
      out.push(x % 100 < 48);
    }
    // три кутові маркери як у QR
    const mark = (r, c) => { for (let dr = 0; dr < 3; dr++) for (let dc = 0; dc < 3; dc++) out[(r+dr)*grid+(c+dc)] = !(dr===1&&dc===1) || true; };
    [[0,0],[0,grid-3],[grid-3,0]].forEach(([r,c]) => {
      for (let dr=0; dr<3; dr++) for (let dc=0; dc<3; dc++) {
        const edge = dr===0||dr===2||dc===0||dc===2;
        out[(r+dr)*grid+(c+dc)] = edge;
      }
    });
    return out;
  }, [code]);
  return (
    <div className="asset-qr" style={{ width: size, height: size, gridTemplateColumns: `repeat(${grid}, 1fr)` }}>
      {cells.map((on, i) => <span key={i} className={on ? "on" : ""}></span>)}
    </div>
  );
}

// ============ СКЛАД / МАЙНО ============
function WarehousePage({ role }) {
  const assets = window.DATA.ASSETS;
  const cats = window.ASSET_CATEGORIES;
  const [filterCat, setFilterCat] = React.useState("all");
  const [filterStatus, setFilterStatus] = React.useState("all");
  const [openId, setOpenId] = React.useState(null);

  const live = assets.filter(a => a.status !== "written_off");
  const totalCost = live.reduce((s, a) => s + a.cost, 0);
  const totalResidual = live.reduce((s, a) => s + window.computeDepreciation(a).residual, 0);
  const inRepair = assets.filter(a => a.status === "repair").length;
  const writtenOff = assets.filter(a => a.status === "written_off").length;

  let shown = assets;
  if (filterCat !== "all") shown = shown.filter(a => a.cat === filterCat);
  if (filterStatus !== "all") shown = shown.filter(a => a.status === filterStatus);
  shown = [...shown].sort((a, b) => a.invNo.localeCompare(b.invNo, "uk"));

  const catStats = cats.map(c => {
    const list = live.filter(a => a.cat === c.id);
    return { cat: c, count: list.length, cost: list.reduce((s, a) => s + a.cost, 0) };
  });

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Майно компанії</h1>
        <div className="page-sub">
          <span>{live.length} {window.plural(live.length, "одиниця", "одиниці", "одиниць")} в обліку</span>
          <span className="dot"></span>
          <span>первісна <b style={{color: "var(--ink)"}}>{window.formatMoney(totalCost)} ₴</b></span>
          <span className="dot"></span>
          <span>залишкова {window.formatMoney(totalResidual)} ₴</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(5, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Одиниць в обліку</div>
          <div className="kpi-value">{live.length}</div>
          <div className="kpi-sub">{cats.length} категорії</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Первісна вартість</div>
          <div className="kpi-value" style={{fontSize: 22}}>{window.formatMoney(totalCost)} <span style={{fontSize: 14, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">сумарно по балансу</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Залишкова вартість</div>
          <div className="kpi-value" style={{fontSize: 22, color: "var(--c-green-deep)"}}>{window.formatMoney(totalResidual)} <span style={{fontSize: 14, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">з урахуванням зносу</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">На ремонті</div>
          <div className="kpi-value" style={{color: inRepair ? "var(--c-amber)" : "var(--ink)"}}>{inRepair}</div>
          <div className="kpi-sub">{inRepair ? "потребує уваги" : "усе справне"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Списано</div>
          <div className="kpi-value" style={{color: "var(--ink-3)"}}>{writtenOff}</div>
          <div className="kpi-sub">в архіві актів</div>
        </div>
      </div>

      {/* Категорії + схема інвентарних номерів */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Категорії та інвентарні номери</h2>
          <span className="section-sub">номер присвоюється автоматично за маскою</span>
        </div>
        <div className="cat-grid">
          {catStats.map(s => (
            <button
              key={s.cat.id}
              className={`cat-card ${filterCat === s.cat.id ? "is-active" : ""}`}
              onClick={() => setFilterCat(filterCat === s.cat.id ? "all" : s.cat.id)}
            >
              <div className="cat-card-head">
                <span className="cat-icon"><window.Ico e={s.cat.icon} /></span>
                <span className="mask-chip">УБП-{s.cat.prefix}-0001</span>
              </div>
              <div className="cat-name">{s.cat.label}</div>
              <div className="cat-amount">{window.formatMoney(s.cost)} <span>₴</span></div>
              <div className="cat-count">{s.count} {window.plural(s.count, "одиниця", "одиниці", "одиниць")} · наст. {window.nextInvNo(s.cat.id)}</div>
            </button>
          ))}
        </div>
      </section>

      {/* Фільтр + таблиця */}
      <div className="toolbar" style={{marginTop: 28}}>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filterStatus === "all" ? "is-active" : ""}`} onClick={() => setFilterStatus("all")}>Усі</button>
          <button className={`filter-pill-item ${filterStatus === "active" ? "is-active" : ""}`} onClick={() => setFilterStatus("active")}>В експлуатації</button>
          <button className={`filter-pill-item ${filterStatus === "repair" ? "is-active" : ""}`} onClick={() => setFilterStatus("repair")}>На ремонті</button>
          <button className={`filter-pill-item ${filterStatus === "written_off" ? "is-active" : ""}`} onClick={() => setFilterStatus("written_off")}>Списано</button>
        </div>
        {filterCat !== "all" && (
          <button className="btn" style={{padding: "6px 10px", fontSize: 12}} onClick={() => setFilterCat("all")}>
            {window.getAssetCategory(filterCat).label} ×
          </button>
        )}
        <button className="btn btn-primary" style={{marginLeft: "auto"}}>
          <window.Icon.Plus /> Додати майно
        </button>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Інв. №</th>
            <th>Найменування</th>
            <th>Категорія</th>
            <th>МВО</th>
            <th>Локація</th>
            <th className="num-col">Залишкова</th>
            <th>Знос</th>
            <th>Статус</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {shown.map(a => {
            const cat = window.getAssetCategory(a.cat);
            const holder = window.getTeam(a.holder);
            const dep = window.computeDepreciation(a);
            const st = window.ASSET_STATUS[a.status];
            return (
              <tr key={a.id} className="is-clickable" onClick={() => setOpenId(a.id)}>
                <td><span className="td-mono inv-no">{a.invNo}</span></td>
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 11}}>
                    <div className="cat-mini-icon"><window.Ico e={cat.icon} /></div>
                    <div>
                      <div className="cell-name">{a.name}</div>
                      <div className="cell-sub">{a.model}</div>
                    </div>
                  </div>
                </td>
                <td><span className="status-tag tone-neutral">{cat.short}</span></td>
                <td>
                  {holder
                    ? <div style={{display: "flex", alignItems: "center", gap: 7}}>
                        <span className="mini-avatar">{holder.initials}</span>
                        <span style={{fontSize: 12.5, color: "var(--ink-2)"}}>{holder.name.split(" ")[0]}</span>
                      </div>
                    : <span style={{color: "var(--ink-4)"}}>—</span>}
                </td>
                <td style={{fontSize: 12, color: "var(--ink-3)"}}>{window.ASSET_LOCATIONS[a.location]}</td>
                <td className="num-col">
                  {dep.depreciable
                    ? <span className="num-bold">{window.formatMoney(dep.residual)} ₴</span>
                    : <span style={{color: "var(--ink-4)"}}>—</span>}
                </td>
                <td style={{minWidth: 120}}>
                  {dep.depreciable
                    ? <div className="wear-cell">
                        <div className="wear-track"><div className="wear-fill" style={{width: `${dep.wearPct}%`}}></div></div>
                        <span className="wear-pct">{dep.wearPct}%</span>
                      </div>
                    : <span style={{fontSize: 11.5, color: "var(--ink-4)"}}>не амортизується</span>}
                </td>
                <td><span className={`status-tag tone-${st.tone}`}>{st.label}</span></td>
                <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Картка →</button></td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {openId && <AssetDrawer asset={window.getAsset(openId)} onClose={() => setOpenId(null)} />}
    </div>
  );
}

function AssetDrawer({ asset, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const cat = window.getAssetCategory(asset.cat);
  const holder = window.getTeam(asset.holder);
  const dep = window.computeDepreciation(asset);
  const st = window.ASSET_STATUS[asset.status];
  const warrantyActive = asset.warrantyUntil && asset.warrantyUntil !== "—" && new Date(asset.warrantyUntil) >= new Date(window.SYS_DATE || "2026-05-29");

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer drawer-wide">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <span className="status-tag tone-neutral">{cat.label}</span>
          <span className={`status-tag tone-${st.tone}`}>{st.label}</span>
        </div>
        <div className="drawer-body">
          {/* Шапка з QR */}
          <div className="asset-hero">
            <div className="asset-hero-main">
              <div className="td-mono inv-no inv-no-lg">{asset.invNo}</div>
              <h1 className="drawer-h1" style={{margin: "4px 0 4px"}}>{asset.name}</h1>
              <div style={{fontSize: 13, color: "var(--ink-3)"}}>{asset.model}</div>
            </div>
            <div className="asset-qr-wrap">
              <AssetQR code={asset.invNo} />
              <button className="btn btn-ghost" style={{fontSize: 11.5, padding: "3px 8px"}}>Друк етикетки</button>
            </div>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Облікові дані</div>
            <dl className="info-grid">
              <div><dt>Серійний / VIN / ключ</dt><dd className="td-mono" style={{fontSize: 12.5}}>{asset.serial}</dd></div>
              <div><dt>Дата придбання</dt><dd>{window.formatDate(asset.bought)}</dd></div>
              <div><dt>Первісна вартість</dt><dd className="num" style={{fontWeight: 600}}>{window.formatMoney(asset.cost)} ₴</dd></div>
              <div><dt>{asset.subscription ? "Підписка діє до" : "Гарантія до"}</dt>
                <dd>{asset.warrantyUntil === "—" ? "—" : <span style={{color: warrantyActive ? "var(--c-green-deep)" : "var(--ink-3)"}}>{window.formatDate(asset.warrantyUntil)}{warrantyActive ? " · діє" : " · закінчилась"}</span>}</dd></div>
            </dl>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Закріплення (МВО та локація)</div>
            <div className="assign-row">
              <div className="assign-person">
                {holder && <span className="mini-avatar">{holder.initials}</span>}
                <div>
                  <div style={{fontSize: 13.5, fontWeight: 500, color: "var(--ink)"}}>{holder ? holder.name : "—"}</div>
                  <div style={{fontSize: 12, color: "var(--ink-3)"}}>{holder ? holder.role : "матеріально відповідальна особа"}</div>
                </div>
              </div>
              <div className="assign-loc"><window.Ico name="mapPin" size={13} style={{verticalAlign: "-0.15em"}} /> {window.ASSET_LOCATIONS[asset.location]}</div>
            </div>
          </div>

          {/* Амортизація */}
          <div className="drawer-section">
            <div className="drawer-section-h">Знос та амортизація</div>
            {dep.depreciable ? (
              <>
                <div className="dep-bar">
                  <div className="dep-bar-fill" style={{width: `${dep.wearPct}%`}}></div>
                  <span className="dep-bar-label">{dep.wearPct}% зносу · {dep.months} з {asset.lifeMonths} міс</span>
                </div>
                <dl className="info-grid" style={{marginTop: 12}}>
                  <div><dt>Метод</dt><dd>прямолінійний</dd></div>
                  <div><dt>Амортизація / міс</dt><dd className="num">{window.formatMoney(dep.monthly)} ₴</dd></div>
                  <div><dt>Накопичений знос</dt><dd className="num">{window.formatMoney(dep.accumulated)} ₴</dd></div>
                  <div><dt>Залишкова вартість</dt><dd className="num" style={{fontWeight: 600, color: "var(--c-green-deep)"}}>{window.formatMoney(dep.residual)} ₴</dd></div>
                </dl>
              </>
            ) : (
              <div className="hint-box" style={{margin: 0}}>
                Ліцензія / підписка — не амортизується. Облік ведеться за вартістю придбання та строком дії.
              </div>
            )}
          </div>

          {/* Обслуговування */}
          <div className="drawer-section">
            <div className="drawer-section-h">Обслуговування та ремонти</div>
            {asset.maintenance && asset.maintenance.length > 0 ? (
              <div className="maint-list">
                {asset.maintenance.map((m, i) => (
                  <div key={i} className="maint-item">
                    <div className="maint-date td-mono">{window.formatDate(m.date)}</div>
                    <div className="maint-main">
                      <div className="maint-what">{m.what}</div>
                      <div className="maint-by">{m.by}</div>
                    </div>
                    <div className="maint-cost">{m.cost == null ? <span style={{color: "var(--c-amber)"}}>в роботі</span> : m.cost === 0 ? "—" : `${window.formatMoney(m.cost)} ₴`}</div>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{fontSize: 12.5, color: "var(--ink-4)", padding: "4px 0"}}>Записів про обслуговування немає.</div>
            )}
          </div>

          {asset.status === "written_off" && (
            <div className="drawer-section">
              <div className="drawer-section-h">Списання</div>
              <div className="hint-box" style={{margin: 0}}>
                <b>Списано {window.formatDate(asset.writeOffDate)}.</b> {asset.writeOffReason}
              </div>
            </div>
          )}
        </div>
        <div className="drawer-foot">
          {asset.status === "active" && <button className="btn">Перемістити / передати</button>}
          {asset.status === "active" && <button className="btn">На ремонт</button>}
          {asset.status === "repair" && <button className="btn btn-primary">Повернути в експлуатацію</button>}
          {asset.status !== "written_off" && <button className="btn" style={{marginLeft: "auto", color: "var(--late)"}}>Списати</button>}
        </div>
      </aside>
    </>
  );
}

window.WarehousePage = WarehousePage;
window.AssetQR = AssetQR;
