"use client";

import { useState, useEffect, useRef, type FormEvent } from "react";
import { usePathname } from "next/navigation";
import { useCompleteOrderPolling } from "@/app/hooks/useCompleteOrderPolling";
import Link from "next/link";
import ThemeToggle from "../components/ThemeToggle";
import { DIGITAL_NOMAD_WECHAT_QR, getSessionsWithDates } from "@/config/home.config";
import {
  redirectToPay,
  redirectToPayH5,
  payWechatXorpaySync,
  getDeviceFromEnv,
  getPayEnv,
} from "@/app/lib/payment";

const ageRangeOptions = ["18-22", "23-27", "28-32", "33-37", "38+"];

/** 活动场次选项：周六/周日，用于 meetupdate 下拉 */
function getMeetupdateOptions(): { value: string; label: string; type: string }[] {
  return getSessionsWithDates().map((s) => ({
    value: `${s.date} ${s.time}`,
    label: `${s.date} ${s.time} · ${s.title}`,
    type: s.id,
  }));
}

/** 微信号仅允许英文字母、数字、下划线、连字符 */
const WECHAT_REGEX = /^[a-zA-Z0-9_-]*$/;

/** 从粘贴文本中提取小红书 URL（主页或笔记链接），清除前后空格 */
function extractXiaohongshuUrl(text: string): string {
  const trimmed = text.trim();
  if (!trimmed) return "";
  const urlMatch = trimmed.match(/https?:\/\/[^\s<>"']*(?:xhslink\.com|xiaohongshu\.com)[^\s<>"']*/i);
  if (urlMatch) {
    return urlMatch[0].replace(/[^\w/:?#&=.-]+$/, "").trim();
  }
  const anyUrlMatch = trimmed.match(/https?:\/\/[^\s<>"']+/);
  if (anyUrlMatch) {
    return anyUrlMatch[0].replace(/[^\w/:?#&=.-]+$/, "").trim();
  }
  return trimmed;
}

const WECHAT_STORAGE_KEY = "salon_join_wechat";
const ORDER_COOKIE = "join_pay_order";

function getPendingOrderId(): string | null {
  if (typeof window === "undefined") return null;
  try {
    const cookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${ORDER_COOKIE}=`));
    const raw = cookie?.split("=")[1]?.trim();
    const decoded = raw ? decodeURIComponent(raw) : "";
    const fromStorage = localStorage.getItem(ORDER_COOKIE) || "";
    const value = decoded || fromStorage;
    const orderId = value.split("|")[0]?.trim() || "";
    return orderId || null;
  } catch {
    return null;
  }
}

interface UserRecord {
  hasRecord: boolean;
  record: {
    id?: string;
    wechatId?: string;
    user_id?: string;
    nickname?: string;
    media?: string;
    amount?: number;
    order_id?: string;
    vip?: boolean;
    is_volunteer?: boolean;
  } | null;
  isComplete: boolean;
  isWechatFriend: boolean;
  isApproved: boolean;
  isRejected: boolean;
  vip: boolean;
}

const EMPTY_USER_RECORD: UserRecord = {
  hasRecord: false,
  record: null,
  isComplete: false,
  isWechatFriend: false,
  isApproved: false,
  isRejected: false,
  vip: false,
};

function toUserRecord(data: Partial<UserRecord> & { record?: UserRecord["record"] }): UserRecord {
  return {
    hasRecord: !!data.hasRecord,
    record: data.record ?? null,
    isComplete: !!data.isComplete,
    isWechatFriend: !!data.isWechatFriend,
    isApproved: !!data.isApproved,
    isRejected: !!data.isRejected,
    vip: !!data.vip,
  };
}

function UserProfileCard({ record, showVolunteerTag }: { record: UserRecord["record"]; showVolunteerTag?: boolean }) {
  if (!record || (!record.nickname && !record.media && !record.wechatId)) return null;
  const isVolunteer = showVolunteerTag && record.is_volunteer;
  return (
    <div className="mt-6 flex items-center justify-center gap-3 rounded-xl bg-stone-50 dark:bg-stone-800/50 px-4 py-3">
      <div className="relative shrink-0">
        {record.media ? (
          <img
            src={record.media}
            alt=""
            className="h-12 w-12 rounded-full object-cover border border-stone-200 dark:border-stone-600"
          />
        ) : (
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/40 text-xl">
            👤
          </div>
        )}
        {isVolunteer && (
          <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500 text-white whitespace-nowrap">
            志愿者
          </span>
        )}
      </div>
      <div className="text-left">
        <p className="font-medium text-stone-800 dark:text-stone-100">{record.nickname || "—"}</p>
        {record.wechatId && (
          <p className="text-xs text-stone-500 dark:text-stone-400 font-mono">微信号: {record.wechatId}</p>
        )}
      </div>
    </div>
  );
}

export default function JoinPage() {
  const [wechat, setWechat] = useState("");
  const [userRecord, setUserRecord] = useState<UserRecord | null>(null);
  const [checkingWechat, setCheckingWechat] = useState(false);

  const [xiaohongshuUrl, setXiaohongshuUrl] = useState("");
  const [intro, setIntro] = useState("");
  const [profession, setProfession] = useState("");
  const [gender, setGender] = useState("");
  const [ageRange, setAgeRange] = useState("");
  const meetupdateOptions = getMeetupdateOptions();
  const [meetupdate, setMeetupdate] = useState(() => {
    const opts = getMeetupdateOptions();
    return opts[0]?.value ?? "";
  });
  const [agreeRules, setAgreeRules] = useState(true);
  const [urlError, setUrlError] = useState<string | null>(null);
  const [profile, setProfile] = useState<{
    nickname: string;
    gender?: string;
    postCount: number;
    postCountText?: string;
    ipLocation?: string;
    avatarUrl?: string;
    resolvedUrl?: string;
    followers?: number;
    followersText?: string;
    following?: number;
    followingText?: string;
    likesAndCollects?: number;
    likesAndCollectsText?: string;
    redbookId?: string;
    personalLink?: string;
  } | null>(null);
  const [validating, setValidating] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [qualify, setQualify] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [hydrated, setHydrated] = useState(false);

  const [fromPaid, setFromPaid] = useState(false);
  const [fromVolunteer, setFromVolunteer] = useState(false);
  const [paying, setPaying] = useState(false);
  const initialWechatCheckDone = useRef(false);
  const lastSubmitTime = useRef(0);
  const submittingRef = useRef(false);
  const fetchByWechatRef = useRef<(w: string) => Promise<unknown>>(() => Promise.resolve(null));
  const SUBMIT_THROTTLE_MS = 3000;

  const fetchByWechat = async (w: string) => {
    if (!w.trim()) return null;
    setError(null);
    setCheckingWechat(true);
    try {
      const res = await fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(w.trim())}&_=${Date.now()}`, {
        cache: "no-store",
      });
      const data = await res.json();
      const nextRecord = toUserRecord(data);
      setUserRecord(nextRecord);
      return nextRecord;
    } catch {
      setUserRecord(EMPTY_USER_RECORD);
      return null;
    } finally {
      setCheckingWechat(false);
    }
  };
  fetchByWechatRef.current = fetchByWechat;

  const handleWechatBlur = () => {
    const w = wechat.trim();
    if (!w) {
      setUserRecord(null);
      try {
        typeof window !== "undefined" && localStorage.removeItem(WECHAT_STORAGE_KEY);
      } catch {
        /* ignore */
      }
      return;
    }
    if (!WECHAT_REGEX.test(w)) {
      setError("微信号仅允许英文字母、数字、下划线和连字符");
      return;
    }
    setError(null);
    try {
      typeof window !== "undefined" && localStorage.setItem(WECHAT_STORAGE_KEY, w);
    } catch {
      /* ignore */
    }
    fetchByWechat(w);
  };

  const handleUrlBlur = async () => {
    const extracted = extractXiaohongshuUrl(xiaohongshuUrl);
    if (extracted !== xiaohongshuUrl.trim()) {
      setXiaohongshuUrl(extracted);
    }
    const url = extracted;
    if (!url) {
      setUrlError(null);
      setProfile(null);
      return;
    }
    setValidating(true);
    setUrlError(null);
    setProfile(null);
    try {
      const validateRes = await fetch("/api/xiaohongshu/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url }),
      });
      const validateData = await validateRes.json();
      if (!validateData.valid) {
        setUrlError(validateData.error || "小红书链接异常");
        return;
      }
      const profileRes = await fetch("/api/xiaohongshu/profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url }),
      });
      const profileData = await profileRes.json();
      if (profileData.ok) {
        setProfile({
          nickname: profileData.nickname,
          gender: profileData.gender,
          postCount: profileData.postCount ?? 0,
          postCountText: profileData.postCountText,
          ipLocation: profileData.ipLocation,
          avatarUrl: profileData.avatarUrl,
          resolvedUrl: profileData.resolvedUrl,
          followers: profileData.followers,
          followersText: profileData.followersText,
          following: profileData.following,
          followingText: profileData.followingText,
          likesAndCollects: profileData.likesAndCollects,
          likesAndCollectsText: profileData.likesAndCollectsText,
          redbookId: profileData.redbookId,
          personalLink: profileData.personalLink,
        });
      } else {
        setUrlError(profileData.error || "获取资料失败");
      }
    } catch {
      setUrlError("网络异常，请重试");
    } finally {
      setValidating(false);
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);

    const now = Date.now();
    if (submittingRef.current) return;
    if (now - lastSubmitTime.current < SUBMIT_THROTTLE_MS) return;
    if (userRecord?.hasRecord) {
      setError("该微信号已报名，请勿重复提交");
      return;
    }
    if (!xiaohongshuUrl.trim()) {
      setError("请填写小红书主页链接或笔记链接");
      return;
    }
    if (xiaohongshuUrl.trim() && urlError) {
      setError("请先修正小红书链接");
      return;
    }
    if (!intro.trim()) {
      setError("请填写自我介绍");
      return;
    }
    if (intro.trim().length < 20) {
      setError("自我介绍不少于20字");
      return;
    }
    if (!profession.trim()) {
      setError("请填写职业");
      return;
    }
    if (!wechat.trim()) {
      setError("请填写微信号");
      return;
    }
    if (!WECHAT_REGEX.test(wechat)) {
      setError("微信号仅允许英文字母、数字、下划线和连字符");
      return;
    }
    if (!gender) {
      setError("请选择性别");
      return;
    }
    if (!meetupdate) {
      setError("请选择要参加的活动场次");
      return;
    }

    submittingRef.current = true;
    lastSubmitTime.current = now;
    setSubmitting(true);

    try {
      const checkRes = await fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(wechat.trim())}&_=${Date.now()}`, { cache: "no-store" });
      const checkData = await checkRes.json();
      if (checkData?.hasRecord) {
        setError("该微信号已报名，请勿重复提交");
        fetchByWechat(wechat.trim());
        submittingRef.current = false;
        setSubmitting(false);
        return;
      }

      const formGenderFemale = gender === "女" || gender === "female";
      const postCountOk = (profile?.postCount ?? 0) > 10;
      const qualify = formGenderFemale && postCountOk;
      const genderLabel = gender === "女" ? "女" : gender === "男" ? "男" : "无";
      const submitXiaohongshuUrl = profile?.resolvedUrl || extractXiaohongshuUrl(xiaohongshuUrl) || "";
      const selectedOption = meetupdateOptions.find((o) => o.value === meetupdate);
      const sessionType = selectedOption?.type ?? "session-1";

      const res = await fetch("/api/join", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nickname: profile?.nickname || "匿名",
          wechat: wechat.trim(),
          phone: "",
          profession: profession.trim(),
          xiaohongshu_url: submitXiaohongshuUrl,
          xiaohongshu_avatar_url: profile?.avatarUrl || "",
          gender: genderLabel,
          intro: intro.trim(),
          reason: intro.trim(),
          userInfo: profile
            ? JSON.stringify({
                昵称: profile.nickname,
                性别: profile.gender,
                笔记数: profile.postCount,
                笔记数文案: profile.postCountText,
                IP属地: profile.ipLocation,
                头像链接: profile.avatarUrl,
                主页链接: profile.resolvedUrl,
                粉丝数: profile.followers,
                粉丝数文案: profile.followersText,
                关注数: profile.following,
                关注数文案: profile.followingText,
                获赞与收藏: profile.likesAndCollects,
                获赞与收藏文案: profile.likesAndCollectsText,
                小红书号: profile.redbookId,
                个人链接: profile.personalLink,
              })
            : "",
          age_range: ageRange,
          city: "深圳",
          session: sessionType,
          meetupdate: meetupdate.trim(),
          education: "",
          graduation_year: "",
          agree_rules: true,
          first_time: "",
          status: "",
          activity_type: "",
          why_join: "",
          region: "",
          available_time: "",
          qualify,
          is_volunteer: fromVolunteer,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        throw new Error(data?.error || "提交失败，请稍后重试");
      }
      setQualify(qualify);
      setSubmitted(true);
      try {
        localStorage.setItem(WECHAT_STORAGE_KEY, wechat.trim());
      } catch {
        /* ignore */
      }
      let result = await fetchByWechat(wechat.trim());
      const maxRetries = 5;
      const retryDelayMs = 1500;
      for (let i = 0; i < maxRetries && !result?.hasRecord; i++) {
        await new Promise((r) => setTimeout(r, retryDelayMs));
        result = await fetchByWechat(wechat.trim());
      }
      if (!result?.hasRecord) {
        try {
          window.location.replace("/join");
        } catch {
          /* ignore */
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "网络错误，请重试");
    } finally {
      submittingRef.current = false;
      setSubmitting(false);
    }
  };

  const clearWechatAndRecord = () => {
    setUserRecord(null);
    setWechat("");
    setXiaohongshuUrl("");
    setIntro("");
    setProfession("");
    setGender("");
    setAgeRange("");
    setAgreeRules(true);
    setUrlError(null);
    setProfile(null);
    setValidating(false);
    setSubmitted(false);
    setMeetupdate(meetupdateOptions[0]?.value ?? "");
    setSubmitting(false);
    setQualify(false);
    setError(null);
    try {
      if (typeof window !== "undefined") {
        localStorage.removeItem(WECHAT_STORAGE_KEY);
        localStorage.removeItem("join_pay_order");
        document.cookie = "join_pay_order=; path=/; max-age=0";
      }
    } catch {
      /* ignore */
    }
  };

  const handlePayNow = async () => {
    const rec = userRecord?.record;
    if (!rec?.user_id || paying) return;
    setPaying(true);
    try {
      const origin = typeof window !== "undefined" ? window.location.origin : "";
      const base = {
        user_id: rec.user_id,
        return_url: `${origin}/join/paid`,
        useJoinConfig: true,
        channel: "wxpay" as const,
      };
      const device = getDeviceFromEnv(getPayEnv());
      if (device === "wechat") {
        payWechatXorpaySync(base);
      } else if (device === "h5") {
        await redirectToPayH5(base);
      } else {
        redirectToPay({ ...base, device });
      }
    } catch (e) {
      const msg = e instanceof Error ? e.message : "支付发起失败";
      alert(msg.includes("abort") ? "请求超时，请检查网络后重试" : msg);
    } finally {
      setPaying(false);
    }
  };

  useEffect(() => {
    if (typeof window === "undefined") return;
    const params = new URLSearchParams(window.location.search);
    setFromPaid(params.get("paid") === "1");
    setFromVolunteer(params.get("volunteer") === "1");
    const sessionParam = params.get("session");
    if (sessionParam && (sessionParam === "session-1" || sessionParam === "session-2")) {
      const opts = getMeetupdateOptions();
      const match = opts.find((o) => o.type === sessionParam);
      if (match) setMeetupdate(match.value);
    }

    const pendingId = getPendingOrderId();
    const stored = (localStorage.getItem(WECHAT_STORAGE_KEY) || "").trim();

    // 有 pending 时先查 by-wechat：若已支付(vip/amount)则直接展示报名成功，不跳转 /join/paid
    if (pendingId && !params.has("paid") && stored && WECHAT_REGEX.test(stored)) {
      setWechat(stored);
      let cancelled = false;
      fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(stored)}&_=${Date.now()}`, { cache: "no-store" })
        .then((res) => res.json())
        .then((data) => {
          if (cancelled) return;
          const isPaid = data?.vip || data?.isComplete || (data?.record && Number(data.record?.amount || 0) > 0);
          if (isPaid) {
            setWechat(stored);
            setUserRecord(toUserRecord(data));
            if (!initialWechatCheckDone.current) {
              initialWechatCheckDone.current = true;
            }
            setHydrated(true);
            return;
          }
          window.location.replace(`/join/paid?order_id=${encodeURIComponent(pendingId)}`);
        })
        .catch(() => {
          if (!cancelled) window.location.replace(`/join/paid?order_id=${encodeURIComponent(pendingId)}`);
        });
      setHydrated(true);
      return () => {
        cancelled = true;
      };
    }

    if (pendingId && !params.has("paid")) {
      try {
        window.location.replace(`/join/paid?order_id=${encodeURIComponent(pendingId)}`);
        return;
      } catch {
        /* ignore */
      }
    }

    if (!initialWechatCheckDone.current) {
      initialWechatCheckDone.current = true;
      try {
        if (stored && WECHAT_REGEX.test(stored)) {
          setWechat(stored);
          fetchByWechat(stored);
        }
      } catch {
        /* ignore */
      }
    }
    setHydrated(true);
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const refreshOnReturn = () => {
      try {
        const w = (localStorage.getItem(WECHAT_STORAGE_KEY) || "").trim();
        if (w && WECHAT_REGEX.test(w)) fetchByWechatRef.current(w);
      } catch {
        /* ignore */
      }
    };
    const onVisibilityChange = () => {
      if (document.visibilityState === "visible") refreshOnReturn();
    };
    const onPageShow = (e: PageTransitionEvent) => {
      if (e.persisted) refreshOnReturn();
    };
    document.addEventListener("visibilitychange", onVisibilityChange);
    window.addEventListener("pageshow", onPageShow);
    return () => {
      document.removeEventListener("visibilitychange", onVisibilityChange);
      window.removeEventListener("pageshow", onPageShow);
    };
  }, []);

  const [completeOrderId] = useState<string | null>(() =>
    typeof window !== "undefined" ? getPendingOrderId() : null
  );

  useCompleteOrderPolling({
    orderId: completeOrderId,
    onSuccess: () => {
      const w = (localStorage.getItem(WECHAT_STORAGE_KEY) || "").trim();
      if (w && WECHAT_REGEX.test(w)) fetchByWechatRef.current(w);
    },
    retryDelays: [500, 1000, 1500, 2500, 4000],
  });

  const pathname = usePathname();
  // 每次进入报名页时强制重新拉取，避免预取/缓存导致显示旧状态
  useEffect(() => {
    if (pathname === "/join") {
      const w = (localStorage.getItem(WECHAT_STORAGE_KEY) || "").trim();
      if (w && WECHAT_REGEX.test(w)) fetchByWechatRef.current(w);
    }
  }, [pathname]);

  // 微信内/手机浏览器支付后：页面可能被关闭或跳转，返回时 notify 可能未到。轮询 fetchByWechat 检测支付成功
  // 手机浏览器唤醒微信 app 支付完成后，用户可能直接回 /join，故 h5 也需轮询（参考 nomadvip）
  useEffect(() => {
    if (typeof window === "undefined") return;
    const w = wechat.trim();
    if (!w || !WECHAT_REGEX.test(w)) return;
    const device = getDeviceFromEnv(getPayEnv());
    const isWechatOrH5 = device === "wechat" || device === "h5";
    if (!isWechatOrH5) return;
    const shouldPoll =
      userRecord?.hasRecord &&
      userRecord?.isWechatFriend &&
      !userRecord?.vip &&
      !userRecord?.isComplete;
    if (!shouldPoll) return;

    let cancelled = false;
    const poll = async () => {
      for (let attempt = 0; attempt < 6 && !cancelled; attempt++) {
        await new Promise((r) => setTimeout(r, 1500));
        if (cancelled) return;
        await fetchByWechat(w);
        if (cancelled) return;
        // fetchByWechat 会更新 userRecord，下次渲染会走 showSuccess，此处无需再判断
      }
    };
    void poll();
    return () => {
      cancelled = true;
    };
  }, [
    wechat,
    userRecord?.hasRecord,
    userRecord?.isWechatFriend,
    userRecord?.vip,
    userRecord?.isComplete,
  ]);

  // 成功报名：已支付 或 支付成功跳转 或 (好友且vip) —— 仅以数据库状态为准，不依赖 submitted
  const showSuccess = fromPaid || (userRecord?.hasRecord && userRecord.isComplete) || (userRecord?.hasRecord && userRecord.isWechatFriend && userRecord.vip);

  // 有数据、非好友 → 只展示状态页：审核中/审核通过/审核拒绝
  const showStatusPage = userRecord?.hasRecord && !userRecord.isWechatFriend;

  // 有数据、好友、非vip、未支付 → 支付状态页
  const showPayPage = userRecord?.hasRecord && userRecord.isWechatFriend && !userRecord.vip && !userRecord.isComplete;

  if (showSuccess) {
    const baseRecord = userRecord?.record ?? null;
    const displayRecord = baseRecord
      ? { ...baseRecord, wechatId: baseRecord.wechatId || wechat || undefined }
      : (wechat ? { wechatId: wechat } : null);
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4 py-8">
        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-6 sm:p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">🎉</div>
          <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">报名成功</h2>
          <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
            {displayRecord?.is_volunteer ? "要提前到场，金额可退" : "感谢报名，活动前会联系你确认～"}
          </p>
          <UserProfileCard record={displayRecord} showVolunteerTag />
          <Link href="/" className="mt-6 sm:mt-8 inline-flex items-center justify-center rounded-xl bg-amber-600 px-6 sm:px-8 py-2.5 sm:py-3 font-medium text-white text-sm sm:text-base transition-colors hover:bg-amber-700">
            🏠 返回首页
          </Link>
        </div>
      </div>
    );
  }

  if (showStatusPage) {
    const status = userRecord!.isRejected ? "rejected" : userRecord!.isApproved ? "approved" : "pending";
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4 py-8">
        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-6 sm:p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
          {status === "approved" ? (
            <>
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">🎉</div>
              <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核通过</h2>
              <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">扫码添加好友，加入活动群</p>
              <div className="mt-6 flex justify-center">
                <img src={DIGITAL_NOMAD_WECHAT_QR} alt="微信二维码" className="w-40 h-40 object-contain border border-stone-200 dark:border-stone-700 rounded-lg" />
              </div>
              <p className="mt-4 text-xs text-stone-400 dark:text-stone-500">📝 添加时请备注：活动报名</p>
            </>
          ) : status === "rejected" ? (
            <>
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/30 text-4xl">❌</div>
              <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核拒绝</h2>
              <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">很抱歉，本次申请未通过审核。如有疑问可联系发起人。</p>
            </>
          ) : (
            <>
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">⏳</div>
              <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核中</h2>
              <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">⏰ 通常会在 24 小时内完成审核，通过后用微信联系你。</p>
            </>
          )}
          <UserProfileCard record={userRecord?.record ?? null} showVolunteerTag />
          {status !== "approved" && (
            <button
              type="button"
              onClick={clearWechatAndRecord}
              className="mt-6 text-sm text-stone-500 hover:text-amber-600"
            >
              重新填写报名表
            </button>
          )}
          <Link href="/" className="mt-4 block text-sm text-amber-600 hover:text-amber-700">
            🏠 返回首页
          </Link>
        </div>
      </div>
    );
  }

  if (showPayPage) {
    return (
      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
        {paying && (
          <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/95 dark:bg-stone-950/95 backdrop-blur-sm">
            <span className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-amber-500 border-t-transparent" />
            <p className="mt-4 text-base font-medium text-stone-700 dark:text-stone-300">正在跳转支付…</p>
            <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">请勿关闭页面</p>
          </div>
        )}
        <header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
          <div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
            <Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
            <ThemeToggle />
          </div>
        </header>
        <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
          <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl p-6 sm:p-10 text-center">
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">💰</div>
            <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">支付场地茶歇费</h2>
            <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">29元/人，用于覆盖民宿/场地基础成本</p>
            <UserProfileCard record={userRecord?.record ?? null} showVolunteerTag />
            {userRecord?.record?.is_volunteer && (
              <p className="mt-3 text-xs text-emerald-600 dark:text-emerald-400">
                🌿 志愿者预付活动结束可退<br />
                用于防止临时爽约
              </p>
            )}
            {paying && (
              <div className="mt-6 flex items-center justify-center gap-2 rounded-xl bg-amber-50 dark:bg-amber-900/20 py-3 px-4 text-amber-700 dark:text-amber-400 text-sm">
                <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-amber-500 border-t-transparent" />
                正在跳转支付，请稍候…
              </div>
            )}
            <button
              type="button"
              onClick={handlePayNow}
              disabled={paying}
              className="mt-6 w-full rounded-xl bg-amber-600 py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {paying ? (
                <>
                  <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
                  跳转中…
                </>
              ) : (
                "立即报名"
              )}
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!hydrated) {
    return (
      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
        <span className="text-stone-400">加载中…</span>
      </div>
    );
  }

  // 微信号输入区：失焦时查询，查询中不展示其他元素
  const wechatOnlyView = !userRecord;

  if (wechatOnlyView) {
    return (
      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
        <header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
          <div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
            <Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
            <ThemeToggle />
          </div>
        </header>
        <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
          <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
            <div className="relative h-28 sm:h-36 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
              <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
                <div className="text-4xl sm:text-5xl" aria-hidden>☕</div>
              </div>
            </div>
            <div className="px-4 sm:px-6 py-5 sm:py-6">
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
                  💬 微信号 <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  maxLength={140}
                  placeholder="用于拉群"
                  value={wechat}
                  onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
                  onBlur={handleWechatBlur}
                  className="form-input"
                  autoFocus
                />
              </div>
              {checkingWechat && (
                <p className="mt-3 text-sm text-amber-600 dark:text-amber-400">🔄 查询中…</p>
              )}
              {error && (
                <p className="mt-3 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400">⚠️ {error}</p>
              )}
              <button
                type="button"
                disabled
                className="mt-5 w-full rounded-xl bg-amber-600/50 py-3.5 text-base font-medium text-white cursor-not-allowed"
              >
                📤 提交报名
              </button>
              <p className="mt-2 text-xs text-stone-400 dark:text-stone-500">填写微信号并完成查询后显示完整表单</p>
            </div>
          </div>
          <div className="mt-4 text-center">
            <Link href="/" className="text-xs sm:text-sm text-stone-400 dark:text-stone-500 hover:text-amber-600">🏠 返回首页</Link>
          </div>
        </div>
      </div>
    );
  }

  // 无记录 → 显示完整表单
  return (
    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
      <header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
        <div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
          <Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
          <ThemeToggle />
        </div>
      </header>
      <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
        <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
          <div className="relative h-28 sm:h-36 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
            <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
              <div className="text-4xl sm:text-5xl" aria-hidden>☕</div>
            </div>
          </div>
          <div className="px-4 sm:px-6 py-5 sm:py-6">
            {fromVolunteer && (
              <div className="mb-6 rounded-xl bg-amber-50 dark:bg-amber-900/20 p-4">
                <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm mb-2">🙌 志愿者工作内容</h3>
                <ul className="text-xs sm:text-sm text-stone-600 dark:text-stone-400 space-y-1">
                  <li>· 签到：现场签到、引导参与者</li>
                  <li>· 茶歇准备：协助布置茶歇、收拾整理</li>
                  <li>· 拍照摄像：记录活动现场，分享精彩瞬间</li>
                </ul>
              </div>
            )}
            <form onSubmit={handleSubmit} action="javascript:void(0)" className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">💬 微信号 <span className="text-red-500">*</span></label>
                <input
                  type="text"
                  maxLength={140}
                  placeholder="用于拉群"
                  value={wechat}
                  onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
                  onBlur={handleWechatBlur}
                  required
                  className="form-input"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">📱 小红书主页链接 或 笔记链接 <span className="text-red-500">*</span></label>
                <input
                  type="text"
                  value={xiaohongshuUrl}
                  onChange={(e) => { setXiaohongshuUrl(e.target.value); setUrlError(null); }}
                  onBlur={handleUrlBlur}
                  required
                  className="form-input"
                />
                {validating && <p className="mt-1.5 text-xs text-amber-600 dark:text-amber-400">🔄 校验中…</p>}
                {urlError && !validating && <p className="mt-1.5 text-xs text-red-600 dark:text-red-400">⚠️ {urlError}</p>}
                {profile && !urlError && (
                  <>
                    <p className="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">已验证</p>
                    {process.env.NODE_ENV === "development" && (
                      <div className="mt-3 rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800/50 p-4">
                        <div className="flex items-center gap-3">
                          {profile.avatarUrl ? (
                            <img
                              src={profile.avatarUrl}
                              alt=""
                              className="h-14 w-14 rounded-full object-cover border border-stone-200 dark:border-stone-600"
                            />
                          ) : (
                            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/40 text-2xl">
                              👤
                            </div>
                          )}
                          <div>
                            <p className="font-medium text-stone-800 dark:text-stone-100">{profile.nickname}</p>
                            {profile.gender && <p className="text-xs text-stone-500 dark:text-stone-400">性别 {profile.gender}</p>}
                            {profile.redbookId && <p className="text-xs text-stone-500 dark:text-stone-400">小红书号 {profile.redbookId}</p>}
                            {profile.ipLocation && <p className="text-xs text-stone-500 dark:text-stone-400">IP属地 {profile.ipLocation}</p>}
                          </div>
                        </div>
                        <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm text-stone-600 dark:text-stone-400">
                          <span>关注 {profile.followingText ?? profile.following ?? "—"}</span>
                          <span>粉丝 {profile.followersText ?? profile.followers ?? "—"}</span>
                          <span>获赞与收藏 {profile.likesAndCollectsText ?? profile.likesAndCollects ?? "—"}</span>
                          <span>笔记 {profile.postCountText ?? profile.postCount ?? "—"}</span>
                        </div>
                        {profile.personalLink && (
                          <p className="mt-2 text-xs text-stone-500 dark:text-stone-400 truncate">个人链接 {profile.personalLink}</p>
                        )}
                        {profile.resolvedUrl && (
                          <p className="mt-1 text-xs text-stone-400 dark:text-stone-500 truncate">Profile {profile.resolvedUrl}</p>
                        )}
                      </div>
                    )}
                  </>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">✍️ 自我介绍 <span className="text-red-500">*</span></label>
                <div className="relative">
                  <textarea
                    rows={4}
                    maxLength={500}
                    minLength={20}
                    placeholder="不少于20字"
                    value={intro}
                    onChange={(e) => setIntro(e.target.value)}
                    required
                    className="form-input resize-y min-h-[80px] pr-14"
                  />
                  <span
                    className={`absolute bottom-2 right-3 text-xs ${
                      intro.length < 20 ? "text-amber-600 dark:text-amber-400" : "text-stone-400 dark:text-stone-500"
                    }`}
                  >
                    {intro.length}/500
                  </span>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">💼 职业 <span className="text-red-500">*</span></label>
                <input type="text" maxLength={140} placeholder="您的职业或专业" value={profession} onChange={(e) => setProfession(e.target.value)} required className="form-input" />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">📅 参加场次 <span className="text-red-500">*</span></label>
                <select value={meetupdate} onChange={(e) => setMeetupdate(e.target.value)} required className={`form-input appearance-none ${meetupdate ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}>
                  <option value="">请选择要参加的活动</option>
                  {meetupdateOptions.map((o) => (
                    <option key={o.type} value={o.value}>{o.label}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">👤 性别 <span className="text-red-500">*</span></label>
                <select value={gender} onChange={(e) => setGender(e.target.value)} required className={`form-input appearance-none ${gender ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}>
                  <option value="">请选择</option>
                  <option value="女">女</option>
                  <option value="男">男</option>
                </select>
              </div>
              {fromVolunteer && (
                <div>
                  <label className="flex items-center gap-3 cursor-default">
                    <input type="checkbox" checked readOnly disabled className="rounded border-stone-300 text-amber-600" />
                    <span className="text-sm font-medium text-stone-700 dark:text-stone-300">🙌 志愿者</span>
                  </label>
                </div>
              )}
              <div className="hidden">
                <select value={ageRange} onChange={(e) => setAgeRange(e.target.value)} className="form-input">
                  <option value="">请选择</option>
                  {ageRangeOptions.map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              </div>
              <div className="hidden">
                <label className="flex items-start gap-3 cursor-pointer">
                  <input type="checkbox" checked={agreeRules} onChange={(e) => setAgreeRules(e.target.checked)} className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500" />
                  <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">📋 我已阅读并同意社区规则</span>
                </label>
              </div>
              {error && (
                <p className="rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400">⚠️ {error}</p>
              )}
              {submitted && checkingWechat && (
                <p className="text-sm text-amber-600 dark:text-amber-400">提交成功，正在刷新状态…</p>
              )}
              <button type="submit" disabled={submitting || !!urlError || validating} className="w-full rounded-xl bg-amber-600 py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50">
                {submitting ? "🔄 提交中…" : fromVolunteer ? "📤 提交志愿者申请" : "📤 提交报名"}
              </button>
            </form>
          </div>
        </div>
        <div className="mt-4 text-center">
          <button type="button" onClick={clearWechatAndRecord} className="text-xs sm:text-sm text-stone-500 hover:text-amber-600">
            重新填写报名表
          </button>
          <span className="mx-2 text-stone-300">|</span>
          <Link href="/" className="text-xs sm:text-sm text-stone-500 hover:text-amber-600">🏠 返回首页</Link>
        </div>
      </div>
    </div>
  );
}