"use client";
import type { ReactNode } from "react";
import { MdEmail } from "react-icons/md";

import { BottomSheet } from "@/app/_components/core/bottom-sheet";
import { AppEnvUtil } from "@/utils/app-env";

import { AuthProviderIcon } from "./auth-provider-icon";
import { AuthSocialButton } from "./auth-social-button";

export interface AuthOtherOptionsDialogProps {
  open: boolean;
  onClose: () => void;
  onFacebook: () => void;
  onGoogle: () => void;
  onEmail?: () => void;
  /** 当前面板模式：facebook 模式下显示 Email + Google；email 模式下显示 Facebook + Google。 */
  mode: "facebook" | "email";
  /** 自定义子节点（如嵌入 GIS 按钮） */
  googleSlot?: ReactNode;
}

export function AuthOtherOptionsDialog({
  open,
  onClose,
  onFacebook,
  onGoogle,
  onEmail,
  mode,
  googleSlot,
}: AuthOtherOptionsDialogProps) {
  const showNonProductionEmailOption =
    !AppEnvUtil.isProduction() && mode === "facebook" && onEmail;

  return (
    <BottomSheet
      open={open}
      onClose={onClose}
      ariaLabel="Other sign-in options"
    >
      <div
        className="flex flex-col items-stretch gap-md px-xxl pt-md"
        style={{ paddingBottom: "calc(var(--spacing-xxl) + var(--app-safe-bottom, 0px))" }}
      >
        <div
          className="mb-sm h-(--auth-drag-handle-height) w-(--auth-drag-handle-width) self-center rounded-xs bg-auth-drag-handle"
          aria-hidden="true"
        />
        <h2 className="my-sm text-center text-(length:--responsive-page-title) font-bold text-auth-text-primary">
          Other Sign-in Options
        </h2>

        {mode === "email" ? (
          <AuthSocialButton
            data-analytics-key="auth.facebook_login"
            data-analytics-label="Facebook login"
            icon={<AuthProviderIcon provider="facebook" />}
            onClick={() => {
              onClose();
              onFacebook();
            }}
          >
            Facebook Sign In
          </AuthSocialButton>
        ) : null}

        {showNonProductionEmailOption ? (
          <AuthSocialButton
            data-analytics-key="auth.open_email_login"
            data-analytics-label="Email login option"
            icon={<MdEmail size={20} color="var(--color-auth-text-primary)" />}
            onClick={() => {
              onClose();
              onEmail();
            }}
          >
            Email Sign In
          </AuthSocialButton>
        ) : null}

        {googleSlot ? (
          <div className="w-full">{googleSlot}</div>
        ) : (
          <AuthSocialButton
            data-analytics-key="auth.google_login"
            data-analytics-label="Google login"
            icon={<AuthProviderIcon provider="google" />}
            onClick={() => {
              onClose();
              onGoogle();
            }}
          >
            Continue with Google
          </AuthSocialButton>
        )}

        <button
          type="button"
          className="self-center border-0 bg-transparent py-md text-(length:--responsive-body) font-medium text-auth-text-primary no-underline hover:underline"
          onClick={onClose}
        >
          Cancel
        </button>
      </div>
    </BottomSheet>
  );
}
