"use client";

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

const COMMUNITY_URL = "https://qun.hackrobot.cn";
const DEFAULT_PASSWORD = "12345678";

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

function isAnonymousUserId(value: string | null): value is string {
  return !!value && /^user\d+$/.test(value);
}

type CommunityAccessModalProps = {
  open: boolean;
  onClose: () => void;
};

/** 与 WelcomeBlock 同步的社群登录账号解析，用于弹窗展示 */
export function CommunityAccessModal({ open, onClose }: CommunityAccessModalProps) {
  const userId = typeof window !== "undefined" ? getStorage("userId") : null;
  const [backendMemosAccount, setBackendMemosAccount] = useState<string | null>(null);

  const memosAccount =
    getStorage("memosAccount") ||
    backendMemosAccount ||
    (isAnonymousUserId(userId) ? userId : null);

  useEffect(() => {
    if (!open || !userId) return;
    fetch(`/api/vip/linked-email?user_id=${encodeURIComponent(userId)}`, {
      cache: "no-store",
    })
      .then((res) => res.json())
      .then((data) => {
        const linkedAnonymousUserId =
          typeof data?.anonymousUserId === "string" && /^user\d+$/.test(data.anonymousUserId)
            ? data.anonymousUserId
            : null;
        if (linkedAnonymousUserId && typeof window !== "undefined") {
          setBackendMemosAccount(linkedAnonymousUserId);
          localStorage.setItem("memosAccount", linkedAnonymousUserId);
        }
      })
      .catch(() => {});
  }, [open, userId]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className={styles.communityModalBackdrop}
      role="presentation"
      onClick={onClose}
    >
      <div
        className={styles.communityModalPanel}
        role="dialog"
        aria-modal="true"
        aria-labelledby="community-modal-title"
        onClick={(e) => e.stopPropagation()}
      >
        <div className={styles.communityModalGlow} aria-hidden />
        <button
          type="button"
          className={styles.communityModalClose}
          onClick={onClose}
          aria-label="关闭"
        >
          ×
        </button>
        <div className={styles.communityModalIconWrap}>
          <span className={styles.communityModalIcon}>👥</span>
        </div>
        <h2 id="community-modal-title" className={styles.communityModalTitle}>
          私密社群 · 登录信息
        </h2>
        <p className={styles.communityModalDesc}>
          使用以下信息访问社群站点，可随时点击复制
        </p>

        <div className={styles.communityModalRows}>
          <div className={styles.communityModalRow}>
            <span className={styles.communityModalLabel}>网址</span>
            <div className={styles.communityModalValueWrap}>
              <Copyable text={COMMUNITY_URL} className={styles.communityModalCopyable}>
                <span className={styles.communityModalMono}>qun.hackrobot.cn</span>
              </Copyable>
              <a
                href={COMMUNITY_URL}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.communityModalOpenLink}
              >
                打开
              </a>
            </div>
          </div>
          <div className={styles.communityModalRow}>
            <span className={styles.communityModalLabel}>账号</span>
            <Copyable text={memosAccount || ""} className={styles.communityModalCopyable}>
              <span className={styles.communityModalMono}>{memosAccount || "—"}</span>
            </Copyable>
          </div>
          <div className={styles.communityModalRow}>
            <span className={styles.communityModalLabel}>密码</span>
            <Copyable text={DEFAULT_PASSWORD} className={styles.communityModalCopyable}>
              <span className={styles.communityModalMono}>{DEFAULT_PASSWORD}</span>
            </Copyable>
          </div>
        </div>

        <button type="button" className={styles.communityModalDone} onClick={onClose}>
          知道了
        </button>
      </div>
    </div>
  );
}