"use client";

import { useEffect, useRef, useState } from "react";
import { Html5Qrcode } from "html5-qrcode";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";

import { useSession } from "next-auth/react";
import Loading from "../components/Loading";

export default function ScanPage() {
  const scannerRef = useRef<Html5Qrcode | null>(null);
  const router = useRouter();
  const successSoundRef = useRef<HTMLAudioElement | null>(null);
  const { data: session, status } = useSession();
  const currentUser = session?.user as any;

  const [scanned, setScanned] = useState("");
  const [item, setItem] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [isPaused, setIsPaused] = useState(false);

  const lastScanRef = useRef<number>(0);
  const processingRef = useRef(false);

  const normalize = (text: string) => {
    return text
      .toString()
      .trim()
      .replace(/\r/g, "")
      .replace(/\n/g, "")
      .replace(/\t/g, "")
      .replace(/\s+/g, "")
      .replace(/^0+/, "")
      .toUpperCase();
  };

  /* ================= SCANNER ================= */
  useEffect(() => {
      // 1. tunggu session selesai load
      if (status === "loading") return;

      // 2. kalau belum login
      if (status === "unauthenticated") {
        router.replace("/login");
        return;
      }
    const allowedRoles = ["ADMIN", "OPERATOR", "SUPERVISOR"];

    if (!allowedRoles.includes(currentUser?.role)) {
      router.replace("/");
      return;
    }

    const scanner = new Html5Qrcode("reader");
    scannerRef.current = scanner;

    const config: any = {
      fps: 14,

      // 🔥 FIX UTAMA: CENTERED QR BOX (NO OFFSET BOTTOM ISSUE)
      qrbox: (w: number, h: number) => {
        const minEdge = Math.min(w, h);

        return {
          width: Math.floor(minEdge * 0.75),
          height: Math.floor(minEdge * 0.75), // 🔥 square = NO SHIFT DOWN
        };
      },

      experimentalFeatures: {
        useBarCodeDetectorIfSupported: true,
      },

      rememberLastUsedCamera: true,

      // 🔥 FIX PENTING: remove vertical shifting bug
      aspectRatio: 1.0,
    };

    scanner.start(
      { facingMode: "environment" },
      config,

      async (decodedText: string) => {
        const now = Date.now();

        if (processingRef.current) return;
        if (now - lastScanRef.current < 900) return;

        processingRef.current = true;
        lastScanRef.current = now;

        const clean = normalize(decodedText);
        setScanned(clean);

        setIsPaused(true);
        await scanner.pause(true);

        try {
          new Audio("/beep.mp3").play();
        } catch {}

        setLoading(true);

        try {
          const res = await fetch(
            `/api/items/scan/${encodeURIComponent(clean)}`,
            { cache: "no-store" }
          );

          const json = await res.json();

          if (json.item){
            successSoundRef.current?.play().catch(() => {});
            setItem(json.item);
          }
          else setItem(null);
        } catch (err) {
          console.error(err);
        }

        setLoading(false);

        setTimeout(() => {
          processingRef.current = false;
        }, 600);
      },

      () => {}
    );

    return () => {
      scanner.stop().catch(() => {});
    };
  }, [status, router]);

  useEffect(() => {
    successSoundRef.current = new Audio("/sound/click.wav");
    successSoundRef.current.preload = "auto";
  }, []);

  /* ================= RESET ================= */
  const handleScanAgain = async () => {
    setScanned("");
    setItem(null);
    setLoading(false);

    processingRef.current = false;
    lastScanRef.current = 0;

    await scannerRef.current?.resume();
    setIsPaused(false);
  };

    // optional safety (biar tidak flash UI)
    if (!session) return null;

  return (
    <div className="min-h-screen bg-linear-to-b from-green-50 via-emerald-50 to-lime-50 p-4 space-y-5">

      {/* HEADER + ACTIONS (FIX REQUEST KAMU) */}
      <div className="rounded-3xl p-5 bg-white/80 backdrop-blur-xl border border-green-100 shadow-xl space-y-3">

        <div className="flex items-center justify-between">
          <h1 className="text-xl font-bold text-green-900">
            📷 Scan QR / Barcode
          </h1>

          <div className="flex gap-2">

            <button
              onClick={() => router.push(item ? `/items/${item.id}` : "#")}
              disabled={!item}
              className="px-4 py-2 text-sm rounded-xl bg-green-600 text-white font-semibold shadow disabled:opacity-40"
            >
              Detail
            </button>

            <button
              onClick={handleScanAgain}
              className="px-4 py-2 text-sm rounded-xl bg-white border border-green-200 shadow"
            >
              Scan Lagi
            </button>

          </div>
        </div>

        <p className="text-sm text-green-800/60">
          {isPaused ? "⏸ Paused - tekan Scan Lagi untuk lanjut" : "Arahkan QR ke dalam kotak hijau"}
        </p>

      </div>

      {/* CAMERA */}
      <div className="relative rounded-3xl overflow-hidden border border-green-100 shadow-xl bg-black">

        <div
          id="reader"
          className="w-full h-70 md:h-90"
        />

        {/* 🔥 OVERLAY FIXED (TRUE MATCH QRBOX CENTER) */}
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">

          <div className="w-[75%] aspect-square border-2 border-green-400 rounded-2xl shadow-[0_0_25px_rgba(34,197,94,0.5)] animate-pulse" />

        </div>

      </div>

      {/* RESULT */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="rounded-3xl p-5 bg-white/80 backdrop-blur-xl border border-green-100 shadow-xl space-y-4"
      >
        <h2 className="text-sm font-semibold text-green-900">
          Hasil Scan
        </h2>

        <div className="p-3 rounded-xl bg-green-50 border text-sm break-all">
          {scanned || "Belum ada scan"}
        </div>

        {loading && (
          <div className="text-sm text-green-700 animate-pulse">
            🔍 Mencari item...
          </div>
        )}

        {/* ITEM */}
        {item && !loading && (
          <div className="p-5 rounded-3xl bg-linear-to-br from-green-100 via-white to-lime-100 border border-green-200 shadow space-y-3">

            <div className="text-lg font-bold text-green-900">
              🌾 {item.name}
            </div>

            <div className="text-sm text-gray-600">SKU: {item.sku}</div>
            <div className="text-sm text-gray-600">Kategori: {item.category}</div>
            <div className="text-sm text-gray-600">Unit: {item.unit}</div>

          </div>
        )}

        {/* NOT FOUND */}
        {scanned && !loading && !item && (
          <div className="text-sm text-red-500">
            Item tidak ditemukan
          </div>
        )}
      </motion.div>
    </div>
  );
}