"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import PocketBase from "pocketbase";
import { getPayEnv, getDeviceFromEnv } from "@/app/lib/payEnv";
import { getPaymentConfig } from "@/config/services.config";
import { formatRestoreDateShort } from "@/config/promo.config";
import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";
import { ThemeToggle } from "@/app/components/ThemeToggle";
import styles from "./home.module.css";

const PB_URL =
  process.env.NEXT_PUBLIC_POCKETBASE_URL || "https://pocketbase.hackrobot.cn";

/** 临时：预览支付成功后的界面，本地调试用，上线前改回 false */
const FORCE_VIP_PREVIEW = false;

/** 微信内支付渠道：zpay | xorpay */
const WECHAT_PAY_PROVIDER: "zpay" | "xorpay" = "xorpay";

function redirectToPayZpay(params: {
  user_id: string;
  return_url: string;
  total_fee: number;
  type: string;
  channel: "alipay" | "wxpay";
  device: "pc" | "h5" | "wechat";
}) {
  const form = document.createElement("form");
  form.method = "POST";
  form.action = "/api/pay";
  form.target = "_self";
  form.style.display = "none";
  const fields: [string, string][] = [
    ["user_id", params.user_id],
    ["return_url", params.return_url],
    ["total_fee", String(params.total_fee)],
    ["type", params.type],
    ["channel", params.channel],
    ["device", params.device],
    ["provider", "zpay"],
    ["html", "1"],
  ];
  fields.forEach(([k, v]) => {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = k;
    input.value = v;
    form.appendChild(input);
  });
  document.body.appendChild(form);
  form.submit();
}

async function redirectToPayZpayH5(params: {
  user_id: string;
  return_url: string;
  total_fee: number;
  type: string;
  channel: "alipay" | "wxpay";
}): Promise<string | null> {
  const res = await fetch("/api/pay", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      ...params,
      device: "h5",
      provider: "zpay",
      html: "0",
    }),
  });
  const data = await res.json().catch(() => ({}));
  if (!data?.ok || !data?.params || !data?.payUrl) {
    alert(data?.error || "支付发起失败");
    return null;
  }
  const orderId = data?.order_id?.trim() || null;
  if (data?.redirect_url) {
    window.open(data.redirect_url, "_blank");
    return orderId;
  }
  const form = document.createElement("form");
  form.method = "POST";
  form.action = data.payUrl;
  form.target = "_blank";
  form.style.display = "none";
  for (const [k, v] of Object.entries(data.params as Record<string, string>)) {
    if (v == null) continue;
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = k;
    input.value = String(v);
    form.appendChild(input);
  }
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
  return orderId;
}

async function payWechatXorpay(params: {
  user_id: string;
  return_url: string;
  total_fee: number;
  type: string;
  channel: "alipay" | "wxpay";
}) {
  const res = await fetch("/api/pay", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      ...params,
      total_fee: params.total_fee,
      device: "wechat",
      provider: "xorpay",
      html: "0",
    }),
  });
  const data = await res.json().catch(() => ({}));
  if (!data?.ok || !data?.params || !data?.payUrl) {
    alert(data?.error || "支付发起失败");
    return;
  }
  const form = document.createElement("form");
  form.method = "POST";
  form.action = data.payUrl;
  form.target = "_self";
  form.style.display = "none";
  for (const [k, v] of Object.entries(data.params as Record<string, string>)) {
    if (v == null) continue;
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = k;
    input.value = String(v);
    form.appendChild(input);
  }
  document.body.appendChild(form);
  form.submit();
}

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

function setStorage(key: string, value: string): void {
  if (typeof window === "undefined") return;
  localStorage.setItem(key, value);
}

function removeStorage(key: string): void {
  if (typeof window === "undefined") return;
  localStorage.removeItem(key);
}

const FEATURES = [
  {
    icon: "🚀",
    title: "业务方向",
    desc: "无人直播、RPA 自动化、Web 开发，找到你的变现路径",
  },
  {
    icon: "⚙️",
    title: "技术杠杆",
    desc: "云手机、PVE 虚拟化、服务器集群，低成本放大收益",
  },
  {
    icon: "🌐",
    title: "海外平台",
    desc: "YouTube、TikTok、SaaS 运营实战，出海掘金",
  },
];

const UNLOCK_ITEMS = [
  { icon: "📖", title: "电子书", desc: "地理套利·自动化", href: "/ebook" },
  { icon: "🎬", title: "视频教程", desc: "云手机·无人直播", href: "/cloudphone" },
  { icon: "👥", title: "私密社群", desc: "抱团出海", href: null },
  { icon: "🛒", title: "商店", desc: "设备自助", href: null },
  { icon: "💬", title: "即时问答", desc: "技术咨询", href: "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot" },
  { icon: "🎪", title: "线下沙龙", desc: "面交·对接", href: null },
];

export default function Home() {
  const [paidType, setPaidType] = useState<string | null>(null);
  const [userName, setUserName] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [payPendingOrderId, setPayPendingOrderId] = useState<string | null>(null);

  const savePaidType = useCallback((type: string | null) => {
    if (type) setStorage("paidType", type);
    else removeStorage("paidType");
    setPaidType(type);
  }, []);

  const saveUserName = useCallback((name: string) => {
    setStorage("userName", name);
    setUserName(name);
  }, []);

  const getOrCreateUserId = useCallback(() => {
    let userId = getStorage("userId");
    if (userId?.startsWith("{") && userId.includes("data")) {
      try {
        const parsed = JSON.parse(userId) as { data?: string };
        if (parsed?.data) {
          userId = parsed.data;
          setStorage("userId", userId);
        }
      } catch {
        userId = null;
      }
    }
    if (!userId) {
      userId = `user${Date.now()}`;
      setStorage("userId", userId);
    }
    return userId;
  }, []);

  const checkPaymentFromPB = useCallback(async (userId: string) => {
    try {
      const pb = new PocketBase(PB_URL);
      const records = await pb.collection("payments").getList(1, 1, {
        filter: `user_id = "${userId}"`,
        sort: "-created",
      });

      if (records.items.length > 0) {
        const latestType = records.items[0].type as string;
        const dbUserId = records.items[0].user_id as string;
        savePaidType(latestType);
        saveUserName(dbUserId);
        return latestType;
      } else {
        savePaidType(null);
        return null;
      }
    } catch (err) {
      console.error("查询 PocketBase 失败:", err);
      return getStorage("paidType");
    }
  }, [savePaidType, saveUserName]);

  const clearAllStorage = useCallback(() => {
    try {
      if (typeof window === "undefined") return;
      const keys = ["userId", "paidType", "userName"];
      keys.forEach((k) => {
        try {
          localStorage.removeItem(k);
        } catch {
          /* ignore */
        }
      });
      try {
        for (let i = localStorage.length - 1; i >= 0; i--) {
          const key = localStorage.key(i);
          if (key) localStorage.removeItem(key);
        }
      } catch {
        /* ignore */
      }
      try {
        sessionStorage.clear();
      } catch {
        /* ignore */
      }
      setPaidType(null);
      setUserName(null);
      setLoading(false);
      const path = window.location.pathname || "/";
      window.location.replace(path);
    } catch (error) {
      console.error("清空存储失败:", error);
    }
  }, []);

  const handlePay = useCallback(async () => {
    const userId = getOrCreateUserId();
    const returnUrl = `${window.location.origin}/paid`;
    const env = getPayEnv();
    const device = getDeviceFromEnv(env);
    const totalFee = getPaymentConfig().defaultAmount ?? 8800;
    const base = { user_id: userId, return_url: returnUrl, total_fee: totalFee, type: "vip", channel: "wxpay" as const };
    if (device === "wechat" && WECHAT_PAY_PROVIDER === "xorpay") {
      payWechatXorpay(base);
    } else if (device === "h5") {
      const orderId = await redirectToPayZpayH5(base);
      if (orderId) setPayPendingOrderId(orderId);
    } else {
      redirectToPayZpay({ ...base, device });
    }
  }, [getOrCreateUserId]);

  const handleCopyUsername = useCallback(() => {
    const name = userName || "";
    if (typeof navigator !== "undefined" && navigator.clipboard) {
      navigator.clipboard.writeText(name);
      alert("账号已复制");
    }
  }, [userName]);

  const env = getPayEnv();
  const device = getDeviceFromEnv(env);
  const isH5 = device === "h5";
  usePayStatusPoll(
    (orderId) => {
      let uid = getStorage("userId");
      if (!uid && orderId?.includes("_order_")) {
        const prefix = orderId.split("_order_")[0];
        const parts = prefix.split("_");
        if (parts.length >= 2) uid = parts.slice(0, -1).join("_");
      }
      if (uid) saveUserName(uid);
      savePaidType("vip");
      if (isH5) setPayPendingOrderId(null);
      window.location.reload();
    },
    () => {
      if (isH5) setPayPendingOrderId(null);
    },
    isH5 ? payPendingOrderId : undefined
  );

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("type")?.trim() === "clean") {
      clearAllStorage();
      return;
    }
    if (urlParams.get("paid") === "1") {
      savePaidType("vip");
      saveUserName(getStorage("userId") || "");
    }

    const init = async () => {
      getOrCreateUserId();

      const localType = getStorage("paidType");
      const localUserName = getStorage("userName");
      if (localType && localUserName) {
        setPaidType(localType);
        setUserName(localUserName);
        setLoading(false);
        return;
      }

      const userId = getStorage("userId");
      if (userId) {
        await checkPaymentFromPB(userId);
      }
      setLoading(false);
    };

    init();
  }, [clearAllStorage, getOrCreateUserId, checkPaymentFromPB, savePaidType, saveUserName]);

  useEffect(() => {
    const syncFromStorage = () => {
      const localType = getStorage("paidType");
      const localUserName = getStorage("userName");
      if (localType && localUserName && !paidType) {
        setPaidType(localType);
        setUserName(localUserName);
      }
    };
    const onVisible = () => syncFromStorage();
    const onPageShow = (e: PageTransitionEvent) => {
      if (e.persisted) syncFromStorage();
    };
    if (typeof document !== "undefined" && document.addEventListener) {
      document.addEventListener("visibilitychange", onVisible);
      window.addEventListener("pageshow", onPageShow);
      return () => {
        document.removeEventListener("visibilitychange", onVisible);
        window.removeEventListener("pageshow", onPageShow);
      };
    }
  }, [paidType]);

  if (loading) {
    return (
      <div className={styles.loading}>
        <div className={styles.loadingSpinner} />
        <p>加载中...</p>
      </div>
    );
  }

  if (FORCE_VIP_PREVIEW || paidType === "vip") {
    return (
      <div className={styles.root}>
        <header className={styles.header}>
          <Link href="https://digital.hackrobot.cn/zh" className={styles.logo} target="_blank" rel="noopener">
            🌍 异度星球
          </Link>
        <nav className={styles.nav}>
          <ThemeToggle />
        </nav>
      </header>

        <main className={styles.main}>
          <section className={styles.vipSuccess}>
            <div className={`${styles.vipSuccessCard} animate__animated animate__zoomIn`} style={{ animationDelay: "0.1s", animationFillMode: "both" }}>
              <div className={styles.vipSuccessIcon}>✅</div>
              <h1>欢迎加入异度星球</h1>
              <p className={styles.vipSuccessDesc}>您已解锁全部 VIP 权益</p>
              <div className={styles.vipCode}>
                <div className={styles.vipCodeRow}>
                  <span>星球地址</span>
                  <code>qun.hackrobot.cn</code>
                </div>
                <div className={styles.vipCodeRow}>
                  <span>账号</span>
                  <code>{getStorage("userName") || (FORCE_VIP_PREVIEW ? "preview" : "")}</code>
                  <button type="button" onClick={handleCopyUsername}>复制</button>
                </div>
                <div className={styles.vipCodeRow}>
                  <span>密码</span>
                  <code>123456</code>
                </div>
                <a
                  href="https://qun.hackrobot.cn"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={styles.vipCta}
                >
                  进入星球 →
                </a>
                <p className={styles.vipTip}>打开网页后，请点击「左上角头像」打开侧面栏</p>
              </div>
            </div>
          </section>
        </main>
      </div>
    );
  }

  return (
    <div className={styles.root}>
      <header className={styles.header}>
        <Link href="https://digital.hackrobot.cn/zh" className={styles.logo} target="_blank" rel="noopener">
          🌍 异度星球
        </Link>
        <nav className={styles.nav}>
          <ThemeToggle />
        </nav>
      </header>

      <main className={styles.main}>
        <section className={styles.hero}>
          <p className={`${styles.heroBadge} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.1s", animationFillMode: "both" }}>🎒 数字游民进阶社群 · 私密资源</p>
          <h1 className={`${styles.heroTitle} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
            异度星球
          </h1>
          <p className={`${styles.heroSubtitle} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.3s", animationFillMode: "both" }}>
            解锁电子书、视频教程、即时问答 · 抱团出海，技术杠杆
          </p>
        </section>

        <section className={`${styles.section} ${styles.sectionTightTop}`}>
          <div className={styles.features}>
            {FEATURES.map((f, i) => (
              <div key={i} className={`${styles.featureCard} animate__animated animate__fadeInUp`} style={{ animationDelay: `${0.3 + i * 0.1}s`, animationFillMode: "both" }}>
                <span className={styles.featureIcon}>{f.icon}</span>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            ))}
          </div>
        </section>

        <section className={styles.section}>
          <h2 className="animate__animated animate__fadeInDown" style={{ animationDelay: "0.1s", animationFillMode: "both" }}>🔓 解锁 VIP</h2>
          <p className={`${styles.sectionDesc} animate__animated animate__fadeInUp`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
            一次付费·全部解锁
          </p>
          <div className={styles.unlockGrid}>
            {UNLOCK_ITEMS.map((item, i) => (
              <div
                key={i}
                className={`${styles.unlockCard} ${styles.unlockCardDisabled} animate__animated animate__fadeInUp`}
                style={{ animationDelay: `${0.25 + i * 0.06}s`, animationFillMode: "both" }}
              >
                <span className={styles.unlockIcon}>{item.icon}</span>
                <span className={styles.unlockTitle}>{item.title}</span>
                <span className={styles.unlockDesc}>{item.desc}</span>
              </div>
            ))}
          </div>
        </section>

        <section className={`${styles.section} ${styles.sectionCta}`}>
          <div className={`${styles.ctaCard} animate__animated animate__zoomIn`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
            <h2>限时特惠 · {formatRestoreDateShort()}恢复原价</h2>
            <p>阶梯定价 · 数字交付 · 不支持退款</p>
            <p className={styles.ctaNote}>🚫 不适合躺赚、现金流紧张</p>
            <button
              type="button"
              onClick={() => { handlePay(); }}
              className={`${styles.btnPrimary} ${styles.btnLarge}`}
            >
              🔒 解锁 VIP
            </button>
          </div>
        </section>
      </main>
    </div>
  );
}