"use client";

import { useState, useEffect } from "react";
import { Link } from "@/i18n/navigation";
import { apiUrl } from "@/app/lib/api-client";

const DEFAULT_PASSWORD = "12345678";

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

/**
 * 支付完成回跳页
 * Z-Pay 的 return_url 不支持带查询参数，故使用 /join/paid 作为专用成功页
 * 新用户支付成功后弹窗显示默认密码 12345678，并提供修改密码选项
 */
export default function JoinPaidPage() {
  const [needPasswordChange, setNeedPasswordChange] = useState<boolean | null>(null);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [newPassword, setNewPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");
  const [changeError, setChangeError] = useState<string | null>(null);
  const [changing, setChanging] = useState(false);
  const [showChangeForm, setShowChangeForm] = useState(false);
  const [completeStatus, setCompleteStatus] = useState<"pending" | "success" | "error">("pending");
  const [errorDetail, setErrorDetail] = useState<string | null>(null);
  const [countdown, setCountdown] = useState<number | null>(null);

  useEffect(() => {
    let cancelled = false;

    const tryComplete = async (orderId: string): Promise<{ ok: boolean; error?: string }> => {
      const r = await fetch(apiUrl("/api/meetup/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 { ok: false, error: d?.error || `HTTP ${r.status}` };

      if (d?.token && d?.record) {
        await fetch(apiUrl("/api/auth/sync-session"), {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: d.token, record: d.record }),
          credentials: "include",
        });
        const { pbSaveAuth } = await import("@/app/lib/pocketbase");
        pbSaveAuth(d.token, d.record);
      }
      window.dispatchEvent(new CustomEvent("auth:updated"));
      window.dispatchEvent(new CustomEvent("vip:updated"));
      setTimeout(() => {
        window.dispatchEvent(new CustomEvent("auth:updated"));
        window.dispatchEvent(new CustomEvent("vip:updated"));
      }, 400);
      if (d.is_new) {
        await fetch(apiUrl("/api/meetup/set-needs-password-change"), { method: "POST", credentials: "include" });
        if (!cancelled) {
          setNeedPasswordChange(true);
          setShowPasswordModal(true);
        }
      } else {
        const needRes = await fetch(apiUrl("/api/meetup/need-password-change"), { credentials: "include" });
        const needData = await needRes.json().catch(() => ({}));
        if (!cancelled && needData?.need === true) {
          setNeedPasswordChange(true);
          setShowPasswordModal(true);
        }
      }
      return { ok: true };
    };

    const run = async () => {
      const urlOrderId = typeof window !== "undefined"
        ? new URLSearchParams(window.location.search).get("order_id") || ""
        : "";
      const cookie = document.cookie.split(";").find((c) => c.trim().startsWith("join_pay_order="));
      const rawValue = cookie?.split("=")[1]?.trim();
      const storageValue = (() => {
        try {
          return localStorage.getItem("join_pay_order") || "";
        } catch {
          return "";
        }
      })();
      const decoded = rawValue ? decodeURIComponent(rawValue) : storageValue;
      const orderId = urlOrderId || decoded.split("|")[0]?.trim() || "";
      if (!orderId) {
        clearPendingOrder();
        window.location.replace(`/${window.location.pathname.split("/")[1] || "zh"}/join`);
        return;
      }

      const maxClientRetries = 5;
      const retryDelays = [2000, 3000, 4000, 5000, 6000];
      let lastError = "";
      for (let i = 0; i <= maxClientRetries; i++) {
        if (cancelled) return;
        try {
          const result = await tryComplete(orderId);
          if (result.ok) {
            clearPendingOrder();
            if (!cancelled) setCompleteStatus("success");
            return;
          }
          lastError = result.error || "unknown";
        } catch (e) {
          lastError = e instanceof Error ? e.message : "network error";
        }
        if (i < maxClientRetries) {
          await new Promise((r) => setTimeout(r, retryDelays[i]));
        }
      }
      if (!cancelled) {
        setCompleteStatus("error");
        setErrorDetail(lastError);
      }

      fetch(apiUrl("/api/meetup/need-password-change"))
        .then((res) => res.json())
        .then((d) => {
          if (cancelled) return;
          setNeedPasswordChange(d?.need === true);
          if (d?.need === true) setShowPasswordModal(true);
        })
        .catch(() => { if (!cancelled) setNeedPasswordChange(false); });
    };
    run();

    return () => { cancelled = true; };
  }, []);

  const COUNTDOWN_SECONDS = 5;
  useEffect(() => {
    if (completeStatus !== "success" || showPasswordModal) return;
    setCountdown(COUNTDOWN_SECONDS);
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev == null || prev <= 1) {
          clearInterval(timer);
          const locale = window.location.pathname.split("/")[1] || "zh";
          window.location.replace(`/${locale}`);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(timer);
  }, [completeStatus, showPasswordModal]);

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setChangeError(null);
    if (newPassword.length < 8) {
      setChangeError("密码至少 8 位");
      return;
    }
    if (newPassword !== passwordConfirm) {
      setChangeError("两次密码不一致");
      return;
    }
    setChanging(true);
    try {
      const res = await fetch(apiUrl("/api/auth/change-password"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ newPassword, passwordConfirm }),
        credentials: "include",
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        throw new Error(data?.error || "修改失败");
      }
      setShowPasswordModal(false);
    } catch (err) {
      setChangeError(err instanceof Error ? err.message : "修改失败");
    } finally {
      setChanging(false);
    }
  };

  const handleCopyPassword = async () => {
    try {
      await navigator.clipboard.writeText(DEFAULT_PASSWORD);
    } catch {
      /* ignore */
    }
  };

  return (
    <>
      <div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] dark:bg-gray-950 px-4">
        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-gray-900 p-10 text-center shadow-lg border border-gray-100 dark:border-gray-800">
          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-5xl">
            ✅
          </div>
          <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">
            {completeStatus === "pending" ? "处理中…" : completeStatus === "success" ? "支付成功" : "处理异常"}
          </h2>
          <p className="mt-3 text-slate-500 dark:text-slate-400">
            {completeStatus === "success"
              ? countdown != null
                ? `${countdown} 秒后返回首页`
                : "感谢您的支持"
              : completeStatus === "error"
                ? "请稍后刷新页面重试"
                : "正在确认支付状态…"}
          </p>
          {completeStatus === "error" && errorDetail && (
            <p className="mt-1 text-xs text-slate-400 dark:text-slate-500">{errorDetail}</p>
          )}
          {completeStatus === "error" && (
            <button
              type="button"
              onClick={() => window.location.reload()}
              className="mt-4 rounded-full border border-[#ff4d4f] px-6 py-2.5 text-sm font-medium text-[#ff4d4f] hover:bg-[#ff4d4f]/10 transition-colors"
            >
              刷新重试
            </button>
          )}
          <Link
            href="/"
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-[#ff4d4f] px-8 py-3 font-semibold text-white transition-colors hover:bg-[#ff7a45]"
          >
            ← 返回首页
          </Link>
        </div>
      </div>

      {showPasswordModal && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-sm rounded-2xl bg-white dark:bg-gray-900 p-6 shadow-xl border border-gray-100 dark:border-gray-800">
            <h3 className="text-lg font-bold text-slate-800 dark:text-slate-100">您的登录密码</h3>
            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
              请妥善保存以下默认密码，用于登录本网站（游牧中国）
            </p>
            <div className="mt-4 flex items-center gap-2 rounded-lg bg-slate-100 dark:bg-slate-800 px-4 py-3">
              <code className="flex-1 font-mono text-lg font-semibold text-slate-800 dark:text-slate-100">
                {DEFAULT_PASSWORD}
              </code>
              <button
                type="button"
                onClick={handleCopyPassword}
                className="rounded-lg px-3 py-1.5 text-sm font-medium text-[#ff4d4f] hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
              >
                复制
              </button>
            </div>
            {!showChangeForm ? (
              <button
                type="button"
                onClick={() => setShowChangeForm(true)}
                className="mt-4 w-full rounded-lg border border-[#ff4d4f] py-2.5 text-sm font-medium text-[#ff4d4f] hover:bg-[#ff4d4f]/10 transition-colors"
              >
                修改密码
              </button>
            ) : (
              <form onSubmit={handleChangePassword} className="mt-4 space-y-3">
                <input
                  type="password"
                  value={newPassword}
                  onChange={(e) => { setNewPassword(e.target.value); setChangeError(null); }}
                  placeholder="新密码（至少 8 位）"
                  minLength={8}
                  required
                  className="w-full rounded-lg border border-gray-200 dark:border-gray-600 px-4 py-2.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-gray-800"
                />
                <input
                  type="password"
                  value={passwordConfirm}
                  onChange={(e) => { setPasswordConfirm(e.target.value); setChangeError(null); }}
                  placeholder="确认新密码"
                  minLength={8}
                  required
                  className="w-full rounded-lg border border-gray-200 dark:border-gray-600 px-4 py-2.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-gray-800"
                />
                {changeError && <p className="text-sm text-red-600 dark:text-red-400">{changeError}</p>}
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => setShowChangeForm(false)}
                    className="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800"
                  >
                    取消
                  </button>
                  <button
                    type="submit"
                    disabled={changing}
                    className="flex-1 rounded-lg bg-[#ff4d4f] py-2.5 font-semibold text-white disabled:opacity-70"
                  >
                    {changing ? "提交中…" : "确认修改"}
                  </button>
                </div>
              </form>
            )}
            <button
              type="button"
              onClick={() => setShowPasswordModal(false)}
              className="mt-3 w-full text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"
            >
              稍后修改
            </button>
          </div>
        </div>
      )}
    </>
  );
}