"use client";
import { useTranslations } from "next-intl";
import { motion, useReducedMotion } from "motion/react";
import { Check, LayoutDashboard } from "lucide-react";
import { Button } from "@/components/ui/button";
import InviteDetails from "./InviteDetails";
import type { InvitePayload } from "@/lib/invite";

interface SuccessStepProps {
  invite: InvitePayload;
  email: string;
  dashboardUrl: string;
}

// Little burst of confetti dots around the check mark
const PARTICLES = Array.from({ length: 12 }, (_, i) => {
  const angle = (i / 12) * Math.PI * 2;
  const distance = 64 + (i % 3) * 14;
  return {
    x: Math.cos(angle) * distance,
    y: Math.sin(angle) * distance,
    size: i % 2 ? 6 : 8,
    color: i % 3 === 0 ? "#ffffff" : i % 3 === 1 ? "#cfdc33" : "#6fcf97",
  };
});

export default function SuccessStep({
  invite,
  email,
  dashboardUrl,
}: SuccessStepProps) {
  const t = useTranslations("InvitePage");
  const reduceMotion = useReducedMotion();

  return (
    <div className="flex flex-col gap-6 sm:gap-8">
      <div className="flex flex-col items-center text-center gap-4">
        <div className="relative flex size-36 items-center justify-center">
          {!reduceMotion &&
            PARTICLES.map((p, i) => (
              <motion.span
                key={i}
                className="absolute rounded-full"
                style={{ width: p.size, height: p.size, backgroundColor: p.color }}
                initial={{ x: 0, y: 0, opacity: 0, scale: 0 }}
                animate={{ x: p.x, y: p.y, opacity: [0, 1, 0], scale: [0, 1, 0.6] }}
                transition={{ duration: 1.2, delay: 0.25, ease: "easeOut" }}
              />
            ))}
          <motion.span
            className="relative flex size-20 sm:size-24 items-center justify-center rounded-full bg-success-main text-white shadow-[0_12px_40px_-10px_rgba(39,174,96,0.8)]"
            initial={reduceMotion ? false : { scale: 0, rotate: -45 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ type: "spring", stiffness: 260, damping: 18 }}
          >
            <Check className="size-10 sm:size-12" strokeWidth={3} />
          </motion.span>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-[24px] sm:text-[32px] font-bold text-success-lighter">
            {t("successTitle")}
          </h1>
          <p className="text-[14px] sm:text-[18px] text-white/75 max-w-[440px]">
            {t.rich("successDescription", {
              company: invite.cn,
              strong: (chunks) => (
                <strong className="font-bold text-white">{chunks}</strong>
              ),
            })}
          </p>
        </div>
      </div>

      <InviteDetails invite={invite} showExpiry={false} />

      <Button asChild className="w-full font-bold">
        <a href={dashboardUrl}>
          <LayoutDashboard className="size-5" />
          {t("goToDashboard")}
        </a>
      </Button>
    </div>
  );
}