import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { Check } from "lucide-react";
import { MarketingLayout } from "@/components/marketing/MarketingLayout";
import { listPlans } from "@/lib/plans.functions";

export const Route = createFileRoute("/pricing")({
  head: () => ({
    meta: [
      { title: "Pricing — eBay BOS" },
      { name: "description", content: "Simple, transparent pricing. Start free forever, upgrade when you're ready." },
      { property: "og:title", content: "Pricing — eBay BOS" },
      { property: "og:description", content: "Simple, transparent pricing. Start free forever, upgrade when you're ready." },
    ],
  }),
  component: Pricing,
});

function Pricing() {
  const fetchPlans = useServerFn(listPlans);
  const plans = useQuery({
    queryKey: ["plans-public"],
    queryFn: () => fetchPlans({ data: undefined as never }),
  });

  return (
    <MarketingLayout>
      <section className="mx-auto max-w-5xl px-6 py-20">
        <div className="text-center">
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Simple pricing</h1>
          <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
            Start free forever. Upgrade only when you need more.
          </p>
        </div>

        <div className="mt-14 grid gap-4 md:grid-cols-3">
          {plans.data?.map((p) => {
            const features = Object.entries((p.features as Record<string, unknown>) ?? {})
              .filter(([, v]) => v)
              .map(([k]) => k);
            const isFree = p.price_cents === 0;
            return (
              <div key={p.id} className="flex flex-col rounded-xl border bg-card p-6">
                <h3 className="text-lg font-semibold">{p.name}</h3>
                {p.description && (
                  <p className="mt-1 text-sm text-muted-foreground">{p.description}</p>
                )}
                <div className="mt-4 flex items-baseline gap-1">
                  <span className="text-4xl font-bold">${(p.price_cents / 100).toFixed(0)}</span>
                  <span className="text-sm text-muted-foreground">/{p.interval}</span>
                </div>
                <ul className="mt-5 flex-1 space-y-2 text-sm">
                  {features.length === 0 && (
                    <li className="text-muted-foreground">Standard features included</li>
                  )}
                  {features.map((f) => (
                    <li key={f} className="flex items-center gap-2">
                      <Check className="h-4 w-4 text-primary" /> {f.replace(/_/g, " ")}
                    </li>
                  ))}
                </ul>
                <Link
                  to="/auth"
                  className="mt-6 inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
                >
                  {isFree ? "Start free" : "Get started"}
                </Link>
              </div>
            );
          })}
        </div>
        {plans.data?.length === 0 && !plans.isLoading && (
          <div className="mt-10 text-center text-sm text-muted-foreground">
            Pricing is being updated. Please check back soon.
          </div>
        )}
      </section>
    </MarketingLayout>
  );
}