import React, { useState, useEffect } from 'react';
import { applyFilters } from '../extensions/registry';

const resolveImageUrl = (imgSrc) => {
  if (!imgSrc) return '';
  if (imgSrc.startsWith('http://') || imgSrc.startsWith('https://') || imgSrc.startsWith('data:')) {
    return imgSrc;
  }
  if (typeof wpvfbSettings !== 'undefined' && wpvfbSettings?.pluginUrl) {
    const cleanPlugin = wpvfbSettings.pluginUrl.replace(/\/$/, '');
    const cleanPath = imgSrc.replace(/^\//, '');
    return `${cleanPlugin}/dist/${cleanPath}`;
  }
  return imgSrc;
};

const TemplatePreview = ({ template, className = "", priority = false }) => {
  const [showFullPreview, setShowFullPreview] = useState(false);

  useEffect(() => {
    if (showFullPreview) {
      document.body.classList.add('template-preview-open');
    } else {
      document.body.classList.remove('template-preview-open');
    }
    return () => {
      document.body.classList.remove('template-preview-open');
    };
  }, [showFullPreview]);

  if (!template) return null;

  // For blank template (classic), show clean gradient background
  if (template.name === "Blank Form" || template.name === "blank" || template.category === "blank" || template.key === "blank") {
    return (
      <div className={`template-preview ${className}`}>
        <div className={`w-full h-full ${template.preview || "bg-gradient-to-br from-blue-100 via-indigo-50 to-purple-100"} flex items-center justify-center`}>
          <div className="text-center p-3">
            <span className="text-2xl opacity-50 block mb-1">📄</span>
            <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">Blank Canvas</span>
          </div>
        </div>
      </div>
    );
  }

  // Extensions draw their own thumbnail for some templates (`templates.renderPreview` filter).
  const customPreview = applyFilters('templates.renderPreview', null, { template, className });
  if (customPreview) return customPreview;

  // For templates with preview images, show the image with a view button
  if (template.previewImage) {
    const rawSrc = resolveImageUrl(template.previewImage);
    const isLocalImage = typeof template.previewImage === 'string' && template.previewImage.startsWith('/images/template/');
    const webpSrc = isLocalImage ? resolveImageUrl(template.previewImage.replace(/\.(png|jpe?g)$/i, '.webp')) : null;

    return (
      <div className={`template-preview ${className}`}>
        <div className="w-full h-full relative overflow-hidden flex items-center justify-center group bg-slate-50">
          {/* Preview Image */}
          {webpSrc ? (
            <picture className="h-full w-auto flex items-center justify-center">
              <source srcSet={webpSrc} type="image/webp" />
              <img 
                src={rawSrc} 
                alt={`${template.name} preview`}
                loading={priority ? "eager" : "lazy"}
                decoding="async"
                className="h-full w-auto object-contain max-w-full"
              />
            </picture>
          ) : (
            <img 
              src={rawSrc} 
              alt={`${template.name} preview`}
              loading={priority ? "eager" : "lazy"}
              decoding="async"
              className="h-full w-auto object-contain max-w-full"
            />
          )}
          
          {/* Overlay with view button */}
          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-200 flex items-center justify-center">
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                setShowFullPreview(true);
              }}
              className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white text-gray-800 px-3 py-1.5 rounded-lg text-xs font-semibold shadow-lg hover:bg-gray-50 cursor-pointer"
            >
              View Full Preview
            </button>
          </div>
        </div>

        {/* Enhanced Full Preview Lightbox Modal */}
        {showFullPreview && (
          <div 
            className="fixed inset-0 bg-black/90 z-[9999] flex items-center justify-center p-4 cursor-zoom-out"
            onClick={() => setShowFullPreview(false)}
          >
            {/* Close button */}
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                setShowFullPreview(false);
              }}
              className="absolute top-4 right-4 bg-white text-gray-800 w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold hover:bg-gray-100 z-[10001] shadow-2xl transition-colors cursor-pointer"
            >
              ×
            </button>
            
            {/* Image at full height */}
            <img 
              src={rawSrc} 
              alt={`${template.name} full preview`}
              className="max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl"
              loading="eager"
              onClick={(e) => e.stopPropagation()}
            />
          </div>
        )}
      </div>
    );
  }

  // Fallback preview
  return (
    <div className={`template-preview ${className}`}>
      <div className="w-full h-full bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center relative overflow-hidden">
        <div className="relative z-10 text-center">
          <div className="text-gray-400 text-3xl mb-1">📋</div>
          <div className="text-gray-500 text-xs font-medium">Template Preview</div>
        </div>
      </div>
    </div>
  );
};

export default TemplatePreview;