Vendaweb-portal/components/ImageZoomModal.tsx

import React, { useState, useEffect } from "react";

interface ImageZoomModalProps {
  isOpen: boolean;
  onClose: () => void;
  imageUrl: string;
  productName: string;
}

/**
 * ImageZoomModal Component
 * Modal para exibir zoom de imagem de produto
 * Layout baseado no ConfirmDialog
 */
const ImageZoomModal: React.FC<ImageZoomModalProps> = ({
  isOpen,
  onClose,
  imageUrl,
  productName,
}) => {
  const [isAnimating, setIsAnimating] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setShouldRender(true);
      setImageError(false);
      // Pequeno delay para garantir que o DOM está pronto antes de iniciar a animação
      setTimeout(() => setIsAnimating(true), 10);
    } else {
      // Iniciar animação de saída
      setIsAnimating(false);
      // Remover do DOM após a animação terminar
      const timer = setTimeout(() => setShouldRender(false), 300);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  // Não renderizar se não deve estar visível
  if (!shouldRender) return null;

  const handleClose = () => {
    setIsAnimating(false);
    setTimeout(() => {
      onClose();
    }, 300);
  };

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center">
      {/* Overlay */}
      <div
        className={`absolute inset-0 bg-[#001f3f]/60 backdrop-blur-sm transition-opacity duration-300 ${
          isAnimating ? "opacity-100" : "opacity-0"
        }`}
        onClick={handleClose}
      ></div>

      {/* Modal */}
      <div
        className={`relative bg-white rounded-3xl shadow-2xl max-w-4xl w-full mx-4 transform transition-all duration-300 ${
          isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
        }`}
      >
        {/* Header */}
        <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden">
          <div className="relative z-10 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-blue-500/20 rounded-2xl flex items-center justify-center">
                <svg
                  className="w-6 h-6 text-blue-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2.5"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
                  />
                </svg>
              </div>
              <div>
                <h3 className="text-xl font-black">Visualização da Imagem</h3>
                <p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
                  {productName}
                </p>
              </div>
            </div>
            <button
              onClick={handleClose}
              className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
          <div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-blue-400/10 rounded-full blur-2xl"></div>
        </div>

        {/* Content - Imagem */}
        <div className="p-8 flex items-center justify-center bg-slate-50 min-h-[400px] max-h-[70vh] overflow-hidden">
          {imageUrl && !imageError ? (
            <div className="w-full h-full flex items-center justify-center">
              <img
                src={imageUrl}
                alt={productName}
                className="w-auto h-auto max-w-full max-h-[60vh] object-contain rounded-lg shadow-lg"
                style={{
                  maxWidth: "100%",
                  maxHeight: "60vh",
                  width: "auto",
                  height: "auto",
                }}
                onError={() => {
                  setImageError(true);
                }}
              />
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center text-slate-400 min-h-[400px]">
              <svg
                className="w-24 h-24 mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              <p className="text-sm font-medium">Imagem não disponível</p>
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="p-6 pt-0">
          <button
            onClick={handleClose}
            className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white font-black uppercase text-xs tracking-wider rounded-xl transition-all shadow-lg active:scale-95"
          >
            Fechar
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImageZoomModal;