ERP-node/frontend/components/common/BarcodeScanModal.tsx

"use client";

import React, { useState, useRef, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { Camera, CameraOff, CheckCircle2, AlertCircle, Scan } from "lucide-react";
import Webcam from "react-webcam";
import { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";

export interface BarcodeScanModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  targetField?: string;
  barcodeFormat?: "all" | "1d" | "2d";
  autoSubmit?: boolean;
  onScanSuccess: (barcode: string) => void;
  userId?: string;
}

export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
  open,
  onOpenChange,
  targetField,
  barcodeFormat = "all",
  autoSubmit = false,
  onScanSuccess,
  userId = "guest",
}) => {
  const [isScanning, setIsScanning] = useState(false);
  const [scannedCode, setScannedCode] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
  const webcamRef = useRef<Webcam>(null);
  const codeReaderRef = useRef<BrowserMultiFormatReader | null>(null);
  const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);

  // 바코드 리더 초기화
  useEffect(() => {
    if (open) {
      codeReaderRef.current = new BrowserMultiFormatReader();
    }

    return () => {
      stopScanning();
      if (codeReaderRef.current) {
        codeReaderRef.current.reset();
      }
    };
  }, [open]);

  // 카메라 권한 요청
  const requestCameraPermission = async () => {
    console.log("🎥 카메라 권한 요청 시작...");

    // navigator.mediaDevices 지원 확인
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      console.error("❌ navigator.mediaDevices를 사용할 수 없습니다.");
      console.log("현재 프로토콜:", window.location.protocol);
      console.log("현재 호스트:", window.location.host);
      setHasPermission(false);
      setError(
        "이 브라우저는 카메라 접근을 지원하지 않거나, 보안 컨텍스트(HTTPS 또는 localhost)가 아닙니다. " +
          "현재 프로토콜: " +
          window.location.protocol,
      );
      toast.error("카메라 접근이 불가능합니다. 콘솔을 확인해주세요.");
      return;
    }

    try {
      console.log("🔄 getUserMedia 호출 중...");
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      console.log("✅ 카메라 권한 허용됨!");
      setHasPermission(true);
      stream.getTracks().forEach((track) => track.stop()); // 권한 확인 후 스트림 종료
      toast.success("카메라 권한이 허용되었습니다.");
    } catch (err: any) {
      console.error("❌ 카메라 권한 오류:", err);
      console.error("에러 이름:", err.name);
      console.error("에러 메시지:", err.message);
      setHasPermission(false);

      // 에러 타입에 따라 다른 메시지 표시
      if (err.name === "NotAllowedError") {
        setError("카메라 접근이 거부되었습니다. 브라우저 설정에서 카메라 권한을 허용해주세요.");
        toast.error("카메라 권한이 거부되었습니다.");
      } else if (err.name === "NotFoundError") {
        setError("카메라를 찾을 수 없습니다. 카메라가 연결되어 있는지 확인해주세요.");
        toast.error("카메라를 찾을 수 없습니다.");
      } else if (err.name === "NotReadableError") {
        setError("카메라가 이미 다른 애플리케이션에서 사용 중입니다.");
        toast.error("카메라가 사용 중입니다.");
      } else if (err.name === "NotSupportedError") {
        setError("보안 컨텍스트(HTTPS 또는 localhost)가 아니어서 카메라를 사용할 수 없습니다.");
        toast.error("HTTPS 환경이 필요합니다.");
      } else {
        setError(`카메라 접근 오류: ${err.name} - ${err.message}`);
        toast.error("카메라 접근 중 오류가 발생했습니다.");
      }
    }
  };

  // 스캔 시작
  const startScanning = () => {
    setIsScanning(true);
    setError("");
    setScannedCode("");

    // 주기적으로 스캔 시도 (500ms마다)
    scanIntervalRef.current = setInterval(() => {
      scanBarcode();
    }, 500);
  };

  // 스캔 중지
  const stopScanning = () => {
    setIsScanning(false);
    if (scanIntervalRef.current) {
      clearInterval(scanIntervalRef.current);
      scanIntervalRef.current = null;
    }
  };

  // 바코드 스캔
  const scanBarcode = async () => {
    if (!webcamRef.current || !codeReaderRef.current) return;

    try {
      const imageSrc = webcamRef.current.getScreenshot();
      if (!imageSrc) return;

      // 이미지를 HTMLImageElement로 변환
      const img = new Image();
      img.src = imageSrc;

      await new Promise((resolve) => {
        img.onload = resolve;
      });

      // 바코드 디코딩
      const result = await codeReaderRef.current.decodeFromImageElement(img);

      if (result) {
        const barcode = result.getText();
        console.log("✅ 바코드 스캔 성공:", barcode);

        setScannedCode(barcode);
        stopScanning();
        toast.success(`바코드 스캔 완료: ${barcode}`);

        // 자동 제출 옵션이 켜져있으면 바로 콜백 실행
        if (autoSubmit) {
          onScanSuccess(barcode);
        }
      }
    } catch (err) {
      // NotFoundException은 정상적인 상황 (바코드가 아직 인식되지 않음)
      if (!(err instanceof NotFoundException)) {
        console.error("바코드 스캔 오류:", err);
      }
    }
  };

  // 수동 확인 버튼
  const handleConfirm = () => {
    if (scannedCode) {
      onScanSuccess(scannedCode);
    } else {
      toast.error("스캔된 바코드가 없습니다.");
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">바코드 스캔</DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            카메라로 바코드를 스캔합니다.
            {targetField && ` (대상 필드: ${targetField})`}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 카메라 권한 요청 대기 중 */}
          {hasPermission === null && (
            <div className="border-primary bg-primary/10 rounded-md border p-4">
              <div className="flex items-start gap-3">
                <Camera className="text-primary mt-0.5 h-5 w-5 flex-shrink-0" />
                <div className="flex-1 space-y-3 text-xs sm:text-sm">
                  <div>
                    <p className="text-primary font-semibold">카메라 권한이 필요합니다</p>
                    <p className="text-muted-foreground mt-1">바코드를 스캔하려면 카메라 접근 권한을 허용해주세요.</p>
                  </div>

                  <div className="bg-background/50 rounded-md p-3">
                    <p className="text-foreground mb-2 font-medium">💡 권한 요청 안내:</p>
                    <ul className="text-muted-foreground ml-4 list-disc space-y-1">
                      <li>아래 버튼을 클릭하면 브라우저에서 권한 요청 팝업이 표시됩니다</li>
                      <li>
                        팝업에서 <strong>"허용"</strong> 버튼을 클릭해주세요
                      </li>
                      <li>권한은 언제든지 브라우저 설정에서 변경할 수 있습니다</li>
                    </ul>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button onClick={requestCameraPermission} className="h-9 text-xs sm:h-10 sm:text-sm">
                      <Camera className="mr-2 h-4 w-4" />
                      카메라 권한 요청
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 카메라 권한 거부됨 */}
          {hasPermission === false && (
            <div className="border-destructive bg-destructive/10 rounded-md border p-4">
              <div className="flex items-start gap-3">
                <AlertCircle className="text-destructive mt-0.5 h-5 w-5 flex-shrink-0" />
                <div className="flex-1 space-y-3 text-xs sm:text-sm">
                  <div>
                    <p className="text-destructive font-semibold">카메라 접근 권한이 필요합니다</p>
                    <p className="text-destructive/80 mt-1">{error}</p>
                  </div>

                  <div className="bg-background/50 rounded-md p-3">
                    <p className="text-foreground mb-2 font-medium">📱 권한 허용 방법:</p>
                    <ol className="text-muted-foreground ml-4 list-decimal space-y-1">
                      <li>
                        브라우저 주소창 왼쪽의 <strong>🔒 자물쇠 아이콘</strong>을 클릭하세요
                      </li>
                      <li>
                        <strong>"카메라"</strong> 항목을 찾아 <strong>"허용"</strong>으로 변경하세요
                      </li>
                      <li>페이지를 새로고침하거나 다시 스캔을 시도하세요</li>
                    </ol>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button size="sm" variant="outline" onClick={requestCameraPermission} className="h-8 text-xs">
                      다시 시도
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 웹캠 뷰 */}
          {hasPermission && (
            <div className="border-border bg-muted relative aspect-video overflow-hidden rounded-lg border">
              <Webcam
                ref={webcamRef}
                audio={false}
                screenshotFormat="image/jpeg"
                videoConstraints={{
                  facingMode: "environment", // 후면 카메라 우선
                }}
                className="h-full w-full object-cover"
              />

              {/* 스캔 가이드 오버레이 */}
              {isScanning && (
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="border-primary h-32 w-32 animate-pulse rounded-lg border-4" />
                  <div className="absolute right-0 bottom-4 left-0 text-center">
                    <div className="bg-background/80 inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-medium">
                      <Scan className="text-primary h-4 w-4 animate-pulse" />
                      스캔 중...
                    </div>
                  </div>
                </div>
              )}

              {/* 스캔 완료 오버레이 */}
              {scannedCode && (
                <div className="bg-background/80 absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <CheckCircle2 className="text-success mx-auto h-16 w-16" />
                    <p className="mt-2 text-sm font-medium">스캔 완료!</p>
                    <p className="text-primary mt-1 font-mono text-lg font-bold">{scannedCode}</p>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* 바코드 포맷 정보 */}
          <div className="border-border bg-muted/50 rounded-md border p-3">
            <div className="flex items-start gap-2">
              <AlertCircle className="text-muted-foreground mt-0.5 h-4 w-4" />
              <div className="text-muted-foreground text-[10px] sm:text-xs">
                <p className="font-medium">지원 포맷</p>
                <p className="mt-1">
                  {barcodeFormat === "all" && "1D/2D 바코드 모두 지원 (Code 128, QR Code 등)"}
                  {barcodeFormat === "1d" && "1D 바코드 (Code 128, Code 39, EAN-13, UPC-A)"}
                  {barcodeFormat === "2d" && "2D 바코드 (QR Code, Data Matrix)"}
                </p>
              </div>
            </div>
          </div>

          {/* 에러 메시지 */}
          {error && (
            <div className="border-destructive bg-destructive/10 rounded-md border p-3">
              <div className="flex items-start gap-2">
                <AlertCircle className="text-destructive mt-0.5 h-4 w-4" />
                <p className="text-destructive text-xs">{error}</p>
              </div>
            </div>
          )}
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>

          {!isScanning && !scannedCode && hasPermission && (
            <Button onClick={startScanning} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              <Camera className="mr-2 h-4 w-4" />
              스캔 시작
            </Button>
          )}

          {isScanning && (
            <Button
              variant="destructive"
              onClick={stopScanning}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              <CameraOff className="mr-2 h-4 w-4" />
              스캔 중지
            </Button>
          )}

          {scannedCode && !autoSubmit && (
            <Button onClick={handleConfirm} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              <CheckCircle2 className="mr-2 h-4 w-4" />
              확인
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};