import type { Metadata } from "next";
import Link from "next/link";
import { CheckCircle2 } from "lucide-react";

import { SupportActions } from "@/components/layout/support-actions";
import { GlassCard } from "@/components/shared/glass-card";
import { ButtonLink } from "@/components/ui/button-link";

export const metadata: Metadata = {
  title: "Payment successful",
  robots: { index: false, follow: false },
};

export default function CheckoutSuccessPage() {
  return (
    <div className="section-padding mx-auto max-w-2xl text-center">
      <div className="mx-auto flex size-16 items-center justify-center rounded-full bg-primary/15 text-primary">
        <CheckCircle2 className="size-9" />
      </div>
      <h1 className="font-display mt-8 text-4xl tracking-wide text-foreground sm:text-5xl">
        YOU&apos;RE IN.
      </h1>
      <p className="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
        Payment confirmed. We&apos;ve sent a confirmation email with your plan details,
        dashboard link, and support options.
      </p>

      <GlassCard className="mt-10 p-8 text-left">
        <p className="font-semibold text-foreground">Next steps</p>
        <ol className="mt-4 space-y-3 text-sm text-muted-foreground">
          <li className="flex gap-3">
            <span className="font-semibold text-primary">1.</span>
            Open your dashboard — you should be signed in right after payment
          </li>
          <li className="flex gap-3">
            <span className="font-semibold text-primary">2.</span>
            Next time, sign in with the same checkout email (set a password if you have not yet)
          </li>
          <li className="flex gap-3">
            <span className="font-semibold text-primary">3.</span>
            Message us on WhatsApp
          </li>
        </ol>
        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
          <ButtonLink href="/dashboard?paid=1" className="rounded-xl px-8">
            Go to dashboard
          </ButtonLink>
          <ButtonLink href="/signup?from=purchase" variant="outline" className="rounded-xl">
            Set a password
          </ButtonLink>
        </div>
      </GlassCard>

      <div className="mt-10 flex justify-center">
        <SupportActions layout="stack" unlock />
      </div>

      <p className="mt-10">
        <Link
          href="/"
          className="text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
        >
          Back to home
        </Link>
      </p>
    </div>
  );
}