deckhearth/pages/scanner.js

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/router';
import Layout from '../components/Layout';
import ScannerCamera from '../components/scanner/ScannerCamera';
import ScannerReview from '../components/scanner/ScannerReview';
import ScannerCheckoutSheet from '../components/scanner/ScannerCheckoutSheet';
import { Modal, Button } from '../components/ui';
import { useAuth } from '../lib/use-auth';
import { useScannerSession } from '../lib/use-scanner-session.js';
import { useScannerQueue } from '../lib/use-scanner-queue.js';
import { useCameraScanner } from '../lib/use-camera-scanner.js';
import { useScannerIdentification } from '../lib/use-scanner-identification.js';
import { clearScannerCartStorage } from '../lib/scanner-session.js';
import { collectionDisplayName } from '../lib/collection-vocabulary.js';

export default function Scanner() {
  const { user, loading: authLoading } = useAuth();
  const router = useRouter();
  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
  const [isListPickerOpen, setIsListPickerOpen] = useState(false);
  const [showLeaveModal, setShowLeaveModal] = useState(false);
  const [listCommitError, setListCommitError] = useState(null);
  const verificationPausedRef = useRef(false);

  const { scanDefaults } = useScannerSession();
  const queue = useScannerQueue({ user, scanDefaults, deckMode: null });

  const onVerifyCardRef = useRef(null);

  const camera = useCameraScanner({
    onError: (msg) => console.error('Camera error:', msg),
    onVerifyCard: (cardTracker) => onVerifyCardRef.current?.(cardTracker),
    verificationPausedRef,
  });

  const identification = useScannerIdentification({
    onCardScanned: queue.handleCardScanned,
    onError: (msg) => console.error('Identification error:', msg),
    videoRef: camera.videoRef,
    canvasRef: camera.canvasRef,
    onVerifyCardRef,
    verificationPausedRef,
  });

  const unprocessedCount = queue.unprocessedCount;

  useEffect(() => {
    if (!authLoading && !user) {
      router.push(`/login?returnUrl=${encodeURIComponent('/scanner')}`);
    }
  }, [authLoading, user, router]);

  useEffect(() => {
    const mobileCheckoutPauses =
      typeof window !== 'undefined' &&
      window.matchMedia('(max-width: 767px)').matches &&
      isCheckoutOpen;

    verificationPausedRef.current =
      mobileCheckoutPauses ||
      isListPickerOpen ||
      Boolean(identification.disambiguation);
  }, [isCheckoutOpen, isListPickerOpen, identification.disambiguation]);

  const handleLeaveConfirm = () => {
    clearScannerCartStorage();
    queue.clearScannedCards();
    setShowLeaveModal(false);
    router.back();
  };

  const handleListPick = async (collectionId) => {
    setListCommitError(null);
    const selectedIds = queue.scannedCards
      .filter((card) => queue.selectedCards.has(card.id))
      .map((card) => card.id);

    if (selectedIds.length === 0) return;

    const successfulIds = await queue.commitSelectedToCollection(collectionId);
    if (!successfulIds?.length) {
      setListCommitError('Could not add cards to the list. Try again.');
      return;
    }

    setIsListPickerOpen(false);
  };

  if (authLoading) {
    return (
      <Layout user={null}>
        <div className="flex items-center justify-center min-h-[50vh]">
          <div
            className="animate-spin rounded-full h-12 w-12 border-b-2"
            style={{ borderColor: 'var(--text-accent)' }}
          />
        </div>
      </Layout>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <Layout user={user} chrome="immersive">
      <div className="relative flex flex-col md:flex-row h-full min-h-0 max-md:fixed max-md:inset-0">
        <div
          className="flex-1 min-h-0 min-w-0"
          inert={isCheckoutOpen ? true : undefined}
          aria-hidden={isCheckoutOpen || undefined}
        >
          <ScannerCamera
            queue={queue}
            camera={camera}
            identification={identification}
            onBack={() =>
              unprocessedCount > 0 ? setShowLeaveModal(true) : router.back()
            }
            onOpenCheckout={() => setIsCheckoutOpen(true)}
            onGalleryIdentify={(file) => identification.identifyFromGalleryFile(file)}
            latestPeekCard={queue.scannedCards[0] ?? null}
            cartCount={unprocessedCount}
            isCheckoutOpen={isCheckoutOpen}
            verificationPausedRef={verificationPausedRef}
          />
        </div>

        <div className="md:hidden">
          {isCheckoutOpen && (
            <ScannerCheckoutSheet
              queue={queue}
              onClose={() => setIsCheckoutOpen(false)}
              onOpenListPicker={() => setIsListPickerOpen(true)}
              trapActive={!isListPickerOpen}
            />
          )}
        </div>

        <div
          className="hidden md:flex md:w-[360px] md:flex-shrink-0 md:border-l md:min-h-0"
          style={{ borderColor: 'var(--border)' }}
        >
          <ScannerReview
            queue={queue}
            collections={queue.collections}
            variant="side-panel"
            onOpenListPicker={() => setIsListPickerOpen(true)}
          />
        </div>

        <Modal
          open={showLeaveModal}
          onClose={() => setShowLeaveModal(false)}
          title="Leave scanner?"
          description={`${unprocessedCount} scanned ${unprocessedCount === 1 ? 'card' : 'cards'} haven't been added yet. Leaving will clear your cart.`}
        >
          <div className="flex flex-col sm:flex-row gap-3 sm:justify-end">
            <Button variant="secondary" onClick={() => setShowLeaveModal(false)}>
              Keep scanning
            </Button>
            <Button variant="danger" onClick={handleLeaveConfirm}>
              Leave
            </Button>
          </div>
        </Modal>

        <Modal
          open={isListPickerOpen}
          onClose={() => {
            setIsListPickerOpen(false);
            setListCommitError(null);
          }}
          title="Choose a List"
          description="Add the selected cards to one of your lists."
        >
          {listCommitError && (
            <div
              className="mb-3 px-3 py-2 rounded-lg text-sm"
              style={{
                backgroundColor: 'color-mix(in srgb, var(--color-error) 12%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-error) 35%, transparent)',
                color: 'var(--color-error)',
              }}
              role="alert"
            >
              {listCommitError}
            </div>
          )}
          <ul className="space-y-2 max-h-[50vh] overflow-y-auto">
            {queue.collections.map((collection) => (
              <li key={collection.id}>
                <button
                  type="button"
                  onClick={() => handleListPick(collection.id)}
                  disabled={queue.isProcessing}
                  className="w-full text-left px-4 py-3 rounded-xl transition-opacity hover:opacity-80 disabled:opacity-50 glass-panel"
                  style={{ color: 'var(--text-primary)', minHeight: 44 }}
                >
                  {collectionDisplayName(collection)}
                </button>
              </li>
            ))}
            {queue.collections.length === 0 && (
              <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                No lists yet. Create a list from the Lists page first.
              </p>
            )}
          </ul>
        </Modal>
      </div>
    </Layout>
  );
}