"use client";
/**
 * 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
 */
import { BackButton } from "@/app/_components";
import { useAppNavigator } from "@/router/use-app-navigator";
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";

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

export function AuthPanel() {
  const state = useAuthState();
  const dispatch = useAuthDispatch();
  const navigator = useAppNavigator();

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

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

  return (
    <div className="relative flex min-h-0 w-full flex-auto flex-col">
      <BackButton
        onClick={handleBack}
        variant="soft"
        className="absolute left-0 top-0 z-2"
        analyticsKey="auth.back"
      />

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