import { Check, Crown } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { SubscribeButton } from "@/components/membership/SubscribeButton";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { getPublishedPlans } from "@/lib/queries/membership";
import {
  getCurrentUser,
  userHasActiveMembership,
} from "@/lib/user-auth";
import { parseJsonArray } from "@/lib/utils";

export const metadata = {
  title: "會員方案",
  description: "訂閱 NightWalkAsia 會員，解鎖老司機專屬夜遊情報與進階攻略。",
};

export default async function MembershipPage() {
  const [plans, user] = await Promise.all([
    getPublishedPlans(),
    getCurrentUser(),
  ]);

  const isMember = user ? await userHasActiveMembership(user.id) : false;

  return (
    <div className="py-12 sm:py-16">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          title="NightWalkAsia 會員"
          subtitle="解鎖老司機專屬攻略、進階場地情報與深度夜遊分析"
          align="center"
        />

        <div className="mx-auto mt-4 max-w-2xl text-center text-muted-foreground">
          <p>
            會員可閱覽標示「會員專屬」的指南文章與進階場地情報，獲得更深入的夜遊體驗。
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2">
          {plans.map((plan) => {
            const features = parseJsonArray(plan.features);
            return (
              <Card
                key={plan.id}
                className="border-border bg-card transition-all hover:border-primary/40"
              >
                <CardHeader>
                  <div className="flex items-center gap-2 text-primary">
                    <Crown className="size-5" />
                    <span className="text-sm font-medium">會員方案</span>
                  </div>
                  <CardTitle className="text-2xl">{plan.nameZh}</CardTitle>
                  <p className="text-3xl font-bold text-primary">{plan.priceLabel}</p>
                  <p className="text-sm text-muted-foreground">{plan.description}</p>
                </CardHeader>
                <CardContent className="space-y-6">
                  <ul className="space-y-2">
                    {features.map((f) => (
                      <li key={f} className="flex items-start gap-2 text-sm">
                        <Check className="mt-0.5 size-4 shrink-0 text-primary" />
                        {f}
                      </li>
                    ))}
                  </ul>
                  <SubscribeButton
                    planId={plan.id}
                    planName={plan.nameZh}
                    isLoggedIn={!!user}
                    isMember={isMember}
                  />
                </CardContent>
              </Card>
            );
          })}
        </div>

        <p className="mt-8 text-center text-xs text-muted-foreground">
          目前為測試訂閱模式。正式上線後將接入付款閘道（如信用卡／行動支付）。
        </p>
      </div>
    </div>
  );
}