import type { Metadata } from "next";
import Link from "next/link";
import { PageContainer } from "@/components/layout/PageContainer";
import { Button } from "@/components/ui/button";
import { pricingService } from "@/modules/pricing";
import { formatCurrency } from "@/lib/client-api";
import { ROUTES } from "@/config/routes.config";

export const dynamic = "force-dynamic";
export const metadata: Metadata = {
  title: "Pricing · Event Manager",
};

const PERIOD_LABEL: Record<string, string> = {
  monthly: "/month",
  yearly: "/year",
  lifetime: "lifetime",
};

export default async function PricingPage() {
  const plans = await pricingService.listActive();
  return (
    <PageContainer>
      <header className="mx-auto max-w-2xl text-center">
        <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
          Simple, transparent pricing
        </h1>
        <p className="mt-3 text-muted">
          Choose a plan that scales with your events.
        </p>
      </header>

      {plans.length === 0 ? (
        <p className="mt-12 text-center text-muted">
          Plans will appear here once published from the admin panel.
        </p>
      ) : (
        <div className="mt-10 grid gap-4 lg:grid-cols-3">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={`flex flex-col rounded-2xl border bg-surface p-6 shadow-sm ${
                plan.isPopular ? "border-primary" : "border-border"
              }`}
            >
              <div className="flex items-center justify-between">
                <h2 className="text-lg font-semibold text-foreground">
                  {plan.name}
                </h2>
                {plan.isPopular ? (
                  <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground">
                    Popular
                  </span>
                ) : null}
              </div>
              <p className="mt-1 text-sm text-muted">{plan.description}</p>
              <p className="mt-4 text-3xl font-semibold text-foreground">
                {formatCurrency(
                  plan.offerPrice ?? plan.price,
                  plan.currency,
                )}
                <span className="ml-1 text-sm font-normal text-muted">
                  {PERIOD_LABEL[plan.billingPeriod] ?? plan.billingPeriod}
                </span>
              </p>
              {plan.offerPrice ? (
                <p className="mt-1 text-xs text-muted">
                  <s>{formatCurrency(plan.price, plan.currency)}</s>
                  {plan.offerLabel ? ` · ${plan.offerLabel}` : ""}
                </p>
              ) : null}
              <ul className="mt-4 space-y-1.5 text-sm">
                {plan.features.map((f, idx) => (
                  <li key={idx} className="flex items-start gap-2 text-foreground/90">
                    <svg viewBox="0 0 24 24" className="mt-0.5 h-4 w-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-auto pt-6">
                <Link href={ROUTES.register}>
                  <Button
                    size="md"
                    className="w-full"
                    variant={plan.isPopular ? "primary" : "secondary"}
                  >
                    Get started
                  </Button>
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}
    </PageContainer>
  );
}