"use client"

import { useState, useEffect } from "react"
import { CheckCircle, X, Clock, Calendar, FileText, Building2, Tag } from "lucide-react"
import { Button } from "@/Components/ui/button"

interface SuccessPopupProps {
  isOpen: boolean
  onClose: () => void
  title?: string
  message?: string
  redirectUrl?: string
  redirectLabel?: string
  data?: {
    title?: string
    date?: string
    category?: string
    nameSociete?: string
  }
}

export default function SuccessPopup({
  isOpen,
  onClose,
  title = "Modifications enregistrées",
  message = "Votre appel d'offre a été mis à jour avec succès.",
  redirectUrl = "/mes-appels-offres",
  redirectLabel = "Voir mes appels d'offres",
  data,
}: SuccessPopupProps) {
  const [animationClass, setAnimationClass] = useState("opacity-0 translate-y-4")
  const [showDetails, setShowDetails] = useState(false)

  // Add console log to debug
  console.log("SuccessPopup rendered with isOpen:", isOpen)

  useEffect(() => {
    console.log("SuccessPopup useEffect triggered with isOpen:", isOpen)

    if (isOpen) {
      document.body.style.overflow = "hidden" // Prevent scrolling
      setTimeout(() => {
        setAnimationClass("opacity-100 translate-y-0")
      }, 10)
    } else {
      setAnimationClass("opacity-0 translate-y-4")
      document.body.style.overflow = "auto" // Re-enable scrolling
      setShowDetails(false)
    }
  }, [isOpen])

  if (!isOpen) return null

  const formattedDate = data?.date
    ? new Date(data.date).toLocaleDateString("fr-FR", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    : null

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      {/* Backdrop with blur effect */}
      <div
        className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300"
        onClick={onClose}
      ></div>

      {/* Modal content */}
      <div
        className={`relative z-[101] bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all duration-300 ${animationClass}`}
      >
        {/* Success icon with gradient background */}
        <div className="relative overflow-hidden">
          <div className="bg-white p-8 border-b border-gray-100">
            <div className="absolute top-2 right-2">
              <button onClick={onClose} className="text-gray-600 hover:bg-gray-100 rounded-full p-1 transition-colors">
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="flex justify-center">
              <div className="bg-green-50 rounded-full p-4 shadow-lg">
                <CheckCircle className="h-14 w-14 text-[#22c55e]" />
              </div>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="p-6 pt-4">
          <h3 className="text-xl font-bold text-center text-[#0F172A] mb-2">{title}</h3>
          <p className="text-center text-[#1a2a4b]/80 mb-6">{message}</p>

          {/* Details section */}
          {data && (
            <div className={`overflow-hidden transition-all duration-300 ${showDetails ? "max-h-60" : "max-h-0"}`}>
              <div className="bg-gray-50 rounded-xl p-4 mb-6 border border-gray-100">
                <h4 className="font-semibold text-[#0F172A] mb-3">Détails de l'appel d'offre</h4>

                {data.title && (
                  <div className="flex items-start mb-2">
                    <div className="bg-[#22c55e]/10 p-1.5 rounded-md mr-3">
                      <FileText className="h-4 w-4 text-[#22c55e]" />
                    </div>
                    <div>
                      <p className="text-xs text-[#1a2a4b]/70">Titre</p>
                      <p className="text-sm font-medium text-[#1a2a4b]">{data.title}</p>
                    </div>
                  </div>
                )}

                {data.nameSociete && (
                  <div className="flex items-start mb-2">
                    <div className="bg-[#22c55e]/10 p-1.5 rounded-md mr-3">
                      <Building2 className="h-4 w-4 text-[#22c55e]" />
                    </div>
                    <div>
                      <p className="text-xs text-[#1a2a4b]/70">Société</p>
                      <p className="text-sm font-medium text-[#1a2a4b]">{data.nameSociete}</p>
                    </div>
                  </div>
                )}

                {formattedDate && (
                  <div className="flex items-start mb-2">
                    <div className="bg-[#22c55e]/10 p-1.5 rounded-md mr-3">
                      <Calendar className="h-4 w-4 text-[#22c55e]" />
                    </div>
                    <div>
                      <p className="text-xs text-[#1a2a4b]/70">Date limite</p>
                      <p className="text-sm font-medium text-[#1a2a4b]">{formattedDate}</p>
                    </div>
                  </div>
                )}

                {data.category && (
                  <div className="flex items-start">
                    <div className="bg-[#22c55e]/10 p-1.5 rounded-md mr-3">
                      <Tag className="h-4 w-4 text-[#22c55e]" />
                    </div>
                    <div>
                      <p className="text-xs text-[#1a2a4b]/70">Catégorie</p>
                      <p className="text-sm font-medium text-[#1a2a4b]">{data.category}</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Toggle details button */}
          {data && (
            <button
              onClick={() => setShowDetails(!showDetails)}
              className="w-full text-center text-sm text-[#1a2a4b]/70 hover:text-[#1a2a4b] mb-6 flex items-center justify-center"
            >
              {showDetails ? "Masquer les détails" : "Afficher les détails"}
              <svg
                className={`ml-1 h-4 w-4 transition-transform duration-200 ${showDetails ? "rotate-180" : ""}`}
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
          )}

          {/* Action button */}
          <div>
            <Button
              onClick={onClose}
              className="w-full py-3 bg-green-600 hover:bg-[#1a2a4b] text-white rounded-lg flex items-center justify-center transition-colors"
            >
              Fermer
              <X className="ml-2 h-4 w-4" />
            </Button>
          </div>

          {/* Timestamp */}
          <div className="mt-4 text-center text-xs text-[#1a2a4b]/50 flex items-center justify-center">
            <Clock className="h-3 w-3 mr-1" />
            Enregistré le{" "}
            {new Date().toLocaleDateString("fr-FR", {
              hour: "2-digit",
              minute: "2-digit",
            })}
          </div>
        </div>
      </div>
    </div>
  )
}