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

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="flex min-h-0 w-full flex-auto flex-col items-stretch">
      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />
      <Image
        src="/images/auth/ic-logo-login.png"
        alt="Cozsweet"
        width={120}
        height={120}
        className="mx-auto block h-[clamp(92px,22.222vw,var(--auth-logo-height))] max-w-[min(56vw,220px)] object-contain"
        style={{ width: "auto", height: "auto" }}
        priority
      />
      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />

      <button
        type="button"
        data-analytics-key="auth.facebook_login"
        data-analytics-label="Facebook login"
        className="mt-md inline-flex min-h-(--auth-field-height) w-full cursor-pointer items-center justify-center gap-md rounded-full border-0 bg-auth-surface px-lg text-(length:--responsive-body) font-semibold text-auth-text-primary shadow-[0_2px_6px_rgba(0,0,0,0.06)] transition-[filter,transform,opacity] duration-150 enabled:hover:brightness-[0.97] enabled:active:scale-98 disabled:cursor-not-allowed disabled:opacity-60"
        onClick={() => handleFacebook()}
        disabled={isLoading}
      >
        {isLoading ? (
          <span
            className="inline-block size-(--responsive-spinner-size,18px) flex-none animate-spin rounded-full border-2 border-solid border-facebook-blue border-r-transparent border-b-transparent border-l-transparent"
            aria-hidden="true"
          />
        ) : (
          <span
            className="inline-flex size-5 flex-none items-center justify-center"
            aria-hidden="true"
          >
            <AuthProviderIcon provider="facebook" />
          </span>
        )}
        <span className="flex-none text-center">
          {isLoading ? "Logging in..." : "Login with Facebook"}
        </span>
      </button>

      <button
        type="button"
        data-analytics-key="auth.open_other_options"
        data-analytics-label="Open other sign-in options"
        className="self-center border-0 bg-transparent py-md text-(length:--responsive-body) text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
        onClick={() => setShowOptions(true)}
      >
        Other Sign In Options
      </button>

      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />

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

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