'use client';

import { useState, useEffect } from 'react';
import QRScannerPage from "@/modules/sessionModule/qrScan/components/UploadScan";
import MobileScanModal from "@/modules/sessionModule/qrScan/components/MobileScanModal";
import { useNavigation } from '@/hooks/useNavigation';

// --- The Updated Scanner Page ---
export default function Scanner() {
  // Get the isMobile state from your navigation context
  const { isMobile } = useNavigation();
  const [isClient, setIsClient] = useState(false);
  const [isMobileScannerOpen, setIsMobileScannerOpen] = useState(false);

  // This effect ensures the component only renders the logic on the client-side
  // to prevent hydration mismatch errors, as the initial `isMobile` state might differ.
  useEffect(() => {
    setIsClient(true);
  }, []);

  // While waiting for the client-side to mount and determine the screen size, render nothing.
  if (!isClient) {
    return null; 
  }

  // If the hook determines it's NOT mobile, show the QR Scanner page.
  if (!isMobile) {
    return (
      <main className="p-6">
        <QRScannerPage />
      </main>
    );
  }

  // If it IS mobile, show a CTA and open mobile scanner modal.
  return (
    <main className="flex flex-col items-center justify-center min-h-screen text-center p-6 bg-gray-50 dark:bg-gray-900">
      <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg max-w-md w-full">
        <h1 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">QR Scanner</h1>
        <p className="text-gray-600 dark:text-gray-300 mb-6">
          Gunakan kamera perangkat Anda atau unggah gambar QR untuk memulai.
        </p>
        <button
          onClick={() => setIsMobileScannerOpen(true)}
          className="inline-block w-full px-6 py-3 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition-colors shadow-md"
        >
          Buka Scanner
        </button>
      </div>

      <MobileScanModal
        isOpen={isMobileScannerOpen}
        onClose={() => setIsMobileScannerOpen(false)}
      />
    </main>
  );
}