// inventory-page.jsx — Інвентаризація: сесії, звірка факт vs облік, акт

function InventoryPage({ role }) {
  const sessions = window.DATA.INVENTORY_SESSIONS;
  const [openId, setOpenId] = React.useState(null);

  if (openId) {
    return <SessionDetail session={window.getInventorySession(openId)} onBack={() => setOpenId(null)} />;
  }

  const active = sessions.filter(s => s.status === "active");
  const done = sessions.filter(s => s.status === "done");
  const openIssues = sessions.reduce((sum, s) => {
    if (s.status !== "done") return sum;
    return sum + window.inventoryStats(s).issues;
  }, 0);
  const lastDone = done[0];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Інвентаризація</h1>
        <div className="page-sub">
          <span>{sessions.length} {window.plural(sessions.length, "сесія", "сесії", "сесій")}</span>
          <span className="dot"></span>
          <span>{active.length ? <b style={{color: "var(--c-amber)"}}>{active.length} активна</b> : "немає активних"}</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Активних сесій</div>
          <div className="kpi-value" style={{color: active.length ? "var(--c-amber)" : "var(--ink)"}}>{active.length}</div>
          <div className="kpi-sub">{active.length ? "звірка триває" : "усі завершені"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Остання завершена</div>
          <div className="kpi-value" style={{fontSize: 18}}>{lastDone ? window.formatDate(lastDone.dateEnd) : "—"}</div>
          <div className="kpi-sub">{lastDone ? lastDone.title : ""}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Майна в обліку</div>
          <div className="kpi-value">{window.DATA.ASSETS.filter(a => a.status !== "written_off").length}</div>
          <div className="kpi-sub">підлягає звірці</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Виявлено розбіжностей</div>
          <div className="kpi-value" style={{color: openIssues ? "var(--late)" : "var(--c-green-deep)"}}>{openIssues}</div>
          <div className="kpi-sub">за останніми актами</div>
        </div>
      </div>

      <div className="toolbar" style={{marginTop: 24}}>
        <h2 className="section-h2" style={{margin: 0}}>Сесії інвентаризації</h2>
        <button className="btn btn-primary" style={{marginLeft: "auto"}}>
          <window.Icon.Plus /> Нова інвентаризація
        </button>
      </div>

      <div className="inv-session-list">
        {sessions.map(s => {
          const stats = window.inventoryStats(s);
          const chair = window.getTeam(s.chair);
          const pct = Math.round(stats.checked / stats.planned * 100);
          return (
            <button key={s.id} className="inv-session-card" onClick={() => setOpenId(s.id)}>
              <div className="inv-session-top">
                <div>
                  <div className="inv-session-title">{s.title}</div>
                  <div className="inv-session-meta td-mono">{s.order}</div>
                </div>
                <span className={`status-tag tone-${s.status === "active" ? "amber" : "live"}`}>
                  {s.status === "active" ? "Триває" : "Завершено"}
                </span>
              </div>

              <div className="inv-session-stats">
                <div className="iss-stat"><span className="iss-num">{stats.planned}</span><span className="iss-lbl">в обсязі</span></div>
                <div className="iss-stat"><span className="iss-num" style={{color: "var(--c-green-deep)"}}>{stats.match}</span><span className="iss-lbl">збіг</span></div>
                <div className="iss-stat"><span className="iss-num" style={{color: stats.issues ? "var(--late)" : "var(--ink-3)"}}>{stats.issues}</span><span className="iss-lbl">розбіжн.</span></div>
                <div className="iss-stat"><span className="iss-num" style={{color: "var(--ink-3)"}}>{stats.pending}</span><span className="iss-lbl">лишилось</span></div>
              </div>

              <div className="inv-session-foot">
                <div className="inv-progress-track"><div className="inv-progress-fill" style={{width: `${pct}%`, background: s.status === "active" ? "var(--c-amber)" : "var(--c-green-deep)"}}></div></div>
                <span className="inv-progress-lbl">{pct}%</span>
              </div>
              <div className="inv-session-sub">
                {s.scope} · комісія {s.commission.length} ос. · голова {chair ? chair.name.split(" ")[0] : "—"}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ============ ДЕТАЛІ СЕСІЇ ============
function SessionDetail({ session, onBack }) {
  // Локальний стан звірки — щоб можна було «сканувати QR» в активній сесії
  const [recon, setRecon] = React.useState(() => ({ ...session.reconcile }));
  const [lastScan, setLastScan] = React.useState(null);

  const isActive = session.status === "active";
  const chair = window.getTeam(session.chair);
  const planned = session.plannedIds;
  const pending = planned.filter(id => !recon[id]);

  const stats = (() => {
    let match = 0, issues = 0, checked = 0;
    planned.forEach(id => {
      const r = recon[id];
      if (r) { checked++; r.result === "match" ? match++ : issues++; }
    });
    return { planned: planned.length, checked, match, issues, pending: planned.length - checked };
  })();
  const pct = Math.round(stats.checked / stats.planned * 100);

  const scanNext = () => {
    if (!pending.length) return;
    const id = pending[0];
    const asset = window.getAsset(id);
    // Симуляція: майно знаходиться там, де має бути (збіг)
    setRecon(prev => ({ ...prev, [id]: { result: "match", scanned: true } }));
    setLastScan(asset);
  };

  return (
    <div className="page">
      <button className="back-link" onClick={onBack}>← Усі сесії інвентаризації</button>

      <div className="page-head" style={{marginTop: 10}}>
        <div style={{display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap"}}>
          <h1 className="page-h1" style={{margin: 0}}>{session.title}</h1>
          <span className={`status-tag tone-${isActive ? "amber" : "live"}`}>{isActive ? "Триває" : "Завершено"}</span>
        </div>
        <div className="page-sub">
          <span className="td-mono">{session.order}</span>
          <span className="dot"></span>
          <span>{window.formatDate(session.dateStart)}{session.dateEnd ? ` – ${window.formatDate(session.dateEnd)}` : ""}</span>
          <span className="dot"></span>
          <span>{session.scope}</span>
        </div>
      </div>

      {/* Комісія */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Інвентаризаційна комісія</h2>
          <span className="section-sub">голова: {chair ? chair.name : "—"}</span>
        </div>
        <div className="commission-row">
          {session.commission.map(pid => {
            const p = window.getTeam(pid);
            if (!p) return null;
            return (
              <div key={pid} className="commission-chip">
                <span className="mini-avatar">{p.initials}</span>
                <div>
                  <div style={{fontSize: 12.5, fontWeight: 500, color: "var(--ink)"}}>{p.name}{pid === session.chair && " · голова"}</div>
                  <div style={{fontSize: 11, color: "var(--ink-3)"}}>{p.role}</div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* KPI звірки */}
      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi"><div className="kpi-label">В обсязі</div><div className="kpi-value">{stats.planned}</div><div className="kpi-sub">одиниць майна</div></div>
        <div className="kpi"><div className="kpi-label">Звірено</div><div className="kpi-value">{stats.checked}</div><div className="kpi-sub">{pct}% обсягу</div></div>
        <div className="kpi"><div className="kpi-label">Збіг з обліком</div><div className="kpi-value" style={{color: "var(--c-green-deep)"}}>{stats.match}</div><div className="kpi-sub">факт = облік</div></div>
        <div className="kpi"><div className="kpi-label">Розбіжності</div><div className="kpi-value" style={{color: stats.issues ? "var(--late)" : "var(--ink)"}}>{stats.issues}</div><div className="kpi-sub">нестача / надлишок</div></div>
      </div>

      {/* QR-сканування для активної сесії */}
      {isActive && (
        <div className="scan-panel">
          <div className="scan-left">
            <div className="scan-title">Обхід зі сканером</div>
            <div className="scan-sub">{stats.pending > 0 ? `Залишилось перевірити ${stats.pending} ${window.plural(stats.pending, "одиницю", "одиниці", "одиниць")}` : "Усе майно перевірено — можна формувати акт"}</div>
            {lastScan && <div className="scan-last">✓ Відскановано: <span className="td-mono">{lastScan.invNo}</span> — {lastScan.name}</div>}
          </div>
          <button className="btn btn-primary scan-btn" onClick={scanNext} disabled={stats.pending === 0}>
            <span style={{fontSize: 16}}>▣</span> Сканувати QR
          </button>
        </div>
      )}

      {/* Відомість звірки */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Звіряльна відомість</h2>
          <span className="section-sub">факт проти облікових даних</span>
        </div>
        <table className="data-table">
          <thead>
            <tr>
              <th>Інв. №</th>
              <th>Найменування</th>
              <th>За обліком (МВО / локація)</th>
              <th>Результат</th>
              <th>Примітка</th>
            </tr>
          </thead>
          <tbody>
            {planned.map(id => {
              const a = window.getAsset(id);
              if (!a) return null;
              const r = recon[id] || { result: "pending" };
              const rr = window.RECONCILE_RESULT[r.result];
              const holder = window.getTeam(a.holder);
              return (
                <tr key={id}>
                  <td><span className="td-mono inv-no">{a.invNo}</span></td>
                  <td><div className="cell-name">{a.name}</div></td>
                  <td style={{fontSize: 12, color: "var(--ink-3)"}}>{holder ? holder.name.split(" ")[0] : "—"} · {window.ASSET_LOCATIONS[a.location]}</td>
                  <td><span className={`status-tag tone-${rr.tone}`}>{rr.label}</span></td>
                  <td style={{fontSize: 12, color: "var(--ink-2)"}}>
                    {r.result === "wrong_location" && r.foundAt
                      ? <>факт: {window.ASSET_LOCATIONS[r.foundAt]}{r.note ? ` — ${r.note}` : ""}</>
                      : (r.note || (r.result === "pending" ? <span style={{color: "var(--ink-4)"}}>очікує перевірки</span> : "—"))}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>

      {/* Розбіжності */}
      {stats.issues > 0 && (
        <section className="section">
          <div className="section-head">
            <h2 className="section-h2">Виявлені розбіжності</h2>
            <span className="section-sub">{stats.issues} {window.plural(stats.issues, "позиція", "позиції", "позицій")}</span>
          </div>
          <div className="discrep-list">
            {planned.filter(id => recon[id] && recon[id].result !== "match").map(id => {
              const a = window.getAsset(id);
              const r = recon[id];
              const rr = window.RECONCILE_RESULT[r.result];
              return (
                <div key={id} className={`discrep-item tone-${rr.tone}`}>
                  <span className={`status-tag tone-${rr.tone}`}>{rr.label}</span>
                  <div className="discrep-main">
                    <div style={{fontSize: 13, fontWeight: 500, color: "var(--ink)"}}><span className="td-mono inv-no" style={{marginRight: 8}}>{a.invNo}</span>{a.name}</div>
                    {r.note && <div style={{fontSize: 12, color: "var(--ink-2)", marginTop: 2}}>{r.note}</div>}
                  </div>
                </div>
              );
            })}
          </div>
        </section>
      )}

      {/* Дії */}
      <div className="inv-actions">
        <button className="btn">Звіряльна відомість (ІНВ-3) PDF</button>
        {isActive
          ? <button className="btn btn-primary" disabled={stats.pending > 0}>{stats.pending > 0 ? `Завершити (лишилось ${stats.pending})` : "Сформувати акт інвентаризації"}</button>
          : <>
              <button className="btn">Акт інвентаризації PDF</button>
              {session.actSigned && <span className="act-signed">✓ {session.actNumber} · підписано комісією</span>}
            </>}
      </div>
    </div>
  );
}

window.InventoryPage = InventoryPage;