Celebrate Modal

"use client";

import type { CSSProperties, ReactNode } from "react";
import { Dialog } from "radix-ui";
import { cn } from "@/lib/utils";

export interface CelebrateModalProps {
  trigger?: ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  title?: string;
  description?: string;
  stats?: { value: string; label: string }[];
  cta?: string;
  da?: string;
}

const SHAPES = ["bg-da-accent", "bg-da-secondary", "bg-da-primary/60", "bg-da-warning", "bg-da-danger/60"];

/** “All done!” celebration dialog: pastel confetti shapes burst from the center, a big emoji, friendly copy, three weekly stats and a single pill button. */
export function CelebrateModal({
  trigger,
  open,
  onOpenChange,
  title = "Week complete! 🎉",
  description = "Your team finished every task on the board. Take a breath — you earned it.",
  stats = [
    { value: "48", label: "tasks done" },
    { value: "6", label: "people" },
    { value: "0", label: "overdue" },
  ],
  cta = "Plan next week",
  da = "soft-flat",
}: CelebrateModalProps) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay data-da={da} className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0" />
        <Dialog.Content
          data-da={da}
          className="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-[32px] bg-da-surface p-8 text-center text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration-slow) ease-da-emphasized starting:scale-75 starting:opacity-0 motion-reduce:transition-none"
        >
          <div aria-hidden className="pointer-events-none absolute inset-0">
            {Array.from({ length: 18 }, (_, i) => {
              const a = (i / 18) * Math.PI * 2;
              return (
                <span
                  key={i}
                  className={cn(
                    "sf-confetti absolute top-1/3 left-1/2",
                    SHAPES[i % SHAPES.length],
                    i % 3 === 0 ? "size-3 rounded-full" : i % 3 === 1 ? "h-2 w-4 rounded-full" : "size-3 rounded-[3px]",
                  )}
                  style={
                    {
                      "--cx": `${Math.cos(a) * (110 + (i % 4) * 25)}px`,
                      "--cy": `${Math.sin(a) * (90 + (i % 3) * 30)}px`,
                      animationDelay: `${(i % 5) * 30}ms`,
                    } as CSSProperties
                  }
                />
              );
            })}
          </div>
          <span aria-hidden className="relative mx-auto grid size-24 place-items-center rounded-full bg-da-warning/30 text-5xl">
            🏆
          </span>
          <Dialog.Title className="relative mt-5 font-da-display text-3xl font-extrabold tracking-da-display">{title}</Dialog.Title>
          <Dialog.Description className="relative mt-2 text-da-muted-fg">{description}</Dialog.Description>
          <dl className="relative mt-6 grid grid-cols-3 gap-2">
            {stats.map((s, i) => (
              <div
                key={s.label}
                className={cn(
                  "flex flex-col rounded-da-md py-3",
                  ["bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/12"][i % 3],
                )}
              >
                <dt className="order-2 text-xs opacity-85">{s.label}</dt>
                <dd className="font-da-display text-2xl font-extrabold">{s.value}</dd>
              </div>
            ))}
          </dl>
          <Dialog.Close asChild>
            <button className="da-focus relative mt-7 inline-flex h-12 w-full items-center justify-center rounded-da-pill bg-da-primary font-semibold text-da-primary-fg shadow-da-md">
              {cta}
            </button>
          </Dialog.Close>
          <style href="sf-confetti" precedence="default">{`
            @keyframes sf-confetti { 0% { translate: 0 0; opacity: 1; scale: .4 } 70% { opacity: 1 } 100% { translate: var(--cx) var(--cy); opacity: 0; scale: 1; rotate: 200deg } }
            .sf-confetti { animation: sf-confetti 1.1s cubic-bezier(.2,.8,.2,1) both }
            @media (prefers-reduced-motion: reduce) { .sf-confetti { display: none } }
          `}</style>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default CelebrateModal;