Vorrania/web/src/components/EtikettenVorlagen.jsx

import { useCallback, useEffect, useState } from "react";
import { api } from "../api";
import Icon from "./Icon";
import { useConfirm } from "../confirm";
import { useToast } from "../toast";
import { asTree } from "../categoryTree";

/**
 * Gespeicherte Zusammenstellungen für den Etikettenexport.
 *
 * Ersetzt die beiden früheren Abschnitte mit festen Spalten. Der Gewinn sind
 * nicht die Vorlagen an sich, sondern die frei wählbaren Spalten: Erst dadurch
 * kommen eigene Felder wie eine Kabellänge oder die Kapazität einer Powerbank
 * überhaupt aufs Etikett.
 *
 * Die CSV baut der Server – dort liegen die Feldwerte, und dort lässt sich das
 * Ergebnis prüfen.
 */

const ARTEN = [
  { wert: "items", label: "Einzelstücke", hinweis: "Ein Etikett je Stück, mit UID und QR." },
  { wert: "products", label: "Artikel", hinweis: "Ein Etikett je Artikel statt je Stück." },
  { wert: "locations", label: "Lagerorte", hinweis: "Ein Etikett je Lagerort, mit dessen QR." },
];

const TRENNZEICHEN = [
  { wert: ",", label: "Komma" },
  { wert: ";", label: "Semikolon" },
  { wert: "\t", label: "Tabulator" },
];

export default function EtikettenVorlagen({ onError }) {
  const confirm = useConfirm();
  const toast = useToast();
  const [vorlagen, setVorlagen] = useState(null);
  const [offen, setOffen] = useState(null);      // id der bearbeiteten Vorlage
  const [busy, setBusy] = useState(false);

  const laden = useCallback(async () => {
    try { setVorlagen(await api.etikettenVorlagen()); }
    catch (err) { onError(err.message); setVorlagen([]); }
  }, [onError]);

  useEffect(() => { laden(); }, [laden]);

  async function anlegen() {
    const name = await confirm({
      title: "Neue Vorlage",
      message: "Wie soll sie heißen? Zum Beispiel „Kabelexport“.",
      confirmLabel: "Anlegen",
      prompt: true,
    });
    if (!name || typeof name !== "string") return;
    setBusy(true);
    try {
      const neu = await api.etikettenVorlageAnlegen({
        name: name.trim(),
        art: "items",
        spalten: ["qr", "uid", "produkt"],
        kategorie_ids: [],
        trennzeichen: ",",
      });
      await laden();
      setOffen(neu.id);
      toast(`Vorlage „${neu.name}“ angelegt.`);
    } catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  async function loeschen(v) {
    const ok = await confirm({
      title: `Vorlage „${v.name}“ löschen?`,
      message: "Die hinterlegte P-touch-Datei geht mit verloren.",
      confirmLabel: "Löschen",
      danger: true,
    });
    if (!ok) return;
    try {
      await api.etikettenVorlageLoeschen(v.id);
      if (offen === v.id) setOffen(null);
      await laden();
    } catch (err) { onError(err.message); }
  }

  async function csv(v) {
    setBusy(true);
    try { await api.etikettenCsv(v.id, v.name); }
    catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  return (
    <section className="card">
      <div className="card-head">
        <Icon name="download" /><h2>Etiketten-Vorlagen</h2>
        <button type="button" className="btn sm" style={{ marginLeft: "auto" }}
          disabled={busy} onClick={anlegen}>
          <Icon name="plus" size={14} />Neue Vorlage
        </button>
      </div>
      <p className="muted small">
        Eine Vorlage hält fest, worauf sie sich bezieht, welche Spalten in welcher
        Reihenfolge exportiert werden und wie gefiltert wird – samt eigener Felder.
        Dazu lässt sich die P-touch-Datei (.lbx) hinterlegen.
      </p>

      {vorlagen == null && <div className="muted">Lädt…</div>}
      {vorlagen && vorlagen.length === 0 && (
        <p className="muted small">Noch keine Vorlage.</p>
      )}

      <ul className="clean-list" style={{ marginTop: "var(--sp-3)" }}>
        {(vorlagen || []).map((v) => (
          <li key={v.id} style={{ flexDirection: "column", alignItems: "stretch" }}>
            <div className="cell-row" style={{ gap: "var(--sp-2)" }}>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span className="strong">{v.name}</span>{" "}
                <span className="muted small">
                  {ARTEN.find((a) => a.wert === v.art)?.label || v.art}
                  {" · "}{v.spalten.length} Spalten
                  {v.datei_name ? " · mit Vorlage" : ""}
                </span>
              </span>
              <button type="button" className="btn sm" disabled={busy}
                onClick={() => csv(v)}>
                <Icon name="download" size={14} />CSV
              </button>
              {v.datei_name && (
                <button type="button" className="btn sm ghost"
                  onClick={() => api.etikettenDatei(v.id, v.datei_name).catch((e) => onError(e.message))}>
                  <Icon name="download" size={14} />.lbx
                </button>
              )}
              <button type="button" className="btn-icon"
                title={offen === v.id ? "Zuklappen" : "Bearbeiten"}
                onClick={() => setOffen(offen === v.id ? null : v.id)}>
                <Icon name="edit" size={16} />
              </button>
              <button type="button" className="btn-icon danger" title="Löschen"
                onClick={() => loeschen(v)}>
                <Icon name="trash" size={16} />
              </button>
            </div>
            {offen === v.id && (
              <VorlageEditor vorlage={v} onGespeichert={laden} onError={onError} />
            )}
          </li>
        ))}
      </ul>
    </section>
  );
}

/** Bearbeiten einer einzelnen Vorlage. */
function VorlageEditor({ vorlage, onGespeichert, onError }) {
  const toast = useToast();
  const [art, setArt] = useState(vorlage.art);
  const [spalten, setSpalten] = useState(vorlage.spalten);
  const [katIds, setKatIds] = useState(vorlage.kategorie_ids);
  const [trenn, setTrenn] = useState(vorlage.trennzeichen);
  const [moeglich, setMoeglich] = useState([]);
  const [kategorien, setKategorien] = useState([]);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    api.listCategories().then(setKategorien).catch(() => {});
  }, []);

  // Welche Spalten es gibt, hängt von Bezugsart UND Kategorien ab – die eigenen
  // Felder kommen schließlich von dort.
  useEffect(() => {
    let aktiv = true;
    api.etikettenSpalten(art, katIds)
      .then((s) => { if (aktiv) setMoeglich(s); })
      .catch((err) => onError(err.message));
    return () => { aktiv = false; };
  }, [art, katIds, onError]);

  const titelVon = (schluessel) =>
    moeglich.find((m) => m.schluessel === schluessel)?.titel || schluessel;
  const offen = moeglich.filter((m) => !spalten.includes(m.schluessel));

  function verschieben(index, richtung) {
    const ziel = index + richtung;
    if (ziel < 0 || ziel >= spalten.length) return;
    const kopie = [...spalten];
    [kopie[index], kopie[ziel]] = [kopie[ziel], kopie[index]];
    setSpalten(kopie);
  }

  async function speichern() {
    setBusy(true);
    try {
      await api.etikettenVorlageAendern(vorlage.id, {
        art, spalten, kategorie_ids: katIds, trennzeichen: trenn,
      });
      await onGespeichert();
      toast("Vorlage gespeichert.");
    } catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  async function dateiWaehlen(e) {
    const datei = e.target.files?.[0];
    e.target.value = "";           // damit dieselbe Datei erneut gewählt werden kann
    if (!datei) return;
    setBusy(true);
    try {
      await api.etikettenDateiHochladen(vorlage.id, datei);
      await onGespeichert();
      toast("P-touch-Vorlage hinterlegt.");
    } catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  // Einzelstuecke gibt es nur bei Gegenstaenden; Artikel kann es in beiden
  // Welten geben, dort also nicht einschraenken.
  const baum = asTree(kategorien).filter(
    (c) => art === "products" || c.tracking === "object",
  );

  return (
    <div className="card-sub" style={{ marginTop: "var(--sp-3)" }}>
      <div className="row">
        <label className="grow" style={{ maxWidth: 260 }}>
          Bezugsart
          <select value={art} onChange={(e) => { setArt(e.target.value); setSpalten([]); }}>
            {ARTEN.map((a) => <option key={a.wert} value={a.wert}>{a.label}</option>)}
          </select>
        </label>
        <label style={{ maxWidth: 200 }}>
          Trennzeichen
          <select value={trenn} onChange={(e) => setTrenn(e.target.value)}>
            {TRENNZEICHEN.map((t) => (
              <option key={t.wert} value={t.wert}>{t.label}</option>
            ))}
          </select>
        </label>
      </div>
      <p className="muted small mt-0">{ARTEN.find((a) => a.wert === art)?.hinweis}</p>

      {art !== "locations" && (
        <>
          <span className="muted small">Kategorien (leer = alle)</span>
          <div className="kat-check-liste" style={{ marginTop: "var(--sp-1)" }}>
            {baum.map((c) => (
              <label key={c.id} className="check-inline"
                style={{ margin: 0, paddingLeft: (c.depth || 0) * 16 }}>
                <input type="checkbox" checked={katIds.includes(c.id)}
                  onChange={(e) => setKatIds(e.target.checked
                    ? [...katIds, c.id]
                    : katIds.filter((k) => k !== c.id))} />
                <span>{c.name}</span>
              </label>
            ))}
          </div>
          <p className="muted small">
            Eigene Felder hängen am Artikel, nicht am einzelnen Stück – alle Stücke
            eines Artikels tragen denselben Wert.
          </p>
        </>
      )}

      <div className="grid-2" style={{ marginTop: "var(--sp-3)" }}>
        <div>
          <span className="muted small">Spalten (in dieser Reihenfolge)</span>
          {spalten.length === 0 && (
            <p className="muted small">Noch keine gewählt – es greifen dann die Standardspalten.</p>
          )}
          <ul className="clean-list" style={{ marginTop: "var(--sp-2)" }}>
            {spalten.map((s, i) => (
              <li key={s}>
                <span style={{ flex: 1, minWidth: 0 }}>{titelVon(s)}</span>
                <button type="button" className="btn-icon" title="Nach oben"
                  disabled={i === 0} onClick={() => verschieben(i, -1)}>↑</button>
                <button type="button" className="btn-icon" title="Nach unten"
                  disabled={i === spalten.length - 1} onClick={() => verschieben(i, 1)}>↓</button>
                <button type="button" className="btn-icon danger" title="Entfernen"
                  onClick={() => setSpalten(spalten.filter((x) => x !== s))}>
                  <Icon name="close" size={14} />
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <span className="muted small">Verfügbar</span>
          {offen.length === 0 && <p className="muted small">Alle Spalten sind gewählt.</p>}
          <ul className="clean-list" style={{ marginTop: "var(--sp-2)" }}>
            {offen.map((m) => (
              <li key={m.schluessel}>
                <button type="button" className="btn sm ghost"
                  onClick={() => setSpalten([...spalten, m.schluessel])}>
                  <Icon name="plus" size={14} />{m.titel}
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="row" style={{ marginTop: "var(--sp-3)", alignItems: "center" }}>
        <button type="button" className="btn primary" disabled={busy} onClick={speichern}>
          {busy ? "Speichern…" : "Speichern"}
        </button>
        <label style={{ margin: 0 }}>
          <span className="muted small">P-touch-Vorlage (.lbx)</span>
          <input type="file" accept=".lbx" onChange={dateiWaehlen} disabled={busy} />
        </label>
        {vorlage.datei_name && (
          <button type="button" className="btn sm ghost"
            onClick={async () => {
              try {
                await api.etikettenDateiEntfernen(vorlage.id);
                await onGespeichert();
              } catch (err) { onError(err.message); }
            }}>
            <Icon name="trash" size={14} />{vorlage.datei_name} entfernen
          </button>
        )}
      </div>
      <p className="muted small">
        Eine .lbx merkt sich den Pfad zu ihrer Datenquelle. Auf einem fremden
        Rechner muss die CSV in P-touch einmal neu verknüpft werden – die Datei
        dabeizuhaben erspart trotzdem das Suchen.
      </p>
    </div>
  );
}