"use client";

import { Check } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { pricingPlans } from "@/lib/mock-data";
import { useLanguage } from "@/lib/i18n/context";
import { useCurrentUser } from "@/hooks/use-current-user";

/**
 * Guests are sent through register → verify → login with the target
 * billing URL (plan preselected) carried as `callbackUrl` the whole way —
 * see registerAction, the verification email link, and LoginForm, which
 * together land the user back on /dashboard/billing with the same
 * plan+interval already chosen. No charge happens until they explicitly
 * click "Choose plan" there (see billing-page-content.tsx).
 */
function ctaHref(planCode: "FREE" | "PRO" | "AGENCY", isAuthenticated: boolean): string {
  if (planCode === "FREE") return isAuthenticated ? "/dashboard" : "/register";
  const billingUrl = `/dashboard/billing?plan=${planCode.toLowerCase()}&interval=monthly`;
  return isAuthenticated ? billingUrl : `/register?callbackUrl=${encodeURIComponent(billingUrl)}`;
}

export function Pricing() {
  const { t } = useLanguage();
  const { status } = useCurrentUser();
  const isAuthenticated = status === "authenticated";

  return (
    <section id="pricing" className="py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.pricing.eyebrow}
          title={t.pricing.title}
          description={t.pricing.description}
        />

        <div className="mx-auto grid w-full max-w-6xl gap-6 lg:grid-cols-3">
          {pricingPlans.map((plan, i) => {
            const label = t.pricing.plans[i];
            return (
              <FadeIn
                key={plan.name}
                delay={i * 0.08}
                className={cn(
                  "relative flex flex-col gap-6 rounded-2xl border p-6 sm:p-7",
                  plan.highlight
                    ? "border-brand-cyan/50 bg-primary/5 shadow-xl shadow-brand-blue/10 lg:-translate-y-2"
                    : "border-border bg-card/40",
                )}
              >
                {label.badge ? (
                  <Badge className="absolute -top-3 left-6 bg-gradient-to-r from-brand-cyan to-brand-blue text-background">
                    {label.badge}
                  </Badge>
                ) : null}

                <div className="flex flex-col gap-1.5">
                  <h3 className="text-base font-semibold text-foreground">
                    {label.name}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {label.description}
                  </p>
                </div>

                <div className="flex items-baseline gap-1.5">
                  <span className="text-4xl font-semibold tracking-tight text-foreground">
                    {plan.price}
                  </span>
                  <span className="text-sm text-muted-foreground">
                    {label.period}
                  </span>
                </div>

                <Button
                  size="lg"
                  variant={plan.highlight ? "default" : "outline"}
                  asChild
                >
                  <a href={ctaHref(plan.code, isAuthenticated)}>{label.cta}</a>
                </Button>

                <ul className="flex flex-col gap-3 border-t border-border pt-5">
                  {label.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2.5 text-sm">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-cyan" />
                      <span className="text-muted-foreground">{feature}</span>
                    </li>
                  ))}
                </ul>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}