"use client";

import { useState, useEffect, useRef, type FormEvent } from "react";
import Link from "next/link";
import ThemeToggle from "../components/ThemeToggle";
import { DIGITAL_NOMAD_WECHAT_QR } 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+"];

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

/** 从粘贴文本中提取小红书 URL，如 "我在小红书收获了536次赞与收藏>> https://xhslink.com/m/9H50QYiVOVx" */
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;
  }
}

function clearPendingOrder(): void {
  try {
    localStorage.removeItem(ORDER_COOKIE);
    document.cookie = `${ORDER_COOKIE}=; path=/; max-age=0`;
  } catch {}
}

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 [profession, setProfession] = useState("");
  const [gender, setGender] = useState("");
  const [ageRange, setAgeRange] = useState("");
  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;
  } | 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 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())}`, {
        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);
    }
  };

  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) {
      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 || "小红书link异常");
        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,
        });
      } 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() && urlError) {
      setError("请先修正小红书链接");
      return;
    }
    if (!profession.trim()) {
      setError("请填写职业");
      return;
    }
    if (!wechat.trim()) {
      setError("请填写微信号");
      return;
    }
    if (!WECHAT_REGEX.test(wechat)) {
      setError("微信号仅允许英文字母、数字、下划线和连字符");
      return;
    }
    if (!gender) {
      setError("请选择性别");
      return;
    }

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

    try {
      const checkRes = await fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(wechat.trim())}`, { 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 || xiaohongshuUrl.trim() || "";

      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: "",
          age_range: ageRange,
          city: "深圳",
          session: fromVolunteer ? "volunteer" : "digital-nomad",
          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("");
    setProfession("");
    setGender("");
    setAgeRange("");
    setAgreeRules(true);
    setUrlError(null);
    setProfile(null);
    setValidating(false);
    setSubmitted(false);
    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");
    if (!initialWechatCheckDone.current) {
      initialWechatCheckDone.current = true;
      try {
        const stored = localStorage.getItem(WECHAT_STORAGE_KEY);
        const w = (stored || "").trim();
        if (w && WECHAT_REGEX.test(w)) {
          setWechat(w);
          fetchByWechat(w);
        }
      } catch {
        /* ignore */
      }
    }
    setHydrated(true);
  }, []);

  // 手机浏览器支付后若回到 /join：有 pending order 时主动轮询 complete-order，触发后端更新 solanRed（ZPAY notify 可能未到）
  useEffect(() => {
    if (typeof window === "undefined") return;
    const orderId = getPendingOrderId();
    if (!orderId) return;
    const shouldComplete =
      userRecord?.hasRecord &&
      userRecord?.isWechatFriend &&
      !userRecord?.vip &&
      !userRecord?.isComplete;
    if (!shouldComplete) return;

    let cancelled = false;
    const tryComplete = async (): Promise<boolean> => {
      const r = await fetch("/api/salon/complete-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ order_id: orderId }),
        credentials: "include",
      });
      const d = await r.json();
      if (!d?.ok) return false;
      if (d?.token && d?.record) {
        fetch("/api/auth/sync-session", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: d.token, record: d.record }),
          credentials: "include",
        }).catch(() => {});
        import("@/app/lib/pocketbase").then(({ pbSaveAuth }) => pbSaveAuth(d.token, d.record));
      }
      clearPendingOrder();
      window.dispatchEvent(new CustomEvent("auth:updated"));
      window.dispatchEvent(new CustomEvent("vip:updated"));
      return true;
    };

    const run = async () => {
      const retryDelays = [1500, 2500, 3500, 4500, 5500];
      for (let i = 0; i <= retryDelays.length; i++) {
        if (cancelled) return;
        if (await tryComplete()) {
          if (wechat.trim()) fetchByWechat(wechat.trim());
          return;
        }
        if (i < retryDelays.length && !cancelled) {
          await new Promise((r) => setTimeout(r, retryDelays[i]));
        }
      }
    };
    void run();
    return () => { cancelled = true; };
  }, [
    userRecord?.hasRecord,
    userRecord?.isWechatFriend,
    userRecord?.vip,
    userRecord?.isComplete,
    wechat,
  ]);

  // 微信内/手机浏览器支付后：页面可能被关闭或跳转，返回时 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">
        <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">1元/人，用于覆盖民宿/场地基础成本</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">📱 小红书主页链接</label>
                <p className="text-xs text-stone-500 dark:text-stone-400 mb-1.5">💡 建议填写，可加快审核</p>
                <input
                  type="text"
                  value={xiaohongshuUrl}
                  onChange={(e) => { setXiaohongshuUrl(e.target.value); setUrlError(null); }}
                  onBlur={handleUrlBlur}
                  placeholder="https://www.xiaohongshu.com/user/profile/xxx 或粘贴分享文案"
                  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>}
              </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={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>
  );
}