"use client";
/**
 * "其他登录方式" 底部弹层
 *
 * 原始 Dart: lib/ui/auth/widgets/auth_other_options_dialog.dart
 *   (showModalBottomSheet：白卡 + 顶部圆角 radius28 + drag handle)
 *
 * 视觉规格（与 Dart 对齐）：
 *   - 固定底部、宽 100%（≤500px）、顶部圆角 28px
 *   - drag handle 40×4 灰胶囊
 *   - 标题 "Other Sign-in Options" 24px bold 深色
 *   - email 模式下渲染 Facebook 按钮（40px 白胶囊 + 边框 + 图标）
 *   - 始终渲染 Google 按钮
 *   - Cancel 文本按钮
 */
import type { ReactNode } from "react";

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

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;
  /** 当前面板模式：facebook 模式下显示 Email + Google；email 模式下显示 Facebook + Google。 */
  mode: "facebook" | "email";
  /** 自定义子节点（如嵌入 GIS 按钮） */
  googleSlot?: ReactNode;
}

export function AuthOtherOptionsDialog({
  open,
  onClose,
  onFacebook,
  onGoogle,
  mode,
  googleSlot,
}: AuthOtherOptionsDialogProps) {
  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}

        {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>
  );
}
