"use client";

import { useState, useEffect, 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, getDeviceFromEnv } from "@/app/lib/payment/client";

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

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

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

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(() =>
    typeof window !== "undefined" && new URLSearchParams(window.location.search).get("paid") === "1"
  );

  const fetchByWechat = async (w: string) => {
    if (!w.trim()) return;
    setError(null);
    setCheckingWechat(true);
    try {
      const res = await fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(w.trim())}`);
      const data = await res.json();
      setUserRecord({
        hasRecord: !!data.hasRecord,
        record: data.record ?? null,
        isComplete: !!data.isComplete,
        isWechatFriend: !!data.isWechatFriend,
        isApproved: !!data.isApproved,
        isRejected: !!data.isRejected,
        vip: !!data.vip,
      });
    } catch {
      setUserRecord({ hasRecord: false, record: null, isComplete: false, isWechatFriend: false, isApproved: false, isRejected: false, vip: false });
    } finally {
      setCheckingWechat(false);
    }
  };

  const handleWechatBlur = () => {
    const w = wechat.trim();
    if (!w) {
      setUserRecord(null);
      return;
    }
    if (!WECHAT_REGEX.test(w)) {
      setError("微信号仅允许英文字母、数字、下划线和连字符");
      return;
    }
    setError(null);
    fetchByWechat(w);
  };

  const handleUrlBlur = async () => {
    const url = xiaohongshuUrl.trim();
    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);
    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;
    }
    setSubmitting(true);
    try {
      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: "digital-nomad",
          education: "",
          graduation_year: "",
          agree_rules: true,
          first_time: "",
          status: "",
          activity_type: "",
          why_join: "",
          region: "",
          available_time: "",
        }),
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        throw new Error(data?.error || "提交失败，请稍后重试");
      }
      setQualify(qualify);
      setSubmitted(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "网络错误，请重试");
    } finally {
      setSubmitting(false);
    }
  };

  const handlePayNow = () => {
    const rec = userRecord?.record;
    if (!rec?.user_id) return;
    const origin = typeof window !== "undefined" ? window.location.origin : "";
    const device = typeof navigator !== "undefined" && /Android|iPhone|iPad|iPod|webOS|Mobile/i.test(navigator.userAgent) ? "h5" : "pc";
    redirectToPay({
      user_id: rec.user_id,
      return_url: `${origin}/join/paid`,
      useJoinConfig: true,
      channel: "wxpay",
      device: getDeviceFromEnv(device),
    });
  };

  useEffect(() => {
    setHydrated(true);
  }, []);

  // 成功报名：已支付 或 支付成功跳转 或 (好友且vip)
  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 (submitted || showSuccess) {
    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">感谢报名，活动前会联系你确认～</p>
          <p className="mt-6 text-xs text-stone-400 dark:text-stone-500 leading-relaxed whitespace-pre-line">
            {`本场收取少量场地分摊费29/人
用于覆盖民宿/场地基础成本。
通过审核后再确认名额，未确认无需支付。`}
          </p>
          <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>
            </>
          )}
          <p className="mt-6 text-xs text-stone-400 dark:text-stone-500 leading-relaxed whitespace-pre-line">
            {`本场收取少量场地分摊费29/人
用于覆盖民宿/场地基础成本。
通过审核后再确认名额，未确认无需支付。`}
          </p>
          <button
            type="button"
            onClick={() => { setUserRecord(null); setWechat(""); }}
            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">29元/人，用于覆盖民宿/场地基础成本</p>
            <button
              type="button"
              onClick={handlePayNow}
              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"
            >
              立即报名
            </button>
            <button
              type="button"
              onClick={() => { setUserRecord(null); setWechat(""); }}
              className="mt-3 text-sm text-stone-500 hover:text-stone-700"
            >
              更换微信号
            </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 || checkingWechat;

  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">
            <form onSubmit={handleSubmit} 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="url"
                  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>
              <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>
              )}
              <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 ? "🔄 提交中…" : "📤 提交报名"}
              </button>
            </form>
          </div>
        </div>
        <div className="mt-4 text-center">
          <button type="button" onClick={() => { setUserRecord(null); setWechat(""); }} 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>
  );
}