Announcement Modal

"use client"

import * as React from "react"
import { Dialog as DialogPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

interface AnnouncementFeature {
  icon: React.ReactNode
  title: React.ReactNode
  description: React.ReactNode
}

interface AnnouncementPage {
  title: React.ReactNode
  features: AnnouncementFeature[]
}

interface AnnouncementModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  pages: AnnouncementPage[]
  dismissLabel?: string
  onDismiss?: () => void
}

function AnnouncementModal({
  open,
  onOpenChange,
  pages,
  dismissLabel = "Got it",
  onDismiss,
}: AnnouncementModalProps) {
  const [currentPage, setCurrentPage] = React.useState(0)
  const totalPages = pages.length
  const page = pages[currentPage]

  React.useEffect(() => {
    if (open) setCurrentPage(0)
  }, [open])

  const goToNext = React.useCallback(() => {
    if (currentPage < totalPages - 1) {
      setCurrentPage((s) => s + 1)
    }
  }, [currentPage, totalPages])

  const handleDismiss = React.useCallback(() => {
    onOpenChange(false)
    onDismiss?.()
  }, [onOpenChange, onDismiss])

  if (!page) return null

  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-50 w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl border border-border bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95">
          <DialogPrimitive.Title className="sr-only">
            {typeof page.title === "string" ? page.title : "Announcement"}
          </DialogPrimitive.Title>
          <DialogPrimitive.Description className="sr-only">
            Announcement
          </DialogPrimitive.Description>

          <div className="relative flex max-h-[85vh] flex-col overflow-hidden">
            <div className="relative flex-1 overflow-hidden">
              {pages.map((p, i) => (
                <div
                  key={i}
                  className={cn(
                    "flex flex-col transition-all duration-500 ease-in-out",
                    i === currentPage
                      ? "relative translate-x-0 opacity-100"
                      : "absolute inset-0 opacity-0",
                    i < currentPage && "-translate-x-full",
                    i > currentPage && "translate-x-full",
                  )}
                  aria-hidden={i !== currentPage}
                >
                  <div className="px-6 pt-8 pb-4 text-center sm:pt-10">
                    <div className="text-[clamp(1.5rem,4vw,1.75rem)] font-bold leading-tight tracking-tight text-foreground">
                      {p.title}
                    </div>
                  </div>
                  <div className="flex flex-col gap-5 px-6 pb-4">
                    {p.features.map((f, fi) => (
                      <div key={fi} className="flex gap-4">
                        <div className="flex size-10 shrink-0 items-center justify-center text-foreground">
                          {f.icon}
                        </div>
                        <div className="min-w-0 space-y-0.5">
                          <div className="text-[15px] font-semibold text-foreground">
                            {f.title}
                          </div>
                          <div className="text-[15px] leading-relaxed text-muted-foreground">
                            {f.description}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {totalPages > 1 ? (
              <div className="flex justify-center gap-2 py-3">
                {pages.map((_, i) => (
                  <button
                    key={i}
                    type="button"
                    onClick={() => setCurrentPage(i)}
                    className={cn(
                      "size-2 cursor-pointer rounded-full transition-colors duration-300",
                      i === currentPage
                        ? "bg-zinc-600 dark:bg-zinc-300"
                        : "bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-700 dark:hover:bg-zinc-600",
                    )}
                    aria-label={`Page ${i + 1}`}
                  />
                ))}
              </div>
            ) : null}

            <div className="px-6 pb-6">
              <button
                type="button"
                onClick={currentPage === totalPages - 1 ? handleDismiss : goToNext}
                className="flex h-11 w-full cursor-pointer items-center justify-center rounded-xl bg-zinc-900 text-sm font-semibold text-zinc-50 transition-all duration-150 ease-in-out hover:bg-zinc-800 active:scale-[0.97] dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
              >
                {currentPage === totalPages - 1 ? dismissLabel : dismissLabel}
              </button>
            </div>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

export { AnnouncementModal }
export type { AnnouncementModalProps, AnnouncementPage, AnnouncementFeature }