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

/**
 * Ziel eines gescannten QR-Codes (/i/<uid>): löst die UID auf und öffnet den
 * zugehörigen Artikel mit dem Einzelstück im Blick.
 */
export default function ItemResolve() {
  const { uid } = useParams();
  const navigate = useNavigate();
  const [error, setError] = useState(null);

  useEffect(() => {
    let ok = true;
    api.itemByUid(uid)
      .then((item) => {
        if (ok) navigate(`/products/${item.product_id}?item=${encodeURIComponent(item.uid)}`,
          { replace: true });
      })
      .catch((err) => { if (ok) setError(err.message); });
    return () => { ok = false; };
  }, [uid, navigate]);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>Einzelstück {uid}</h1>
          <div className="sub">{error ? error : "Wird geöffnet…"}</div>
        </div>
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
    </div>
  );
}