mega-plant/components/OilsBoard.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { BookedOutTable } from "@/components/BookedOutTable";
import { QrCode } from "@/components/QrCode";
import type { OilStock } from "@/lib/oil";
import { oilQrPayload, isTank } from "@/lib/oil";
import { Download } from "lucide-react";

export type OilLogRow = { id: string; at: string; item: string; litres: number; asset: string; by: string; photo: boolean; odometer: number | null };

export { downloadPdf } from "@/lib/qr-pdf";

/**
 * One drum graphic per oil. A drum is FULL at its capacity and fills proportionally
 * below it, so 420 L of a 210 L drum reads as full with "2 drums" beside it — stock
 * above one drum's worth is still, visually, a full drum.
 */
function Drum({ stock }: { stock: OilStock }) {
  const router = useRouter();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  async function save() {
    setSaving(true);
    setError("");
    try {
      const res = await fetch(`/api/oils/${stock.item.id}/level`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ litres: value.trim() }),
      });
      const j = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(j.error || "Could not save");
      setEditing(false);
      router.refresh();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  }
  const colour = stock.item.colour || "#EDAE49";
  const pct = Math.round(stock.fillRatio * 100);
  return (
    <>
    <div
      className="flex items-end gap-3 cursor-pointer select-none"
      onDoubleClick={() => {
        if (editing) return;
        setValue(String(stock.known ? stock.litres : ""));
        setError("");
        setEditing(true);
      }}
      title="Double-click to set the level"
    >
      <svg
        width="58"
        height="86"
        viewBox="0 0 58 86"
        role="img"
        aria-label={`${stock.item.name}: ${stock.known ? `${pct}% full` : "no stock recorded"}`}
        className="shrink-0"
      >
        {/* body */}
        <rect x="14" y="8" width="30" height="72" rx="4" fill="#FFFFFF" stroke="#9CA3AF" strokeWidth="1.5" />
        {/* fill rises from the bottom */}
        {stock.known && pct > 0 && (
          <rect
            x="16"
            y={78 - (70 * pct) / 100}
            width="26"
            height={(70 * pct) / 100}
            rx="2"
            fill={colour}
          />
        )}
        {/* ribs */}
        <line x1="16" y1="32" x2="42" y2="32" stroke="#9CA3AF" strokeWidth="0.8" />
        <line x1="16" y1="56" x2="42" y2="56" stroke="#9CA3AF" strokeWidth="0.8" />
        {/* bung caps */}
        <rect x="22" y="3" width="7" height="6" rx="1" fill="#9CA3AF" />
        <rect x="33" y="5" width="5" height="4" rx="1" fill="#9CA3AF" />
      </svg>
      <div className="min-w-0">
        <div className="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 truncate">
          {stock.item.name}
        </div>
        <div className="text-2xl font-semibold tabular-nums" style={{ color: colour }}>
          {stock.known ? `${stock.litres.toLocaleString("en-ZA")} L` : "—"}
        </div>

        <div className="text-xs mt-0.5">
          {!stock.known ? (
            <span className="text-gray-400 dark:text-text-soft italic">no delivery recorded</span>
          ) : stock.isFull ? (
            <span className="font-semibold" style={{ color: colour }}>FULL</span>
          ) : stock.isEmpty ? (
            <span className="text-[#D1495B] font-semibold">EMPTY — order more</span>
          ) : (
            <span className="text-gray-500 dark:text-gray-400">
              {pct}% full · double-click to set
            </span>
          )}
        </div>
      </div>
    </div>
    {editing && (
      <div
        className="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4"
        onClick={() => !saving && setEditing(false)}
      >
        <form
          role="dialog"
          aria-modal="true"
          aria-label={`Set ${stock.item.name} level`}
          onClick={(e) => e.stopPropagation()}
          onSubmit={(e) => { e.preventDefault(); save(); }}
          onKeyDown={(e) => { if (e.key === "Escape" && !saving) setEditing(false); }}
          className="w-full max-w-sm rounded-2xl bg-white dark:bg-surface p-5 shadow-xl"
        >
          <h3 className="text-base font-semibold text-[#003D5B] dark:text-white">Set {stock.item.name} level</h3>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Currently {stock.known ? `${stock.litres.toLocaleString("en-ZA")} L` : "not recorded"}. Enter the litres really
            there; the difference is logged as an adjustment.
          </p>
          <label htmlFor={`lvl-${stock.item.id}`} className="block text-sm font-medium mt-4">Litres on hand</label>
          <div className="flex items-center gap-2 mt-1">
            <input
              id={`lvl-${stock.item.id}`}
              autoFocus
              type="number"
              inputMode="decimal"
              min={0}
              step="any"
              value={value}
              disabled={saving}
              onChange={(e) => setValue(e.target.value)}
              className="min-w-0 flex-1 min-h-[48px] rounded-lg border border-gray-300 dark:border-border bg-white dark:bg-surface px-3 text-xl tabular-nums"
            />
            <span className="text-sm">L</span>
          </div>
          {error && <div role="alert" className="text-xs text-[#D1495B] mt-2">{error}</div>}
          <div className="flex justify-end gap-2 mt-5">
            <button type="button" disabled={saving} onClick={() => setEditing(false)} className="min-h-[44px] px-4 rounded-lg text-sm border border-gray-200 dark:border-border">
              Cancel
            </button>
            <button type="submit" disabled={saving || value.trim() === ""} className="min-h-[44px] px-5 rounded-lg text-sm font-medium text-white bg-[#30638E] disabled:opacity-60">
              {saving ? "Saving…" : "Save"}
            </button>
          </div>
        </form>
      </div>
    )}
    </>
  );
}

export function OilsBoard({
  stock,
  log,
  onDownload,
  building,
}: {
  stock: OilStock[];
  log: OilLogRow[];
  onDownload: () => void;
  building: boolean;
}) {
  return (
    <div>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
        <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 flex-wrap">
          <span className="px-2.5 py-1 rounded-md bg-[#30638E]/10 text-[#30638E] font-medium">
            {stock.length} tracked item{stock.length !== 1 && "s"}
          </span>
          <span className="hidden md:inline">· oil comes from uploaded purchase orders; double-click the diesel tank to set its level</span>
        </div>
        <button
          onClick={onDownload}
          disabled={building}
          className="min-h-[44px] px-4 rounded-lg text-xs font-medium inline-flex items-center gap-2 text-white transition disabled:opacity-60"
          style={{ background: "#30638E" }}
        >
          <Download className="w-4 h-4" />
          {building ? "Building PDF…" : "Download QR labels"}
        </button>
      </div>

      {/* The two drum KPIs, one per oil, in their own colours. */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
        {stock.map((s) => (
          <div
            key={s.item.id}
            className="bg-white dark:bg-surface rounded-2xl border p-5 shadow-sm"
            style={{ borderColor: `${s.item.colour}44` }}
          >
            <div className="flex items-start justify-between gap-4">
              <Drum stock={s} />
              {/* The drum/tank label QR lives on its card, not in a list of its own. */}
              <QrCode
                value={oilQrPayload(s.item)}
                size={88}
                className="shrink-0 border border-gray-200 rounded-xl p-1.5"
                label={`${s.item.name} label code`}
              />
            </div>
            <div className="mt-4 pt-3 border-t border-gray-100 dark:border-border flex flex-wrap items-baseline gap-x-3 text-xs text-gray-500 dark:text-gray-400">
              <span>{isTank(s.item) ? "Tank" : "Drum"} {s.item.drum_litres || 210} L</span>
              {!isTank(s.item) && (
                <>
                  <span>·</span>
                  <span>{s.drumsHeld} full drum{s.drumsHeld !== 1 && "s"}</span>
                </>
              )}
              <span>·</span>
              <span className="font-mono">{s.item.code}</span>
            </div>
          </div>
        ))}
      </div>

      <BookedOutTable log={log} />
    </div>
  );
}