'use client';

import { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import ScanCard from './ScanCard';
import CameraPreview from './CameraPreview';

export default function QRScannerPage() {
  const [isScanning, setIsScanning] = useState(false);
  const [scanResult, setScanResult] = useState<string | null>(null);
  const [serverMessage, setServerMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [scanSequence, setScanSequence] = useState(0);
  const router = useRouter();
  const didRedirectRef = useRef(false);

  const handleScanResult = (result: string) => {
    didRedirectRef.current = false;
    setScanResult(result);
    setError(null);
    setScanSequence(prev => prev + 1);
  };

  const handleServerResponse = (message: string) => {
    setServerMessage(message);
  };

  const handleError = (errorMessage: string) => {
    setError(errorMessage);
    setScanResult(null);
    setServerMessage(null);
  };

  useEffect(() => {
    if (!scanResult) {
      didRedirectRef.current = false;
    }
  }, [scanResult]);

  // Redirect otomatis ketika QR berhasil terbaca dan berisi URL/path
  useEffect(() => {
    if (!scanResult || didRedirectRef.current) return;

    const value = scanResult.trim();
    try {
      const url = new URL(value);
      didRedirectRef.current = true;
      if (typeof window !== 'undefined' && url.origin === window.location.origin) {
        router.push(url.pathname + url.search + url.hash);
      } else {
        window.location.href = url.toString();
      }
    } catch {
      // Bukan URL absolut; jika relative path internal, lakukan push
      if (value.startsWith('/')) {
        didRedirectRef.current = true;
        router.push(value);
      }
    }
  }, [scanResult, scanSequence, router]);

  return (
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">QR Code Scanner</h1>
          <p className="text-gray-600 dark:text-gray-400">Scan the QR on the charger to start charging!</p>
        </div>

        <div className="grid lg:grid-cols-3 gap-6">
          {/* Left side - Camera preview */}
          <div className="lg:col-span-2">
            <CameraPreview
              isScanning={isScanning}
              onScanResult={handleScanResult}
              onServerResponse={handleServerResponse}
              onError={handleError}
            />
          </div>

          {/* Right side - Control cards */}
          <div className="lg:col-span-1 space-y-6">
            <ScanCard
              isScanning={isScanning}
              setIsScanning={setIsScanning}
              onScanResult={handleScanResult}
              onServerResponse={handleServerResponse}
              onError={handleError}
            />

            {/* Results Card */}
            {(scanResult || serverMessage || error) && (
              <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Results</h3>
                
                {scanResult && (
                  <div className="mb-4 p-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700">
                    <p className="text-green-800 dark:text-green-200 font-medium mb-2">QR Code Content:</p>
                    <p className="text-sm font-mono break-words text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-800/30 p-2 rounded">{scanResult}</p>
                  </div>
                )}

                {serverMessage && (
                  <div className="mb-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
                    <p className="text-blue-800 dark:text-blue-200 font-medium mb-2">Server Response:</p>
                    <p className="text-sm text-blue-700 dark:text-blue-300">{serverMessage}</p>
                  </div>
                )}

                {error && (
                  <div className="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700">
                    <p className="text-red-800 dark:text-red-200 font-medium mb-2">Error:</p>
                    <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
                  </div>
                )}

                <button
                  onClick={() => {
                    setScanResult(null);
                    setServerMessage(null);
                    setError(null);
                  }}
                  className="mt-4 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
                >
                  Clear results
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
  );
}