"use client";
/**
 * Facebook 面板（默认登录面板）
 *
 * 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - Spacer → logo（120h）→ Spacer → Facebook 主按钮 → 链接 → Spacer → 法律
 *   - Facebook 主按钮：46px 白胶囊 + Facebook "f" 图标（#1877f2）+ "Login with Facebook"
 *   - 社交登录统一收口到 Auth 状态机：派发 `AuthFacebookLoginSubmitted` /
 *     `AuthGoogleLoginSubmitted` 事件，状态机内部调 next-auth/react 的 signIn(provider)
 *   - busy / error 状态来自 `useAuthState()`（与邮箱登录同源）
 *   - "Other Sign-in Options" 链接打开底部弹层
 */
import Image from "next/image";
import { useState } from "react";

import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";

import { AuthErrorMessage } from "./auth-error-message";
import { AuthLegalText } from "./auth-legal-text";
import { AuthOtherOptionsDialog } from "./auth-other-options-dialog";
import { AuthProviderIcon } from "./auth-provider-icon";
import styles from "./auth-facebook-panel.module.css";

export interface AuthFacebookPanelProps {
  onSwitchToEmail: () => void;
}

export function AuthFacebookPanel({
  onSwitchToEmail,
}: AuthFacebookPanelProps) {
  const [showOptions, setShowOptions] = useState(false);
  const { isLoading, errorMessage } = useAuthState();
  const authDispatch = useAuthDispatch();

  const handleFacebook = () => {
    authDispatch({
      type: "AuthFacebookLoginSubmitted",
      provider: "facebook",
    });
  };

  const handleGoogle = () => {
    authDispatch({
      type: "AuthGoogleLoginSubmitted",
      provider: "google",
    });
  };

  return (
    <div className={styles.panel}>
      <div className={styles.spacer} />
      <Image
        src="/images/auth/ic-logo-login.png"
        alt="Cozsweet"
        width={120}
        height={120}
        className={styles.logo}
        style={{ width: "auto", height: "auto" }}
        priority
      />
      <div className={styles.spacer} />

      <button
        type="button"
        className={styles.facebookButton}
        onClick={() => handleFacebook()}
        disabled={isLoading}
      >
        {isLoading ? (
          <span className={styles.spinner} aria-hidden="true" />
        ) : (
          <span className={styles.facebookIcon} aria-hidden="true">
            <AuthProviderIcon provider="facebook" />
          </span>
        )}
        <span className={styles.facebookLabel}>
          {isLoading ? "Logging in..." : "Login with Facebook"}
        </span>
      </button>

      <button
        type="button"
        className={styles.linkButton}
        onClick={() => setShowOptions(true)}
      >
        Other Sign In Options
      </button>

      <div className={styles.spacer} />

      <AuthErrorMessage message={errorMessage} />
      <AuthLegalText />

      <AuthOtherOptionsDialog
        open={showOptions}
        onClose={() => setShowOptions(false)}
        mode="facebook"
        onFacebook={() => handleFacebook()}
        onGoogle={() => handleGoogle()}
        onEmail={onSwitchToEmail}
      />
    </div>
  );
}
