"use client";

import { useState, type FormEvent } from "react";
import { pbLogin, pbRegister, pbSaveAuth } from "@/app/lib/pocketbase";
import styles from "../vip.module.css";

type AuthFormProps = {
  onSuccess: () => void;
  autoFocus?: boolean;
};

export function AuthForm({ onSuccess, autoFocus }: AuthFormProps) {
  const [mode, setMode] = useState<"login" | "register">("login");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      let result;
      if (mode === "register") {
        if (password !== passwordConfirm) {
          setError("两次密码不一致");
          setLoading(false);
          return;
        }
        if (password.length < 8) {
          setError("密码至少 8 位");
          setLoading(false);
          return;
        }
        result = await pbRegister(email, password, passwordConfirm);
      } else {
        result = await pbLogin(email, password);
      }
      pbSaveAuth(result.token, result.record);
      await fetch("/api/auth/sync-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: result.token, record: result.record }),
        credentials: "include",
      });
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : "操作失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="your@email.com"
        required
        autoFocus={autoFocus}
        disabled={loading}
        style={{
          width: "100%",
          padding: "0.75rem 1rem",
          fontSize: "1rem",
          border: "1px solid var(--border)",
          borderRadius: "8px",
          background: "var(--background)",
          color: "var(--foreground)",
          marginBottom: "0.75rem",
        }}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder={mode === "register" ? "至少 8 位" : "••••••••"}
        required
        minLength={mode === "register" ? 8 : 1}
        disabled={loading}
        style={{
          width: "100%",
          padding: "0.75rem 1rem",
          fontSize: "1rem",
          border: "1px solid var(--border)",
          borderRadius: "8px",
          background: "var(--background)",
          color: "var(--foreground)",
          marginBottom: mode === "register" ? "0.75rem" : 0,
        }}
      />
      {mode === "register" && (
        <input
          type="password"
          value={passwordConfirm}
          onChange={(e) => setPasswordConfirm(e.target.value)}
          placeholder="再次输入密码"
          required
          disabled={loading}
          style={{
            width: "100%",
            padding: "0.75rem 1rem",
            fontSize: "1rem",
            border: "1px solid var(--border)",
            borderRadius: "8px",
            background: "var(--background)",
            color: "var(--foreground)",
            marginBottom: "0.75rem",
          }}
        />
      )}
      {error && (
        <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>
          {error}
        </p>
      )}
      <button
        type="submit"
        disabled={loading}
        className={`${styles.btnPrimary} ${styles.btnLarge}`}
        style={{ width: "100%", marginBottom: "0.75rem" }}
      >
        {loading ? "处理中…" : mode === "login" ? "登录" : "注册"}
      </button>
      <p style={{ fontSize: "0.85rem", color: "var(--muted-foreground)", textAlign: "center" }}>
        {mode === "login" ? (
          <>
            还没有账号？{" "}
            <button type="button" onClick={() => { setMode("register"); setError(null); }} className="text-[var(--primary)]">
              立即注册
            </button>
          </>
        ) : (
          <>
            已有账号？{" "}
            <button type="button" onClick={() => { setMode("login"); setError(null); }} className="text-[var(--primary)]">
              去登录
            </button>
          </>
        )}
      </p>
    </form>
  );
}