mega-plant/components/InvoiceUploader.tsx

"use client";

import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { UploadCloud, FileText, Loader2, CheckCircle2, AlertCircle } from "lucide-react";

const MAX_BYTES = 20 * 1024 * 1024;

// Drag-and-drop / tap-to-browse PDF upload against an invoice's `source_pdf` field.
// Accepts PDF only, matching the server route — the client check is here to fail fast,
// the server check is the one that actually guards the data.
export function InvoiceUploader({ invoiceNo }: { invoiceNo: string }) {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const [dragging, setDragging] = useState(false);
  const [state, setState] = useState<{ status: "idle" | "uploading" | "done" | "error"; message?: string }>({
    status: "idle",
  });

  async function send(file: File) {
    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
      setState({ status: "error", message: "Only PDF invoices are accepted" });
      return;
    }
    if (file.size > MAX_BYTES) {
      setState({ status: "error", message: `${(file.size / 1048576).toFixed(1)} MB — limit is 20 MB` });
      return;
    }
    setState({ status: "uploading" });
    const body = new FormData();
    body.append("file", file);
    body.append("invoiceNo", invoiceNo);
    try {
      const res = await fetch("/api/invoices/upload", { method: "POST", body });
      const data = await res.json().catch(() => ({ ok: false, error: "Unexpected response" }));
      if (!data.ok) setState({ status: "error", message: data.error || "Upload failed" });
      else {
        setState({ status: "done", message: `${data.file} attached` });
        router.refresh();
      }
    } catch {
      setState({ status: "error", message: "Could not reach the server" });
    }
  }

  return (
    <div>
      {/* Whole zone is the tap target — button semantics on a div, so it stays one
          44px-tall control instead of a small inner button. */}
      <div
        role="button"
        tabIndex={0}
        aria-label={`Upload the invoice PDF for ${invoiceNo}`}
        onClick={() => inputRef.current?.click()}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            inputRef.current?.click();
          }
        }}
        onDragOver={(e) => {
          e.preventDefault();
          setDragging(true);
        }}
        onDragLeave={() => setDragging(false)}
        onDrop={(e) => {
          e.preventDefault();
          setDragging(false);
          const file = e.dataTransfer.files?.[0];
          if (file) send(file);
        }}
        className={`flex items-center gap-3 min-h-[44px] px-4 py-3 rounded-xl border-2 border-dashed cursor-pointer transition ${
          dragging
            ? "border-[#00798C] bg-[#00798C]/10"
            : "border-gray-200 dark:border-white/10 hover:border-[#00798C]/50 hover:bg-gray-50 dark:hover:bg-white/[0.02]"
        }`}
      >
        {state.status === "uploading" ? (
          <Loader2 className="w-5 h-5 animate-spin text-[#00798C] shrink-0" />
        ) : state.status === "done" ? (
          <CheckCircle2 className="w-5 h-5 text-[#00798C] shrink-0" />
        ) : (
          <UploadCloud className="w-5 h-5 text-[#00798C] shrink-0" />
        )}
        <div className="min-w-0 text-left">
          <div className="text-sm font-medium text-[#003D5B] dark:text-white">
            {state.status === "uploading"
              ? "Uploading…"
              : state.status === "done"
                ? state.message
                : "Drop the invoice PDF here, or tap to browse"}
          </div>
          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
            PDF only · up to 20 MB · attaches to {invoiceNo}
          </div>
        </div>
      </div>

      <input
        ref={inputRef}
        type="file"
        accept="application/pdf,.pdf"
        className="sr-only"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) send(file);
          e.target.value = ""; // allow re-picking the same file
        }}
      />

      {state.status === "error" && (
        <p className="flex items-start gap-1.5 text-sm text-[#D1495B] mt-2">
          <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
          {state.message}
        </p>
      )}
    </div>
  );
}

// Shown once a document is attached, with a link that opens it. The link points at our
// own authenticated proxy, not at PocketBase's /api/files — the invoices collection is
// rule-locked, so a direct PB link 404s in the browser.
export function AttachedDocument({
  invoiceNo,
  invoiceId,
}: {
  invoiceNo: string;
  invoiceId: string;
}) {
  const [showUploader, setShowUploader] = useState(false);

  return (
    <div className="flex items-center gap-3 flex-wrap">
      <a
        href={`/api/invoices/${invoiceId}/document`}
        target="_blank"
        rel="noreferrer"
        className="inline-flex items-center gap-2 min-h-[44px] px-3 rounded-lg text-sm font-medium text-[#00798C] hover:bg-[#00798C]/10 transition"
      >
        <FileText className="w-4 h-4 shrink-0" />
        Open invoice PDF
      </a>
      <button
        type="button"
        onClick={() => setShowUploader((s) => !s)}
        className="inline-flex items-center gap-2 min-h-[44px] px-3 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 transition"
      >
        {showUploader ? "Cancel" : "Replace"}
      </button>
      {showUploader && (
        <div className="w-full">
          <InvoiceUploader invoiceNo={invoiceNo} />
        </div>
      )}
    </div>
  );
}