import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { api } from "../api";
import Icon from "../components/Icon";

/**
 * Ziel eines gescannten Lagerort-QR (/l/<id>). Im Browser zeigt es nur den
 * Namen; das eigentliche Zuordnen (Stück → Ort) läuft über die App.
 */
export default function LocationResolve() {
  const { id } = useParams();
  const [name, setName] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    api.listLocations()
      .then((ls) => {
        const l = ls.find((x) => String(x.id) === String(id));
        if (l) setName(l.name);
        else setError("Lagerort nicht gefunden.");
      })
      .catch((e) => setError(e.message));
  }, [id]);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>Lagerort {name || id}</h1>
          <div className="sub">
            {error || "Diesen QR-Code in der App scannen (Ort zuordnen), um Einzelstücke hier einzuordnen."}
          </div>
        </div>
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
    </div>
  );
}