"use client";

import Link from "next/link";
import { useMemo } from "react";
import { useTrack } from "@/hooks/use-track";
import { TRACKING_EVENTS } from "@/lib/tracking-events";
import { useAuth } from "@/components/auth-provider";

export function AccessGate({ slug, children }: { slug: string; children: React.ReactNode }) {
  const { session, loginAs, setAccessLevel } = useAuth();
  const { track } = useTrack();
  const state = session.accessLevel;

  const hint = useMemo(() => {
    if (state === "vip") return "当前状态：VIP。可访问全部下载渠道与历史版本包。";
    if (state === "unlocked") return "当前状态：已解锁。可访问部分高级下载源。";
    return "当前状态：游客。请先解锁或开通 VIP。";
  }, [state]);

  return (
    <section className="card-glass space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h3 className="text-lg font-semibold">下载权限门禁</h3>
          <p className="text-sm text-slate-300">{hint}</p>
        </div>
        <div className="flex gap-2">
          <button
            className={`pill ${state === "guest" ? "pill-active" : ""}`}
            onClick={() => setAccessLevel("guest")}
          >
            游客
          </button>
          <button
            className={`pill ${state === "unlocked" ? "pill-active" : ""}`}
            onClick={() => setAccessLevel("unlocked")}
          >
            已解锁
          </button>
          <button
            className={`pill ${state === "vip" ? "pill-active" : ""}`}
            onClick={() => setAccessLevel("vip")}
          >
            VIP
          </button>
        </div>
      </div>
      {!session.isLoggedIn && (
        <div className="rounded-2xl border border-cyan-300/20 bg-cyan-400/10 p-3 text-sm text-slate-100">
          <p>当前未登录，建议先登录后再解锁下载权限。</p>
          <button
            className="cta-sub mt-2"
            onClick={() => {
              loginAs();
              track(TRACKING_EVENTS.ctaClick, { slug, target: "login_quick" });
            }}
          >
            一键模拟登录
          </button>
        </div>
      )}

      {state === "guest" && (
        <div className="rounded-2xl border border-amber-300/30 bg-amber-400/10 p-4 text-sm text-amber-100">
          <p>你还未解锁当前资源。</p>
          <div className="mt-3 flex flex-wrap gap-2">
            <Link
              href="/unlock"
              onClick={() => track(TRACKING_EVENTS.ctaClick, { slug, target: "unlock_center", gate: "guest" })}
              className="cta-sub"
            >
              去解锁中心
            </Link>
            <Link
              href={`/checkout?plan=pro&slug=${slug}`}
              onClick={() => track(TRACKING_EVENTS.ctaClick, { slug, target: "checkout", gate: "guest" })}
              className="cta-main"
            >
              开通 VIP
            </Link>
          </div>
        </div>
      )}

      {state !== "guest" && children}
    </section>
  );
}