deckhearth/pages/scanner.js

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/router';
import Layout from '../components/Layout';
import ScannerSetup from '../components/scanner/ScannerSetup';
import ScannerCamera from '../components/scanner/ScannerCamera';
import ScannerReview from '../components/scanner/ScannerReview';
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';

export default function Scanner() {
  const { user, loading: authLoading } = useAuth();
  const router = useRouter();
  const [phase, setPhase] = useState('setup');
  const [deckMode, setDeckMode] = useState(null);

  const {
    sessionDestination,
    setSessionDestination,
    gameFilter,
    setGameFilter,
    scanDefaults,
    setScanDefaults,
    scanHistory,
    saveScanToHistory,
  } = useScannerSession();

  const queue = useScannerQueue({ user, sessionDestination, scanDefaults, deckMode });

  const onVerifyCardRef = useRef(null);
  const verificationPausedRef = useRef(false);

  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,
  });

  useEffect(() => {
    if (!authLoading && !user) {
      router.push('/login');
    }
  }, [authLoading, user, router]);

  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}>
      {phase === 'setup' && (
        <ScannerSetup
          sessionDestination={sessionDestination}
          onDestinationChange={setSessionDestination}
          gameFilter={gameFilter}
          onGameFilterChange={setGameFilter}
          collections={queue.collections}
          decks={queue.decks}
          deckMode={deckMode}
          onDeckModeChange={setDeckMode}
          onStartScanning={() => setPhase('scanning')}
          scanHistory={scanHistory}
        />
      )}

      {phase === 'scanning' && (
        <ScannerCamera
          queue={queue}
          camera={camera}
          identification={identification}
          deckMode={deckMode}
          onReview={() => setPhase('review')}
          onStopSession={() => {
            camera.stopCamera();
            setPhase('review');
          }}
          sessionDestination={sessionDestination}
        />
      )}

      {phase === 'review' && (
        <ScannerReview
          queue={queue}
          collections={queue.collections}
          decks={queue.decks}
          deckMode={deckMode}
          onContinueScanning={() => setPhase('scanning')}
          onNewSession={() => {
            queue.clearScannedCards();
            setPhase('setup');
          }}
          sessionDestination={sessionDestination}
        />
      )}
    </Layout>
  );
}