WFDASHDRIVER-APP/components/PoActions.tsx

'use client';

import { useRef, useState } from 'react';
import { Camera, FileText, Loader2, Check } from 'lucide-react';
import { OrderItem, PurchaseOrder } from '@/lib/types';
import { buildPoFileUrl, countInvoicePages, invoicePhotoTarget } from '@/lib/poDocs';
import { cn } from '@/lib/utils';

interface PoActionsProps {
  purchaseOrder: PurchaseOrder | null;
  items: OrderItem[];
  /** Uploads one invoice page for this PO. Rejects on failure. */
  onAddInvoicePage: (items: OrderItem[], file: File) => Promise<void>;
  /** False hides the photo button (e.g. the caller can't upload). */
  canPhoto?: boolean;
  className?: string;
}

// The two PO-level buttons on a PO header: open the PO PDF in one tap,
// and photograph the supplier invoice once for the whole PO (with
// "Page 2", "Page 3"… for multi-page invoices).
export default function PoActions({
  purchaseOrder,
  items,
  onAddInvoicePage,
  canPhoto: photoAllowed = true,
  className,
}: PoActionsProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);

  const pdfUrl = buildPoFileUrl(purchaseOrder);
  // Stock pickups have nowhere to store a photo, so a PO made only of
  // pickups gets no photo button.
  const canPhoto = photoAllowed && invoicePhotoTarget(items) !== null;
  const pages = countInvoicePages(items);

  if (!pdfUrl && !canPhoto) return null;

  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    // Reset so taking the same shot again still fires onChange.
    e.target.value = '';
    if (!file || uploading) return;
    setUploading(true);
    try {
      await onAddInvoicePage(items, file);
    } catch {
      // The page handler already told the driver; nothing to add here.
    } finally {
      setUploading(false);
    }
  };

  const poLabel = purchaseOrder?.po_number ? `PO ${purchaseOrder.po_number}` : 'this PO';

  return (
    <div className={cn('flex items-center gap-1 flex-shrink-0', className)}>
      {pdfUrl && (
        <a
          href={pdfUrl}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`Open the PDF for ${poLabel}`}
          className="h-7 px-2 rounded-md bg-[#efeaf7] text-[#6c5a99] text-[11px] font-semibold flex items-center gap-1 active:bg-[#ded5ef] transition-colors touch-manipulation"
        >
          <FileText size={11} aria-hidden="true" />
          <span>PO</span>
        </a>
      )}
      {canPhoto && (
        <>
          <button
            type="button"
            onClick={() => inputRef.current?.click()}
            disabled={uploading}
            aria-busy={uploading}
            aria-label={
              pages === 0
                ? `Take a photo of the invoice for ${poLabel}`
                : `Add page ${pages + 1} of the invoice for ${poLabel}`
            }
            className={cn(
              'h-7 px-2 rounded-md text-[11px] font-semibold flex items-center gap-1 transition-colors touch-manipulation',
              pages === 0
                ? 'bg-[#26251e] text-white active:bg-black'
                : 'bg-[#e6f1ec] text-[#125a3e] active:bg-[#cfe6db]',
              uploading && 'opacity-60',
            )}
          >
            {uploading ? (
              <Loader2 size={11} className="animate-spin" aria-hidden="true" />
            ) : pages === 0 ? (
              <Camera size={11} aria-hidden="true" />
            ) : (
              <Check size={11} aria-hidden="true" />
            )}
            <span>
              {uploading
                ? 'Uploading…'
                : pages === 0
                  ? 'Invoice'
                  : `${pages} pg · add pg ${pages + 1}`}
            </span>
          </button>
          <input
            ref={inputRef}
            type="file"
            accept="image/*"
            capture="environment"
            onChange={handleFile}
            className="hidden"
            aria-hidden="true"
            tabIndex={-1}
          />
        </>
      )}
    </div>
  );
}