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

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 switchToEmail = () =>
    dispatch({ type: "AuthPanelModeChanged", mode: "email" });
  const switchToFacebook = () =>
    dispatch({ type: "AuthPanelModeChanged", mode: "facebook" });

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

  return (
    <div className={styles.panelShell}>
      <button
        type="button"
        className={styles.backButton}
        onClick={handleBack}
        aria-label="Back"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M15 18l-6-6 6-6" />
        </svg>
      </button>

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