import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, Check, Crown, Sparkles, Star, UserRound } from "lucide-react";
import { PLANS, formatVnd } from "@/lib/billing/plans";
import { currentUser } from "@/lib/charts";
import { prisma } from "@/lib/db";
import { UpgradeForm } from "@/components/billing/upgrade-form";

export const metadata: Metadata = {
  title: "Bảng giá — Tử Vi Số",
  description: "Chọn gói phù hợp: Miễn phí cho người mới, Premium cho người đào sâu lá số tử vi.",
};

export default async function PricingPage() {
  const me = await currentUser();
  let myPlan: "FREE" | "PREMIUM" = "FREE";
  let pendingRequestId: string | null = null;
  if (me) {
    const u = await prisma.user.findUnique({
      where: { id: me.id },
      select: { plan: true },
    });
    myPlan = u?.plan === "PREMIUM" ? "PREMIUM" : "FREE";
    if (myPlan !== "PREMIUM") {
      const open = await prisma.upgradeRequest.findFirst({
        where: { userId: me.id, status: "PENDING" },
        select: { id: true },
      });
      pendingRequestId = open?.id ?? null;
    }
  }

  return (
    <div className="bg-bg-base relative">
      <div className="bagua-decor absolute inset-0 opacity-30" aria-hidden="true" />
      <div className="max-w-container relative mx-auto px-4 py-12 lg:px-6 lg:py-20">
        <div className="mb-8">
          <Link
            href="/"
            className="text-ink-muted hover:text-brand-gold inline-flex items-center gap-2 text-sm"
          >
            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
            Trang chủ
          </Link>
        </div>

        <header className="mb-12 text-center">
          <h1 className="font-display text-ink-primary text-4xl font-semibold lg:text-5xl">
            Bảng giá
          </h1>
          <p className="text-ink-secondary mx-auto mt-3 max-w-2xl text-base lg:text-lg">
            Bắt đầu miễn phí. Nâng cấp Premium khi bạn cần đọc sâu, lưu nhiều lá số, và xuất luận
            giải PDF.
          </p>
        </header>

        <div className="mx-auto grid max-w-6xl gap-6 lg:grid-cols-3 lg:items-stretch">
          {/* Tier 1: Khách (anonymous) */}
          <article className="border-stroke-default bg-bg-elevated/40 relative flex flex-col rounded-2xl border p-7 lg:p-9">
            {!me ? (
              <span className="absolute -top-3 left-6 rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-bold tracking-wide text-emerald-300 uppercase ring-1 ring-emerald-500/40">
                Đang dùng
              </span>
            ) : null}
            <span className="border-stroke-default text-ink-muted bg-bg-base absolute -top-3 right-6 rounded-full border px-3 py-1 text-xs font-bold tracking-wide uppercase">
              Trial
            </span>

            <div className="mb-5 flex items-baseline gap-2">
              <UserRound className="text-ink-muted h-6 w-6" aria-hidden="true" />
              <h2 className="font-display text-2xl font-semibold lg:text-3xl">Khách</h2>
            </div>

            <p className="text-ink-secondary mb-5 text-sm">
              Trải nghiệm nhanh, không cần đăng ký. Đủ dùng cho lần đầu khám phá.
            </p>

            <div className="mb-6 flex items-baseline gap-1.5">
              <span className="font-display text-ink-primary text-4xl font-bold lg:text-5xl">
                0₫
              </span>
            </div>

            <ul className="mb-7 space-y-2.5">
              {[
                "Lập lá số tử vi không giới hạn",
                "Tra cứu phong thủy, lịch âm dương",
                "3 lượt đọc &ldquo;Thầy&rdquo; chuyên sâu / 24h",
                "Không lưu được lá số",
                "Không xuất PDF",
              ].map((h) => (
                <li key={h} className="text-ink-secondary flex items-start gap-2 text-sm">
                  <Check className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" aria-hidden="true" />
                  <span dangerouslySetInnerHTML={{ __html: h }} />
                </li>
              ))}
            </ul>

            <div className="mt-auto">
              <Link
                href="/register"
                className="border-stroke-default text-ink-primary hover:bg-bg-inset flex w-full items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-medium transition"
              >
                Đăng ký miễn phí →
              </Link>
            </div>
          </article>

          {/* Tier 2 + 3: FREE + PREMIUM */}
          {(["FREE", "PREMIUM"] as const).map((key) => {
            const p = PLANS[key];
            const isPremium = key === "PREMIUM";
            const isCurrent = myPlan === key && !!me;
            return (
              <article
                key={key}
                className={
                  isPremium
                    ? "border-brand-gold/60 from-brand-gold/10 via-bg-elevated to-bg-base relative flex flex-col rounded-2xl border-2 bg-gradient-to-b p-7 shadow-lg lg:p-9"
                    : "border-stroke-default bg-bg-elevated/60 relative flex flex-col rounded-2xl border p-7 lg:p-9"
                }
              >
                {isCurrent ? (
                  <span className="absolute -top-3 left-6 rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-bold tracking-wide text-emerald-300 uppercase ring-1 ring-emerald-500/40">
                    Đang dùng
                  </span>
                ) : null}
                {isPremium ? (
                  <span className="bg-brand-gold text-bg-base absolute -top-3 right-6 rounded-full px-3 py-1 text-xs font-bold tracking-wide uppercase">
                    Đề xuất
                  </span>
                ) : (
                  <span className="absolute -top-3 right-6 rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-bold tracking-wide text-emerald-300 uppercase ring-1 ring-emerald-500/30">
                    Miễn Phí
                  </span>
                )}

                <div className="mb-5 flex items-baseline gap-2">
                  {isPremium ? (
                    <Crown className="text-brand-gold h-6 w-6" aria-hidden="true" />
                  ) : (
                    <Star className="text-ink-secondary h-6 w-6" aria-hidden="true" />
                  )}
                  <h2 className="font-display text-2xl font-semibold lg:text-3xl">{p.name}</h2>
                </div>

                <p className="text-ink-secondary mb-5 text-sm">{p.tagline}</p>

                <div className="mb-6 flex items-baseline gap-1.5">
                  <span className="font-display text-ink-primary text-4xl font-bold lg:text-5xl">
                    {p.priceVnd === 0 ? "0₫" : formatVnd(p.priceVnd)}
                  </span>
                  {p.priceVnd > 0 ? <span className="text-ink-muted text-sm">/tháng</span> : null}
                </div>

                <ul className="mb-7 space-y-2.5">
                  {p.highlights.map((h) => (
                    <li key={h} className="text-ink-secondary flex items-start gap-2 text-sm">
                      <Check
                        className={
                          isPremium
                            ? "text-brand-gold mt-0.5 h-4 w-4 shrink-0"
                            : "mt-0.5 h-4 w-4 shrink-0 text-emerald-400"
                        }
                        aria-hidden="true"
                      />
                      {h}
                    </li>
                  ))}
                </ul>

                <div className="mt-auto">
                  {isPremium ? (
                    me ? (
                      pendingRequestId ? (
                        <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-200">
                          <Sparkles className="mr-2 inline h-4 w-4" aria-hidden="true" />
                          Yêu cầu của bạn (mã{" "}
                          <code className="text-xs">{pendingRequestId.slice(-8)}</code>) đang chờ
                          admin xử lý. Vui lòng giữ Zalo/email mở để admin liên hệ.
                        </div>
                      ) : (
                        <UpgradeForm disabled={isCurrent} />
                      )
                    ) : (
                      <Link
                        href={`/login?next=${encodeURIComponent("/pricing")}`}
                        className="from-brand-gold via-brand-gold-soft to-brand-gold text-bg-base flex w-full items-center justify-center gap-2 rounded-md bg-gradient-to-r px-5 py-2.5 text-sm font-semibold transition hover:brightness-110"
                      >
                        Đăng nhập để nâng cấp
                      </Link>
                    )
                  ) : me ? (
                    <p className="text-ink-muted text-xs">
                      Bạn đang dùng gói &ldquo;Thành Viên&rdquo; — đầy đủ tính năng cốt lõi và lưu
                      lá số.
                    </p>
                  ) : (
                    <Link
                      href={`/register?next=${encodeURIComponent("/pricing")}`}
                      className="bg-bg-inset hover:bg-bg-base text-ink-primary flex w-full items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition"
                    >
                      Đăng ký để dùng →
                    </Link>
                  )}
                </div>
              </article>
            );
          })}
        </div>

        <div className="mx-auto mt-12 max-w-3xl text-center">
          <p className="text-ink-muted text-xs leading-relaxed">
            Hiện tại Premium được kích hoạt thủ công sau khi bạn chuyển khoản. Sau khi gửi yêu cầu,
            admin sẽ liên hệ qua thông tin bạn cung cấp để xác nhận thanh toán và mở khoá quyền lợi.
            Tích hợp thanh toán tự động qua Stripe / VNPay sẽ ra mắt trong các phiên bản tới.
          </p>
        </div>
      </div>
    </div>
  );
}