"use client";

import { useState, useEffect } from "react";
import { CheckCircle2, X } from "lucide-react";
import { Button } from "@/components/ui/Button";

interface SuccessModalProps {
  isOpen: boolean;
  title: string;
  message: string;
  onClose: () => void;
  onConfirm?: () => void;
  confirmText?: string;
  autoCloseDuration?: number;
}

export function SuccessModal({
  isOpen,
  title,
  message,
  onClose,
  onConfirm,
  confirmText = "Continue",
  autoCloseDuration,
}: SuccessModalProps) {
  const [isVisible, setIsVisible] = useState(isOpen);

  useEffect(() => {
    setIsVisible(isOpen);

    if (isOpen && autoCloseDuration) {
      const timer = setTimeout(() => {
        setIsVisible(false);
        onClose();
      }, autoCloseDuration);

      return () => clearTimeout(timer);
    }
  }, [isOpen, autoCloseDuration, onClose]);

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
      <div className="relative overflow-hidden rounded-[2.5rem] border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-white p-8 shadow-2xl max-w-md w-full animate-in fade-in zoom-in-95 duration-300">
        <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-emerald-500 via-emerald-600 to-emerald-400" />

        <button
          onClick={() => {
            setIsVisible(false);
            onClose();
          }}
          className="absolute right-6 top-6 text-slate-400 hover:text-slate-600 transition-colors"
        >
          <X className="h-5 w-5" />
        </button>

        <div className="flex flex-col items-center text-center">
          <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100">
            <CheckCircle2 className="h-8 w-8 text-emerald-600" />
          </div>

          <h3 className="text-xl font-black tracking-tight text-black">
            {title}
          </h3>

          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            {message}
          </p>

          <div className="mt-8 flex w-full gap-3">
            <Button
              variant="secondary"
              size="md"
              fullWidth
              onClick={() => {
                setIsVisible(false);
                onClose();
              }}
            >
              Close
            </Button>
            <Button
              variant="primary"
              size="md"
              fullWidth
              onClick={() => {
                setIsVisible(false);
                onConfirm?.();
              }}
            >
              {confirmText}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}