import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Smartphone, Tablet, Monitor, X } from 'lucide-react';

export interface DevicePreviewProps {
  url?: string;
  defaultDevice?: 'mobile' | 'tablet' | 'desktop';
  onClose?: () => void;
  isOpen: boolean;
}

const devices = {
  mobile: { width: 375, height: 812, name: 'iPhone 13' },
  tablet: { width: 768, height: 1024, name: 'iPad' },
  desktop: { width: 1440, height: 900, name: 'MacBook Pro' }
};

export function DevicePreview({ url, defaultDevice = 'mobile', onClose, isOpen }: DevicePreviewProps) {
  const [device, setDevice] = useState<'mobile' | 'tablet' | 'desktop'>(defaultDevice);
  const [previewUrl, setPreviewUrl] = useState('');
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // Determine the URL to load in the iframe
    // If no URL is provided, load the current origin but add a query param to avoid infinite loops
    if (isOpen) {
      const targetUrl = url || window.location.origin + window.location.pathname;
      const urlObj = new URL(targetUrl);
      urlObj.searchParams.set('_preview', '1'); // Prevent recursive rendering
      setPreviewUrl(urlObj.toString());
      setIsLoaded(false);
    }
  }, [url, isOpen]);

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-modal flex flex-col bg-background/95 backdrop-blur-3xl overflow-hidden font-sans">
        
        {/* Topbar */}
        <div className="h-16 border-b border-border/50 bg-surface/50 flex items-center justify-between px-6 shrink-0">
          <div className="flex items-center gap-4">
            <h2 className="text-lg font-bold text-text flex items-center gap-2">
              <Monitor className="w-5 h-5 text-primary" /> Device Preview
            </h2>
            <div className="h-6 w-px bg-border mx-2" />
            
            {/* Device Toggles */}
            <div className="flex items-center gap-1 bg-background/50 p-1 rounded-xl border border-border/50">
              <button 
                onClick={() => setDevice('mobile')}
                className={`p-2 rounded-lg flex items-center gap-2 text-sm font-bold transition-all ${device === 'mobile' ? 'bg-surface border border-border shadow-md text-text' : 'text-text-muted hover:text-text hover:bg-surface/50'}`}
              >
                <Smartphone className="w-4 h-4" /> Mobile
              </button>
              <button 
                onClick={() => setDevice('tablet')}
                className={`p-2 rounded-lg flex items-center gap-2 text-sm font-bold transition-all ${device === 'tablet' ? 'bg-surface border border-border shadow-md text-text' : 'text-text-muted hover:text-text hover:bg-surface/50'}`}
              >
                <Tablet className="w-4 h-4" /> Tablet
              </button>
              <button 
                onClick={() => setDevice('desktop')}
                className={`p-2 rounded-lg flex items-center gap-2 text-sm font-bold transition-all ${device === 'desktop' ? 'bg-surface border border-border shadow-md text-text' : 'text-text-muted hover:text-text hover:bg-surface/50'}`}
              >
                <Monitor className="w-4 h-4" /> Desktop
              </button>
            </div>
            
            <div className="ml-4 text-xs font-mono text-text-muted opacity-80">
              {devices[device].width} × {devices[device].height}
            </div>
          </div>
          
          <button 
            onClick={onClose}
            className="p-2.5 rounded-full hover:bg-surface border border-transparent hover:border-border text-text-muted hover:text-error transition-all"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Device Canvas Area */}
        <div className="flex-1 overflow-auto flex items-center justify-center p-8 bg-[radial-gradient(var(--colors-border)_1px,transparent_1px)] [background-size:24px_24px]">
          <motion.div 
            layout
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className="relative bg-background border border-border/50 rounded-3xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] overflow-hidden flex flex-col"
            style={{ 
              width: devices[device].width, 
              height: devices[device].height,
              maxHeight: '100%',
              maxWidth: '100%'
            }}
          >
            {/* Fake Browser Bar for Desktop/Tablet */}
            {device !== 'mobile' && (
              <div className="h-10 bg-surface border-b border-border/50 flex items-center px-4 gap-2 shrink-0">
                <div className="flex gap-1.5">
                  <div className="w-3 h-3 rounded-full bg-error" />
                  <div className="w-3 h-3 rounded-full bg-warning" />
                  <div className="w-3 h-3 rounded-full bg-success" />
                </div>
                <div className="flex-1 mx-4 bg-background border border-border/50 rounded-md h-6 flex items-center justify-center text-[10px] text-text-muted font-mono truncate px-2">
                  {previewUrl}
                </div>
              </div>
            )}
            
            {/* Fake Mobile Notch */}
            {device === 'mobile' && (
              <div className="absolute top-0 inset-x-0 h-6 flex justify-center z-50 pointer-events-none">
                <div className="w-32 h-6 bg-surface border-b border-x border-border/50 rounded-b-2xl shadow-sm" />
              </div>
            )}

            {!isLoaded && previewUrl && (
              <div className="absolute inset-0 flex flex-col items-center justify-center bg-background z-40">
                <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4" />
                <span className="text-sm font-bold text-text-muted animate-pulse">Cargando Preview...</span>
              </div>
            )}

            {previewUrl && (
              <iframe 
                src={previewUrl}
                onLoad={() => setIsLoaded(true)}
                className="w-full h-full bg-background border-none flex-1"
                title="Device Preview"
                sandbox="allow-same-origin allow-scripts allow-forms"
              />
            )}
          </motion.div>
        </div>
      </div>
    </AnimatePresence>
  );
}