'use client';

import { useEffect, useRef, useState } from 'react';
import { ScanSearch } from 'lucide-react';
import { RUN_EVENT, invoiceCheckBase } from '@/lib/invoiceCheck';
import { cn } from '@/lib/utils';

interface InvoiceCheckProps {
  poNumber: string;
  /** Invoice pages already uploaded for this PO; the helper needs at least one. */
  pages: number;
  size?: 'sm' | 'lg';
}

// Beta helper trigger. Renders nothing unless the driver switched it on in
// Settings → Beta, so the normal PO buttons are untouched. It asks
// InvoiceMatchHost (on the page) to match the invoice, either when the driver
// taps the button or automatically right after a new invoice page uploads.
export default function InvoiceCheck({ poNumber, pages, size = 'sm' }: InvoiceCheckProps) {
  const [enabled, setEnabled] = useState(false);
  const prevPages = useRef<number | null>(null);

  const trigger = () => window.dispatchEvent(new CustomEvent(RUN_EVENT, { detail: { poNumber } }));

  useEffect(() => {
    setEnabled(Boolean(invoiceCheckBase()));
  }, []);

  // A new invoice page just went up: check it straight away.
  useEffect(() => {
    const before = prevPages.current;
    prevPages.current = pages;
    if (before !== null && pages > before && poNumber && invoiceCheckBase()) trigger();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pages]);

  if (!enabled || !poNumber || pages === 0) return null;

  const lg = size === 'lg';
  return (
    <button
      type="button"
      onClick={trigger}
      aria-label={`Match the invoice for PO ${poNumber} to your items (beta)`}
      className={cn(
        lg
          ? 'h-12 w-full rounded-xl text-[15px] font-semibold flex items-center justify-center gap-2 touch-manipulation'
          : 'h-9 px-3 rounded-lg text-[13px] font-semibold flex items-center gap-1.5 touch-manipulation',
        'bg-[#efeaf7] text-[#6c5a99] active:bg-[#ded5ef]',
      )}
    >
      <ScanSearch size={lg ? 18 : 14} aria-hidden="true" />
      <span>{lg ? 'Match invoice (beta)' : 'Match'}</span>
    </button>
  );
}