"use client";
import { useState, useEffect, useRef } from "react";
import { useZxing } from "react-zxing";
import { ensureScannerCompatibility } from "./scanner-polyfill";

export default function EnhancedQRScanner({
  onScan,
  width = 300,
  height = 300,
  disableTorch = false, // Add option to disable torch
}) {
  const [error, setError] = useState(null);
  const [isSecureContext, setIsSecureContext] = useState(true);
  const [initialized, setInitialized] = useState(false);
  const [cameraActive, setCameraActive] = useState(false);
  const [hasCameras, setHasCameras] = useState(true);
  const [scanSuccess, setScanSuccess] = useState(false);
  const [manualInputValue, setManualInputValue] = useState("");
  const [cameraPermissionDenied, setCameraPermissionDenied] = useState(false);
  const cameraStreamRef = useRef(null);
  const [retryCount, setRetryCount] = useState(0);

  // We're keeping torchEnabled state but only using it if torch is enabled
  const [torchEnabled, setTorchEnabled] = useState(false);
  const inputRef = useRef(null);

  // Define video constraints explicitly
  const videoConstraints = {
    facingMode: "environment",
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
  };

  // Setup the zxing scanner hook with explicit video constraints
  const { ref, torch } = useZxing({
    onDecodeResult(result) {
      handleDecode(result.getText());
    },
    onError(error) {
      handleError(error);
    },
    constraints: {
      video: videoConstraints,
    },
    paused: !cameraActive,
  });

  // Function to release any existing camera streams
  const releaseCameraResources = () => {
    try {
      // Release any stream that might be stored in our ref
      if (cameraStreamRef.current) {
        cameraStreamRef.current.getTracks().forEach((track) => {
          track.stop();
        });
        cameraStreamRef.current = null;
        console.log("Released existing camera resources");
      }

      // Also try to find and release any active video tracks that might be running
      navigator.mediaDevices
        .getUserMedia({ audio: false, video: false })
        .catch(() => {
          // This intentionally fails but helps release resources in some browsers
        });
    } catch (err) {
      console.error("Error releasing camera:", err);
    }
  };

  // Check if we're in a secure context and if camera is accessible
  useEffect(() => {
    // Ensure scanner compatibility
    ensureScannerCompatibility();

    // Check if we're in a secure context (https or localhost)
    const secure = window.isSecureContext;
    setIsSecureContext(secure);

    // Check if camera can be accessed
    async function checkCameraAccess() {
      try {
        // First check if MediaDevices API is supported
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          throw new Error("MediaDevices API is not supported in this browser");
        }

        // Release any existing camera streams first
        releaseCameraResources();

        // Explicitly request video permission - important to avoid the error
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: false,
        });

        // If we got a stream, we have permission - store it for later release if needed
        if (stream) {
          cameraStreamRef.current = stream;
          // We'll keep this stream active to prevent other apps from taking the camera
          // It will be released when component unmounts or when we retry camera access
        }

        // Now enumerate devices to confirm we have video devices
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(
          (device) => device.kind === "videoinput"
        );

        if (videoDevices.length === 0) {
          setError(
            "No camera detected. Please make sure your device has a camera."
          );
          setHasCameras(false);
        } else {
          setHasCameras(true);
          setCameraActive(true); // Activate camera if we have permission
        }

        setInitialized(true);
      } catch (err) {
        console.error("Camera access error:", err);

        // Handle permission denied specifically
        if (
          err.name === "NotAllowedError" ||
          err.name === "PermissionDeniedError"
        ) {
          setCameraPermissionDenied(true);
          setError(
            "Camera permission denied. Please allow camera access in your browser settings."
          );
        } else {
          setError(`Camera error: ${err.message}`);
        }

        setInitialized(true);
      }
    }

    if (isSecureContext) {
      checkCameraAccess();
    } else {
      setInitialized(true); // Still mark as initialized even if not secure
    }

    // Cleanup function to release camera when component unmounts
    return () => {
      releaseCameraResources();
    };
  }, []);

  // Toggle torch/flashlight - only used if torch isn't disabled
  const toggleTorch = () => {
    if (!disableTorch && torch) {
      setTorchEnabled(!torchEnabled);
      torch.toggled = !torchEnabled;
    }
  };

  // Handle decode result
  const handleDecode = (text) => {
    console.log("QR scan result:", text);

    if (!onScan || !text) return;

    try {
      // Show success visual
      setScanSuccess(true);
      setTimeout(() => setScanSuccess(false), 1500);

      // Call the onScan callback with the decoded text
      onScan(text);
    } catch (err) {
      console.error("Error processing QR scan result:", err);
    }
  };

  // Manually request camera access with robust error handling
  const requestCameraAccess = async () => {
    try {
      setError(null);
      setCameraActive(false);

      // First release any existing camera resources
      releaseCameraResources();

      // Add a small delay to ensure resources are properly released
      await new Promise((resolve) => setTimeout(resolve, 500));

      // Now try to get fresh camera access
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: false,
      });

      // If we got a stream, we have permission
      if (stream) {
        // Store the stream reference for potential future release
        cameraStreamRef.current = stream;

        // Release this stream since useZxing will request its own
        stream.getTracks().forEach((track) => track.stop());

        setCameraActive(true);
        setCameraPermissionDenied(false);
        setRetryCount(0); // Reset retry count on success
      }
    } catch (err) {
      console.error("Failed to get camera permission:", err);

      // Increment retry count
      setRetryCount((prev) => prev + 1);

      if (
        err.name === "NotAllowedError" ||
        err.name === "PermissionDeniedError"
      ) {
        setCameraPermissionDenied(true);
        setError(
          "Camera permission denied. Please allow camera access in your browser settings."
        );
      } else if (
        err.name === "NotReadableError" ||
        err.name === "TrackStartError" ||
        retryCount < 2 // Try a few times before showing hardware error
      ) {
        setError(
          `Camera temporarily unavailable. Please try again in a few moments.`
        );
      } else {
        setError(
          `Camera error: ${err.message}. You may need to restart your browser or device.`
        );
      }
    }
  };

  // Handle manual input submission
  const handleManualSubmit = () => {
    if (manualInputValue.trim()) {
      onScan(manualInputValue.trim());
      setManualInputValue("");
    }
  };

  // Handle camera errors
  const handleError = (error) => {
    console.error("QR Scanner error:", error);

    // Don't immediately deactivate camera on all errors
    // Some errors can be temporary
    if (
      error.name === "NotAllowedError" ||
      error.name === "PermissionDeniedError"
    ) {
      setCameraActive(false);
    }

    // More descriptive error messages
    let errorMessage = "Camera access error. ";

    if (!isSecureContext) {
      errorMessage +=
        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
    } else if (
      error.name === "NotAllowedError" ||
      error.name === "PermissionDeniedError"
    ) {
      errorMessage +=
        "Camera permission denied. Please allow camera access in your browser settings.";
      setCameraPermissionDenied(true);
    } else if (
      error.name === "NotFoundError" ||
      error.name === "DevicesNotFoundError"
    ) {
      errorMessage +=
        "No camera found. Please ensure your device has a working camera.";
    } else if (
      error.name === "NotReadableError" ||
      error.name === "TrackStartError"
    ) {
      errorMessage +=
        "Camera is already in use by another application or encountered a hardware error.";
    } else {
      errorMessage += `${
        error.message ||
        "Please check your camera permissions and refresh the page."
      }`;
    }

    setError(errorMessage);
  };

  // Handle secure context warning
  if (!isSecureContext) {
    return (
      <div className="enhanced-qr-scanner">
        <div className="scanner-error">
          <p>Camera access requires a secure context (HTTPS or localhost).</p>
          <p>
            When running locally, use http://localhost:3000 instead of your
            network IP.
          </p>
        </div>
        <ManualInput onScan={onScan} />
      </div>
    );
  }

  // Handle initialization state
  if (!initialized) {
    return (
      <div className="enhanced-qr-scanner">
        <div className="scanner-loading">Initializing camera...</div>
      </div>
    );
  }

  return (
    <div className="enhanced-qr-scanner">
      {error && (
        <div className="scanner-error">
          <p>{error}</p>
          {cameraPermissionDenied ? (
            <div className="permission-help">
              <p>To fix this issue:</p>
              <ol>
                <li>Click the camera icon in your browser's address bar</li>
                <li>Select "Allow" for camera access</li>
                <li>Refresh this page</li>
              </ol>
              <button className="retry-button" onClick={requestCameraAccess}>
                Request Camera Permission
              </button>
            </div>
          ) : (
            <button className="retry-button" onClick={requestCameraAccess}>
              Retry Camera Access
            </button>
          )}
        </div>
      )}

      {cameraActive && !error && (
        <div
          className={`scanner-container ${scanSuccess ? "scan-success" : ""}`}
          style={{ width, height }}
        >
          <video
            ref={ref}
            className="scanner-video"
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
          {scanSuccess && <div className="scan-overlay">✓</div>}

          {/* Scanning frame to help user focus */}
          <div className="scanning-frame"></div>

          {/* Only show torch button if torch is available and not disabled */}
          {torch && !disableTorch && (
            <button
              className={`torch-button ${torchEnabled ? "active" : ""}`}
              onClick={toggleTorch}
            >
              {torchEnabled ? "💡 Off" : "💡 On"}
            </button>
          )}
        </div>
      )}

      {/* Text input fallback when camera fails */}
      {(!cameraActive || error) && (
        <div className="manual-input-container">
          <p className="fallback-text">Enter the QR code manually:</p>
          <div className="input-container">
            <input
              type="text"
              placeholder="Enter QR code (e.g. QR1)"
              className="manual-input"
              value={manualInputValue}
              onChange={(e) => setManualInputValue(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  handleManualSubmit();
                }
              }}
              ref={inputRef}
            />
            <button className="submit-button" onClick={handleManualSubmit}>
              Submit
            </button>
          </div>
        </div>
      )}

      <style jsx>{`
        .enhanced-qr-scanner {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        .scanner-error {
          color: #d32f2f;
          margin-bottom: 15px;
          text-align: center;
          padding: 12px;
          background-color: #ffebee;
          border-radius: 8px;
          width: 100%;
        }

        .permission-help {
          margin-top: 12px;
          background-color: #f8f8f8;
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 10px;
          text-align: left;
        }

        .permission-help p {
          margin: 0 0 8px 0;
          font-weight: bold;
        }

        .permission-help ol {
          margin: 0 0 10px 0;
          padding-left: 20px;
        }

        .permission-help li {
          margin-bottom: 5px;
        }

        .retry-button {
          margin-top: 10px;
          padding: 8px 16px;
          background-color: #2196f3;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-weight: bold;
        }

        .retry-button:hover {
          background-color: #1976d2;
        }

        .scanner-loading {
          text-align: center;
          padding: 12px;
          background-color: #e8f5e9;
          border-radius: 8px;
          width: 100%;
          margin-bottom: 15px;
        }

        .scanner-container {
          position: relative;
          width: 100%;
          max-width: ${width}px;
          height: ${height}px;
          border-radius: 8px;
          overflow: hidden;
          border: 2px solid #ddd;
          background-color: #f5f5f5;
          transition: all 0.3s ease;
        }

        .scanning-frame {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 70%;
          height: 70%;
          transform: translate(-50%, -50%);
          border: 2px solid rgba(255, 255, 255, 0.8);
          border-radius: 8px;
          box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
          z-index: 2;
        }

        .torch-button {
          position: absolute;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          border: none;
          border-radius: 20px;
          padding: 8px 16px;
          cursor: pointer;
          z-index: 3;
          font-size: 14px;
        }

        .torch-button.active {
          background-color: rgba(255, 193, 7, 0.8);
          color: black;
        }

        .scan-success {
          border-color: #4caf50;
          box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
        }

        .scan-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(76, 175, 80, 0.5);
          color: white;
          font-size: 80px;
          animation: fade-in-out 1.5s forwards;
          z-index: 10;
        }

        @keyframes fade-in-out {
          0% {
            opacity: 0;
          }
          20% {
            opacity: 1;
          }
          80% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }

        .manual-input-container {
          margin-top: 15px;
          width: 100%;
          max-width: ${width}px;
          text-align: center;
        }

        .fallback-text {
          margin-bottom: 10px;
          color: #555;
        }

        .input-container {
          display: flex;
          width: 100%;
        }

        .manual-input {
          flex: 1;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px 0 0 4px;
          font-size: 16px;
        }

        .submit-button {
          padding: 10px 15px;
          background-color: #68543c;
          color: white;
          border: none;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
          font-weight: bold;
        }

        .submit-button:hover {
          background-color: #4a3c2a;
        }
      `}</style>
    </div>
  );
}

// Helper component for manual input
function ManualInput({ onScan }) {
  const [value, setValue] = useState("");

  const handleSubmit = () => {
    if (value.trim()) {
      onScan(value.trim());
      setValue("");
    }
  };

  return (
    <div className="manual-input-wrapper">
      <h3>Manual Code Entry</h3>
      <p>Enter the QR code value manually:</p>
      <div className="input-row">
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Enter code (e.g. QR1)"
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              handleSubmit();
            }
          }}
        />
        <button onClick={handleSubmit}>Submit</button>
      </div>

      <style jsx>{`
        .manual-input-wrapper {
          width: 100%;
          max-width: 300px;
          margin: 20px 0;
          padding: 15px;
          background-color: #f5f5f5;
          border-radius: 8px;
          text-align: center;
        }

        h3 {
          margin-top: 0;
          color: #333;
          margin-bottom: 10px;
        }

        p {
          margin-bottom: 15px;
          color: #666;
          font-size: 14px;
        }

        .input-row {
          display: flex;
        }

        input {
          flex: 1;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px 0 0 4px;
          font-size: 16px;
        }

        button {
          padding: 10px 15px;
          background-color: #68543c;
          color: white;
          border: none;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
          font-weight: bold;
        }
      `}</style>
    </div>
  );
}