"use client";

import { useState, type FormEvent } from "react";
import { Copyable } from "../Copyable";
import styles from "../vip.module.css";

type WelcomeBlockProps = {
  userName: string | null;
};

function getStorage(key: string): string | null {
  if (typeof window === "undefined") return null;
  return localStorage.getItem(key);
}

/** 匿名 user_id 格式：user + 数字 */
function isAnonymousUserId(val: string | null): boolean {
  return !!val && /^user\d+$/.test(val);
}

export function WelcomeBlock({ userName }: WelcomeBlockProps) {
  const displayName = userName || getStorage("userName") || "会员";
  const userId = getStorage("userId");
  const needLinkEmail = isAnonymousUserId(userId);

  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 [linked, setLinked] = useState(false);

  const handleLinkSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      if (password !== passwordConfirm) {
        setError("两次密码不一致");
        setLoading(false);
        return;
      }
      if (password.length < 8) {
        setError("密码至少 8 位");
        setLoading(false);
        return;
      }
      const res = await fetch("/api/auth/link-email", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: email.trim(),
          password,
          anonymousUserId: userId,
        }),
      });
      const data = await res.json();
      if (!data?.ok) {
        setError(data?.error || "操作失败");
        setLoading(false);
        return;
      }
      const { pbSaveAuth } = await import("@/app/lib/pocketbase");
      pbSaveAuth(data.token, { id: data.record.id, email: data.record.email });
      await fetch("/api/auth/sync-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: data.token, record: data.record }),
        credentials: "include",
      });
      if (typeof window !== "undefined") {
        localStorage.setItem("userId", data.record.id);
        localStorage.setItem("userName", data.record.email || data.record.id);
      }
      setLinked(true);
      window.location.reload();
    } catch {
      setError("操作失败");
    } finally {
      setLoading(false);
    }
  };

  if (needLinkEmail && !linked) {
    return (
      <section className={styles.section} style={{ paddingTop: "1.5rem" }}>
        <h1
          className="animate__animated animate__fadeInDown"
          style={{
            fontSize: "clamp(1.5rem, 4vw, 2rem)",
            fontWeight: 600,
            margin: 0,
            animationDelay: "0.1s",
            animationFillMode: "both",
          }}
        >
          欢迎加入，请补充邮箱
        </h1>
        <p
          className="animate__animated animate__fadeInDown"
          style={{
            fontSize: "0.95rem",
            color: "var(--muted-foreground)",
            margin: "0.25rem 0 1rem",
            animationDelay: "0.15s",
            animationFillMode: "both",
          }}
        >
          补充邮箱后可在各站点通用登录，Memos 账号密码为 12345678
        </p>
        <form onSubmit={handleLinkSubmit} className={styles.loginCard} style={{ maxWidth: "400px" }}>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="your@email.com"
            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",
            }}
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="至少 8 位"
            required
            minLength={8}
            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={passwordConfirm}
            onChange={(e) => setPasswordConfirm(e.target.value)}
            placeholder="再次输入密码"
            required
            minLength={8}
            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%" }}
          >
            {loading ? "处理中…" : "确认并关联"}
          </button>
        </form>
      </section>
    );
  }

  return (
    <section className={styles.section} style={{ paddingTop: "1.5rem" }}>
      <h1
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "clamp(1.5rem, 4vw, 2rem)",
          fontWeight: 600,
          margin: 0,
          animationDelay: "0.1s",
          animationFillMode: "both",
        }}
      >
        欢迎回来，<Copyable text={displayName}>{displayName}</Copyable>
      </h1>
      <p
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "0.95rem",
          color: "var(--muted-foreground)",
          margin: "0.25rem 0 0",
          animationDelay: "0.15s",
          animationFillMode: "both",
        }}
      >
        以下是您的会员资产与推荐动作
      </p>
      <div className={styles.loginCard}>
        <div className={styles.loginCardTitle}>星球登录信息</div>
        <div className={styles.loginCardRow}>
          <span className={styles.loginCardLabel}>网址</span>
          <Copyable text="https://qun.hackrobot.cn">qun.hackrobot.cn</Copyable>
          <a href="https://qun.hackrobot.cn" target="_blank" rel="noopener noreferrer" className={styles.loginCardLink}>打开</a>
        </div>
        <div className={styles.loginCardRow}>
          <span className={styles.loginCardLabel}>账号</span>
          <Copyable text={displayName}><span className={styles.loginCardValue}>{displayName}</span></Copyable>
        </div>
        <div className={styles.loginCardRow}>
          <span className={styles.loginCardLabel}>密码</span>
          <Copyable text="12345678"><span className={styles.loginCardValue}>12345678</span></Copyable>
        </div>
      </div>
    </section>
  );
}