"use client";
/**
 * 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
 */
import { useRouter } from "next/navigation";

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

import { AuthEmailPanel } from "./auth-email-panel";
import { AuthFacebookPanel } from "./auth-facebook-panel";
import styles from "./auth-panel.module.css";

export function AuthPanel() {
  const state = useAuthState();
  const dispatch = useAuthDispatch();
  const router = useRouter();

  const switchToFacebook = () =>
    dispatch({ type: "AuthPanelModeChanged", mode: "facebook" });
  const switchToEmail = () =>
    dispatch({ type: "AuthPanelModeChanged", mode: "email" });

  const handleBack = () => {
    if (state.authPanelMode === "email") {
      switchToFacebook();
    } else {
      router.back();
    }
  };

  return (
    <div className={styles.panelShell}>
      <BackButton onClick={handleBack} />

      {state.authPanelMode === "facebook" ? (
        <AuthFacebookPanel onSwitchToEmail={switchToEmail} />
      ) : (
        <AuthEmailPanel
          onSwitchToFacebook={() => {
            switchToFacebook();
          }}
        />
      )}
    </div>
  );
}