import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Link } from "@tanstack/react-router";
import { Check, Sparkles, X } from "lucide-react";
import { PLAN_BY_ID } from "@/lib/plans";

export type UpgradeReason = "decisions" | "simulations" | null;

const COPY: Record<Exclude<UpgradeReason, null>, { title: string; body: string }> = {
  decisions: {
    title: "You've used all 5 AI decisions",
    body: "Free includes 5 AI decisions each month. Your allowance resets on the 1st — or go unlimited with Pro.",
  },
  simulations: {
    title: "You've used all 5 simulations",
    body: "Free includes 5 scenario simulations each month. Your allowance resets on the 1st — or go unlimited with Pro.",
  },
};

export function UpgradeDialog({ reason, onClose }: { reason: UpgradeReason; onClose: () => void }) {
  const copy = reason ? COPY[reason] : null;
  const pro = PLAN_BY_ID.pro;

  return (
    <Dialog open={!!reason} onOpenChange={(o) => !o && onClose()}>
      <DialogContent className="max-w-sm rounded-3xl glass border-white/10 p-0 overflow-hidden">
        <div className="relative px-6 pt-7 pb-6">
          <div className="absolute -top-16 left-1/2 -translate-x-1/2 size-52 rounded-full bg-electric/25 blur-[80px] pointer-events-none" />
          <button onClick={onClose} className="absolute right-4 top-4 size-8 rounded-full bg-white/5 grid place-items-center" aria-label="Close">
            <X className="size-4" />
          </button>
          <div className="relative animate-aura-slide-up">
            <div className="size-12 rounded-2xl bg-gradient-to-br from-electric to-purple grid place-items-center glow-electric">
              <Sparkles className="size-5 text-primary-foreground" />
            </div>
            <h2 className="mt-4 text-xl font-semibold leading-tight">{copy?.title}</h2>
            <p className="mt-2 text-[13px] text-muted-foreground leading-relaxed">{copy?.body}</p>

            <ul className="mt-5 space-y-2">
              {pro.features.slice(0, 4).map((f) => (
                <li key={f} className="flex items-center gap-2 text-[13px]">
                  <Check className="size-3.5 text-electric shrink-0" />
                  <span>{f}</span>
                </li>
              ))}
            </ul>

            <div className="mt-6 space-y-2">
              <Button asChild className="w-full rounded-full bg-gradient-to-br from-electric to-purple text-primary-foreground">
                <Link to="/plans" search={{ from: "limit" }}>See PRUDENTIA Pro</Link>
              </Button>
              <Button onClick={onClose} variant="ghost" className="w-full rounded-full text-muted-foreground">
                Not now
              </Button>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}