"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";

import { AuthProviderIcon } from "./auth-provider-icon";
import { AuthSocialButton } from "./auth-social-button";
import styles from "./auth-other-options-dialog.module.css";

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={styles.body}>
        <div className={styles.handle} aria-hidden="true" />
        <h2 className={styles.title}>Other Sign-in Options</h2>

        {mode === "email" ? (
          <AuthSocialButton
            icon={<AuthProviderIcon provider="facebook" />}
            onClick={() => {
              onClose();
              onFacebook();
            }}
          >
            Facebook Sign In
          </AuthSocialButton>
        ) : null}

        {showNonProductionEmailOption ? (
          <AuthSocialButton
            icon={<MdEmail size={20} color="var(--color-auth-text-primary)" />}
            onClick={() => {
              onClose();
              onEmail();
            }}
          >
            Email Sign In
          </AuthSocialButton>
        ) : null}

        {googleSlot ? (
          <div className={styles.googleSlot}>{googleSlot}</div>
        ) : (
          <AuthSocialButton
            icon={<AuthProviderIcon provider="google" />}
            onClick={() => {
              onClose();
              onGoogle();
            }}
          >
            Continue with Google
          </AuthSocialButton>
        )}

        <button type="button" className={styles.cancel} onClick={onClose}>
          Cancel
        </button>
      </div>
    </BottomSheet>
  );
}
