"use client";
/**
 * Email 面板（login/register 内部切换）
 *
 * 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - login 模式：顶部 24px spacer + logo（120h） + 24px gap
 *   - register 模式：48px spacer（两个 24px，无 logo）
 *   - 表单（EmailLoginForm / EmailRegisterForm）
 *   - 12px gap + 切换链接（"Don't have an account? Sign up" / "Already have an account? Log in"）
 *   - 16px gap + "Other Sign In Options" 链接（打开底部弹层）
 *   - Spacer + AuthLegalText
 *   - 顶部 "← Back" 按钮由父级 AuthPanel 渲染（悬浮 40×40 圆形）
 */
import Image from "next/image";
import { useState } from "react";

import { 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 { EmailLoginForm } from "./email-login-form";
import { EmailRegisterForm } from "./email-register-form";

export interface AuthEmailPanelProps {
  /** "Other Sign-in Options" 弹层中 Facebook 按钮回调（派发回 facebook 模式） */
  onSwitchToFacebook: () => void;
  /** "Other Sign-in Options" 弹层中 Google 按钮回调（可空；空时不渲染 Google 行） */
  onGoogle?: () => void;
  /** 弹层 Google 自定义子节点 */
  googleSlot?: React.ReactNode;
}

export function AuthEmailPanel({
  onSwitchToFacebook,
  onGoogle,
  googleSlot,
}: AuthEmailPanelProps) {
  const state = useAuthState();
  const [mode, setMode] = useState<"login" | "register">("login");
  const [showOptions, setShowOptions] = useState(false);

  return (
    <div className="flex min-h-0 w-full flex-auto flex-col items-stretch">
      <div className="flex flex-col items-stretch">
        {mode === "login" ? (
          <>
            <div className="h-xxl" />
            <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="h-xxl" />
            <div className="h-xxl" />
          </>
        )}
        <div className="h-xxl" />
      </div>

      {mode === "login" ? (
        <EmailLoginForm
          globalError={state.errorMessage}
          isLoading={state.isLoading}
        />
      ) : (
        <EmailRegisterForm
          globalError={state.errorMessage}
          isLoading={state.isLoading}
        />
      )}

      <AuthErrorMessage message={state.errorMessage} />

      <button
        type="button"
        data-analytics-key={
          mode === "login" ? "auth.open_register" : "auth.open_email_login"
        }
        className="self-center border-0 bg-transparent pt-md text-(length:--responsive-body) text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
        onClick={() => setMode((m) => (m === "login" ? "register" : "login"))}
      >
        {mode === "login"
          ? "Don't have an account? Sign up"
          : "Already have an account? Log in"}
      </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]" />
      <AuthLegalText />

      <AuthOtherOptionsDialog
        open={showOptions}
        onClose={() => setShowOptions(false)}
        mode="email"
        onFacebook={onSwitchToFacebook}
        onGoogle={() => {
          setShowOptions(false);
          onGoogle?.();
        }}
        googleSlot={googleSlot}
      />
    </div>
  );
}
