"use client";

import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import { GoogleLogin } from "@react-oauth/google";
import { useEscapeKey, useFocusTrap, useBodyScrollLock } from "@/lib/hooks/useModalA11y";

interface LoginMenuProps {
  onGoogleSuccess: (credential: string) => void;
}

export default function LoginMenu({ onGoogleSuccess }: LoginMenuProps) {
  const [open, setOpen] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const dialogRef = useRef<HTMLDivElement>(null);
  const titleId = "login-dialog-title";

  // #283 — 모달 접근성: ESC / focus trap / body scroll lock
  useEscapeKey(open, () => setOpen(false));
  useFocusTrap(open, dialogRef);
  useBodyScrollLock(open);

  const handleSuccess = (res: { credential?: string }) => {
    setErrorMsg(null);
    if (res.credential) {
      onGoogleSuccess(res.credential);
      setOpen(false);
    }
  };

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400 border border-gray-300 dark:border-gray-600 hover:border-brand-400 dark:hover:border-brand-500 rounded-lg transition-colors"
      >
        로그인
      </button>

      {open && createPortal(
        <div
          // #344 — z-index 매직 넘버 99999 → CSS 변수 토큰 (--z-modal=70).
          // 다른 오버레이(BottomSheet=50, FilterSheet=60) 위 일관된 stacking.
          className="fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm"
          style={{ zIndex: "var(--z-modal)" } as React.CSSProperties}
          onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
        >
          <div
            ref={dialogRef}
            role="dialog"
            aria-modal="true"
            aria-labelledby={titleId}
            tabIndex={-1}
            className="bg-surface rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-sm space-y-4"
          >
            <div className="flex items-center justify-between">
              <h3 id={titleId} className="text-base font-semibold dark:text-gray-100">로그인</h3>
              <button
                onClick={() => setOpen(false)}
                aria-label="로그인 창 닫기"
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg leading-none p-2 -m-2"
              >
                ✕
              </button>
            </div>
            <p className="text-xs text-gray-400 dark:text-gray-500">소셜 계정으로 간편 로그인</p>
            {errorMsg && (
              <p role="alert" className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/40 rounded p-2">
                {errorMsg}
              </p>
            )}
            <div className="flex flex-col items-center gap-3">
              <GoogleLogin
                onSuccess={handleSuccess}
                onError={() => setErrorMsg("Google 로그인에 실패했습니다. 팝업 차단 또는 네트워크 상태를 확인해주세요.")}
                size="large"
                width="260"
                text="signin_with"
              />
            </div>
          </div>
        </div>,
        document.body,
      )}
    </>
  );
}