import { useState, useRef, useCallback, useEffect } from 'react';
import { Play, Square, RefreshCw, ExternalLink, X } from 'lucide-react';
interface ScriptPreviewProps {
htmlContent: string;
scriptContent: string;
fileName: string;
onClose: () => void;
}
const NAV_INTERCEPTOR = `
`;
export default function ScriptPreview({ htmlContent, scriptContent, fileName, onClose }: ScriptPreviewProps) {
const [running, setRunning] = useState(false);
const [key, setKey] = useState(0);
const [pendingUrl, setPendingUrl] = useState(null);
const iframeRef = useRef(null);
// Listen for navigation events from the iframe
useEffect(() => {
function handler(e: MessageEvent) {
if (e.data?.type === 'preview-navigate' && e.data.url) {
setPendingUrl(e.data.url);
}
}
window.addEventListener('message', handler);
return () => window.removeEventListener('message', handler);
}, []);
const buildFullHtml = useCallback(() => {
let fullHtml = htmlContent;
if (scriptContent) {
const scriptTag = ``;
if (fullHtml.includes('')) {
fullHtml = fullHtml.replace('', `${NAV_INTERCEPTOR}\n${scriptTag}\n`);
} else {
fullHtml += `\n${NAV_INTERCEPTOR}\n${scriptTag}`;
}
} else if (fullHtml.includes('')) {
fullHtml = fullHtml.replace('', `${NAV_INTERCEPTOR}\n`);
} else {
fullHtml += `\n${NAV_INTERCEPTOR}`;
}
return fullHtml;
}, [htmlContent, scriptContent]);
const handleStart = useCallback(() => {
setKey((k) => k + 1);
setRunning(true);
}, []);
const handleStop = useCallback(() => {
setRunning(false);
setKey((k) => k + 1);
}, []);
const handleRestart = useCallback(() => {
handleStop();
setTimeout(() => handleStart(), 50);
}, [handleStart, handleStop]);
const confirmRedirect = useCallback(() => {
if (pendingUrl) {
window.open(pendingUrl, '_blank', 'noopener,noreferrer');
}
setPendingUrl(null);
}, [pendingUrl]);
const cancelRedirect = useCallback(() => {
setPendingUrl(null);
}, []);
const fullHtml = buildFullHtml();
return (