Vorrania/web/src/pages/MinStock.jsx

import { useEffect, useMemo, useState } from "react";
import { api } from "../api";
import { useAuth } from "../auth";
import Icon from "../components/Icon";
import DataTable from "../components/DataTable";
import CategoryPathLabel, { pathParts } from "../components/CategoryPathLabel";
import { categoryInfoMap } from "../categoryPath";
import { locationPathById } from "../locationPath";
import { fmt } from "../units";

// Artikeleinheit eines Produkts (Gebinde oder Produkteinheit) – wie in der Produktliste.
// Wichtig: Zahl (articleUnit) und Bezeichnung (articleLabel) müssen zusammenpassen –
// bei vorhandener Packungsgröße also „Packung" und NICHT die Basiseinheit, sonst steht
// z.B. „1 Gramm" statt „1 Packung" (500 g) da.
const articleUnit = (p) => (p.package_size && p.package_size > 0 ? p.package_size : (p.unit_factor || 1));
const articleLabel = (p) => (
  p.package_size && p.package_size > 0 ? (p.package_label || "Packung") : (p.unit_name || "Stück")
);

/**
 * Zentrale Liste aller Mindestbestände: je Produkt/Gruppe der Gesamt-Wert und die
 * Bedarfe je Lagerort, inline editierbar. Ergänzt die einzelnen Produkt-/Gruppen-
 * Formulare um einen Überblick an einem Ort.
 */
const EMPTY_DRAFT = { kind: "product", targetId: "", scope: "global", locId: "", menge: "" };

export default function MinStock() {
  const { isAdmin } = useAuth();
  const [products, setProducts] = useState([]);
  const [groups, setGroups] = useState([]);
  const [locations, setLocations] = useState([]);
  const [categories, setCategories] = useState([]);
  const [error, setError] = useState(null);
  // „+ hinzufügen"-Dialog: Ziel (Produkt/Gruppe) → Geltung (Gesamt/Lagerort) → Menge.
  const [showAdd, setShowAdd] = useState(false);
  const [draft, setDraft] = useState(EMPTY_DRAFT);

  async function load() {
    try {
      const [ps, gs, ls, cs] = await Promise.all([
        api.listProducts("", ""), api.listGroups(), api.listLocations(), api.listCategories(),
      ]);
      setProducts(ps); setGroups(gs); setLocations(ls); setCategories(cs);
    } catch (err) { setError(err.message); }
  }
  useEffect(() => { load(); }, []);

  const catInfo = useMemo(() => categoryInfoMap(categories), [categories]);

  const rows = useMemo(() => {
    const out = [];
    for (const p of products) {
      out.push({
        key: `p:${p.id}:global`, kind: "product", scope: "global", entity: p,
        name: p.name, catId: p.category_id, ort: "(Gesamt)",
        soll: p.min_stock_display, unit: p.min_stock_unit_label || articleLabel(p),
        bestand: p.stock / articleUnit(p), bestandUnit: articleLabel(p),
      });
      for (const l of (p.location_min_stocks || [])) {
        out.push({
          key: `p:${p.id}:${l.location_id}`, kind: "product", scope: "loc", entity: p,
          locId: l.location_id, name: p.name, catId: p.category_id,
          ort: locationPathById(l.location_id, locations) || "?",
          soll: l.min_stock, unit: articleLabel(p), bestand: null,
        });
      }
    }
    for (const g of groups) {
      out.push({
        key: `g:${g.id}:global`, kind: "group", scope: "global", entity: g,
        name: g.name, catId: null, ort: "(Gesamt)",
        soll: g.min_stock, unit: g.min_stock_unit_name || "", bestand: g.stock, bestandUnit: g.min_stock_unit_name || "",
      });
      for (const l of (g.location_min_stocks || [])) {
        out.push({
          key: `g:${g.id}:${l.location_id}`, kind: "group", scope: "loc", entity: g,
          locId: l.location_id, name: g.name, catId: null,
          ort: locationPathById(l.location_id, locations) || "?",
          soll: l.min_stock, unit: g.min_stock_unit_name || "", bestand: null,
        });
      }
    }
    return out;
  }, [products, groups, locations]);

  // Eine Lagerort-Bedarfsliste mit einem geänderten/entfernten Eintrag neu bauen.
  const mergeLoc = (list, locId, num) => (list || [])
    .map((e) => ({ location_id: e.location_id, min_stock: e.location_id === locId ? num : e.min_stock }))
    .filter((e) => e.min_stock != null && e.min_stock > 0);

  async function saveSoll(row, value) {
    const roh = String(value).trim().replace(",", ".");
    const num = roh === "" ? null : Number(roh);
    if (num !== null && (Number.isNaN(num) || num < 0)) return;
    if (num === (row.soll ?? null)) return;
    try {
      if (row.kind === "product" && row.scope === "global") {
        const p = row.entity;
        // Faktor aus dem bestehenden Wert ableiten (erhält die erfasste Einheit);
        // ohne bestehenden Wert in Artikeleinheiten setzen.
        if (p.min_stock != null && p.min_stock_display) {
          const faktor = p.min_stock / p.min_stock_display;
          await api.updateProduct(p.id, { min_stock: num == null ? null : Math.round(num * faktor) });
        } else {
          await api.updateProduct(p.id, {
            min_stock: num == null ? null : Math.round(num * articleUnit(p)),
            min_stock_in_packages: (p.package_size || 0) > 0,
            min_stock_unit_id: null,
          });
        }
      } else if (row.kind === "product" && row.scope === "loc") {
        await api.setProductLocationMinStock(row.entity.id, mergeLoc(row.entity.location_min_stocks, row.locId, num));
      } else if (row.kind === "group" && row.scope === "global") {
        await api.updateGroup(row.entity.id, { min_stock: num });
      } else if (row.kind === "group" && row.scope === "loc") {
        await api.setGroupLocationMinStock(row.entity.id, mergeLoc(row.entity.location_min_stocks, row.locId, num));
      }
      await load();
    } catch (err) { setError(err.message); }
  }

  // Ausgewähltes Ziel des Dialogs + dessen Einheit (Menge wird darin erfasst).
  const draftTarget = draft.kind === "product"
    ? products.find((p) => String(p.id) === String(draft.targetId))
    : groups.find((g) => String(g.id) === String(draft.targetId));
  const draftUnit = draft.kind === "product"
    ? (draftTarget ? articleLabel(draftTarget) : "")
    : (draftTarget ? (draftTarget.min_stock_unit_name || "Stück") : "");

  function resetAdd() {
    setShowAdd(false);
    setDraft(EMPTY_DRAFT);
  }

  async function saveNew() {
    setError(null);
    const roh = String(draft.menge).trim().replace(",", ".");
    const num = roh === "" ? null : Number(roh);
    if (!draft.targetId) { setError("Bitte ein Ziel wählen."); return; }
    if (num == null || Number.isNaN(num) || num <= 0) { setError("Bitte eine Menge größer 0 angeben."); return; }
    if (draft.scope === "loc" && !draft.locId) { setError("Bitte einen Lagerort wählen."); return; }
    try {
      if (draft.kind === "product") {
        const p = draftTarget;
        if (draft.scope === "global") {
          // Menge in der Artikeleinheit erfasst → in Basiseinheiten speichern,
          // wie beim Inline-Editieren ohne bestehenden Wert.
          await api.updateProduct(p.id, {
            min_stock: Math.round(num * articleUnit(p)),
            min_stock_in_packages: (p.package_size || 0) > 0,
            min_stock_unit_id: null,
          });
        } else {
          await api.setProductLocationMinStock(p.id, mergeLoc(p.location_min_stocks, draft.locId, num));
        }
      } else {
        const g = draftTarget;
        if (draft.scope === "global") {
          await api.updateGroup(g.id, { min_stock: num });
        } else {
          await api.setGroupLocationMinStock(g.id, mergeLoc(g.location_min_stocks, draft.locId, num));
        }
      }
      resetAdd();
      await load();
    } catch (err) { setError(err.message); }
  }

  const columns = [
    { key: "art", header: "Art", width: 96, filterText: (r) => (r.kind === "group" ? "Gruppe" : "Produkt"),
      render: (r) => <span className="badge nowrap">{r.kind === "group" ? "Gruppe" : "Produkt"}</span> },
    { key: "name", header: "Name", grow: true, min: 180,
      filterText: (r) => r.name, sortValue: (r) => r.name,
      render: (r) => <span className="strong">{r.name}</span> },
    { key: "category", header: "Kategorie", width: 200,
      filterText: (r) => (r.catId != null ? (catInfo.get(r.catId)?.path || "") : ""),
      filterValues: (r) => (r.catId != null ? (catInfo.get(r.catId)?.tokens || [""]) : [""]),
      filterOptionLabel: (v) => (v === "" ? "(Leere)" : <CategoryPathLabel parts={pathParts(v)} />),
      render: (r) => (r.catId != null
        ? <CategoryPathLabel parts={catInfo.get(r.catId)?.parts} fallback="–" />
        : <span className="muted">–</span>) },
    { key: "ort", header: "Ort", width: 220, filterText: (r) => r.ort, sortValue: (r) => r.ort,
      render: (r) => (r.scope === "global" ? <span className="muted">{r.ort}</span> : r.ort) },
    { key: "soll", header: "Mindestbestand", width: 150,
      sortValue: (r) => r.soll ?? -1,
      render: (r) => (isAdmin ? (
        <input type="number" step="any" min="0" style={{ marginTop: 0, minWidth: 80 }}
          key={r.soll ?? "none"} defaultValue={r.soll ?? ""}
          onBlur={(e) => saveSoll(r, e.target.value)} />
      ) : (r.soll != null ? fmt(r.soll) : "–")) },
    { key: "unit", header: "Einheit", width: 120, filterText: (r) => r.unit || "",
      render: (r) => <span className="muted">{r.unit || "–"}</span> },
    { key: "bestand", header: "Bestand", width: 120, align: "num",
      render: (r) => (r.bestand != null ? `${fmt(r.bestand)} ${r.bestandUnit || ""}` : <span className="muted">–</span>) },
  ];

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>Mindestbestände</h1>
          <div className="sub">
            Gesamt- und Lagerort-Bedarfe von Produkten und Gruppen an einem Ort{isAdmin ? " – Werte direkt editierbar" : ""}.
          </div>
        </div>
        {isAdmin && (
          <button className="btn primary" onClick={() => (showAdd ? resetAdd() : setShowAdd(true))}>
            <Icon name={showAdd ? "close" : "plus"} size={16} />
            {showAdd ? "Abbrechen" : "Mindestbestand"}
          </button>
        )}
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}

      {isAdmin && showAdd && (
        <div className="card" style={{ marginBottom: "var(--sp-3)" }}>
          <div className="card-head"><Icon name="plus" /><h2>Mindestbestand hinzufügen</h2></div>
          <div className="row">
            <label className="seg-label">
              Ziel
              <div className="segmented">
                <button type="button" className={draft.kind === "product" ? "active" : ""}
                  onClick={() => setDraft({ ...draft, kind: "product", targetId: "" })}>Gegenstand / Lebensmittel</button>
                <button type="button" className={draft.kind === "group" ? "active" : ""}
                  onClick={() => setDraft({ ...draft, kind: "group", targetId: "" })}>Gruppe</button>
              </div>
            </label>
          </div>
          <div className="row">
            <label className="grow">
              {draft.kind === "product" ? "Produkt / Gegenstand" : "Gruppe"}
              <select value={draft.targetId} onChange={(e) => setDraft({ ...draft, targetId: e.target.value })}>
                <option value="">– wählen –</option>
                {(draft.kind === "product"
                  ? [...products].sort((a, b) => a.name.localeCompare(b.name, "de"))
                  : [...groups].sort((a, b) => a.name.localeCompare(b.name, "de"))
                ).map((t) => (
                  <option key={t.id} value={t.id}>
                    {t.name}{draft.kind === "product" && t.brand ? ` · ${t.brand}` : ""}
                  </option>
                ))}
              </select>
            </label>
          </div>
          <div className="row">
            <label className="seg-label">
              Geltung
              <div className="segmented">
                <button type="button" className={draft.scope === "global" ? "active" : ""}
                  onClick={() => setDraft({ ...draft, scope: "global", locId: "" })}>Gesamt</button>
                <button type="button" className={draft.scope === "loc" ? "active" : ""}
                  onClick={() => setDraft({ ...draft, scope: "loc" })}>Lagerort</button>
              </div>
            </label>
            {draft.scope === "loc" && (
              <label className="grow" style={{ maxWidth: 360 }}>
                Lagerort
                <select value={draft.locId} onChange={(e) => setDraft({ ...draft, locId: e.target.value })}>
                  <option value="">– wählen –</option>
                  {locations.map((l) => (
                    <option key={l.id} value={l.id}>{locationPathById(l.id, locations)}</option>
                  ))}
                </select>
              </label>
            )}
          </div>
          <div className="row">
            <label className="grow" style={{ maxWidth: 300 }}>
              Menge{draftUnit ? ` (in ${draftUnit})` : ""}
              <input type="number" step="any" min="0" value={draft.menge}
                onChange={(e) => setDraft({ ...draft, menge: e.target.value })} placeholder="z.B. 2" />
            </label>
          </div>
          <div className="field-inline" style={{ marginTop: "var(--sp-2)" }}>
            <button className="btn primary" onClick={saveNew}>Speichern</button>
            <button className="btn" onClick={resetAdd}>Abbrechen</button>
          </div>
        </div>
      )}

      <div className="card">
        <DataTable id="min-stock" columns={columns} rows={rows}
          getRowKey={(r) => r.key} empty="Noch keine Mindestbestände." />
      </div>
    </div>
  );
}