mega-plant/components/OilsStock.tsx

"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import type { OilStock } from "@/lib/oil";
import { oilQrPayload } from "@/lib/oil";
import { OilsBoard, type OilLogRow } from "@/components/OilsBoard";
import { buildOilLabelsPdf, downloadPdf } from "@/lib/qr-pdf";

export function OilsStock({ stock, log }: { stock: OilStock[]; log: OilLogRow[] }) {
  const router = useRouter();
  const [, startTransition] = useTransition();
  const [building, setBuilding] = useState(false);

  async function download() {
    setBuilding(true);
    try {
      const bytes = await buildOilLabelsPdf(
        stock.map((s) => ({
          name: s.item.name,
          code: s.item.code,
          colour: s.item.colour,
          drum_litres: s.item.drum_litres,
        })),
        oilQrPayload,
      );
      downloadPdf(bytes, "mega-plant-oil-diesel-labels.pdf");
    } catch {
      alert("Could not build the PDF. Please try again.");
    } finally {
      setBuilding(false);
    }
  }

  return <OilsBoard stock={stock} log={log} onDownload={download} building={building} />;
}