frontend/src/components/maintenance-alert.tsx

'use client';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Clock, Github, X } from 'lucide-react';
import Link from 'next/link';
import { AnimatePresence, motion } from 'motion/react';
import { Button } from '@/components/ui/button';

interface MaintenanceAlertProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  closeable?: boolean;
}

export function MaintenanceAlert({
  open,
  onOpenChange,
  closeable = true,
}: MaintenanceAlertProps) {
  return (
    <AlertDialog
      open={open}
      onOpenChange={closeable ? onOpenChange : undefined}
    >
      <AlertDialogContent className="max-w-2xl w-[90vw] p-0 border-0 shadow-lg overflow-hidden rounded-2xl z-[9999]">
        <motion.div
          className="relative"
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ type: 'spring', damping: 30, stiffness: 300 }}
        >
          {/* Background pattern */}
          <div className="absolute inset-0 bg-accent/20 opacity-20">
            <div className="absolute inset-0 bg-grid-white/10 [mask-image:radial-gradient(white,transparent_85%)]" />
          </div>

          {closeable && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-4 top-4 z-20 rounded-full hover:bg-background/80"
              onClick={() => onOpenChange(false)}
            >
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          )}

          <AlertDialogHeader className="gap-6 px-8 pt-10 pb-6 relative z-10">
            <motion.div
              className="flex items-center justify-center"
              initial={{ y: -10, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.1 }}
            >
              <div className="flex size-16 items-center justify-center rounded-full bg-gradient-to-t from-primary/20 to-secondary/10 backdrop-blur-md">
                <div className="flex size-12 items-center justify-center rounded-full bg-gradient-to-t from-primary to-primary/80 shadow-md">
                  <Clock className="h-6 w-6 text-white" />
                </div>
              </div>
            </motion.div>

            <motion.div
              initial={{ y: -10, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.2 }}
            >
              <AlertDialogTitle className="text-2xl font-bold text-center text-primary bg-clip-text">
                High Demand Notice
              </AlertDialogTitle>
            </motion.div>

            <motion.div
              initial={{ y: -10, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.3 }}
            >
              <AlertDialogDescription className="text-base text-center leading-relaxed">
                Due to exceptionally high demand, our service is currently
                experiencing slower response times. We recommend returning
                tomorrow when our systems will be operating at normal capacity.
                <span className="mt-4 block font-medium text-primary">
                  Thank you for your understanding. We will notify you via email
                  once the service is fully operational again.
                </span>
              </AlertDialogDescription>
            </motion.div>
          </AlertDialogHeader>

          <AlertDialogFooter className="p-8 pt-4 border-t border-border/40 bg-background/40 backdrop-blur-sm">
            <Link
              href="https://github.com/kortix-ai/suna"
              target="_blank"
              rel="noopener noreferrer"
              className="mx-auto w-full flex items-center justify-center gap-3 bg-gradient-to-tr from-primary to-primary/80 hover:opacity-90 text-white font-medium rounded-full px-8 py-3 transition-all hover:shadow-md"
            >
              <Github className="h-5 w-5 transition-transform group-hover:scale-110" />
              <span>Explore Self-Hosted Version</span>
            </Link>
          </AlertDialogFooter>
        </motion.div>
      </AlertDialogContent>
    </AlertDialog>
  );
}