<template>
    <transition name="slide-left">
        <div v-if="showRightPanel" class="relative flex flex-col no-scrollbar shadow-lg w-1/2 panels-color h-full scrollbar">
            <div ref="isolatedContent" class="h-full p-4 prose-blue dark:prose-invert overflow-auto">
                 <!-- Iframe will be rendered here by the script -->
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'RenderPanel',
    props: {
        showRightPanel: Boolean,
        htmlContent: {
            type: String,
            default: `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Render Panel</title>
                    <style>
                        body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background-color: #f9fafb; color: #1f2937;}
                        .dark body, .dark html { background-color: #111827; color: #f9fafb; }
                        .container { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center;}
                        .message { padding: 2rem; background-color: #fff; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); max-width: 600px; }
                        .dark .message { background-color: #1f2937; border: 1px solid #374151;}
                        h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #1e40af; }
                        .dark h1 { color: #60a5fa; }
                        p { line-height: 1.6; margin-bottom: 0.75rem; }
                        .highlight { color: #be123c; font-weight: 600; }
                        .dark .highlight { color: #fda4af; }
                    </style>
                </head>
                <body>
                    <div class="container">
                        <div class="message">
                            <h1>Welcome to the Render Panel</h1>
                            <p>This panel shows HTML generated by the AI.</p>
                            <p>Ask the AI to <span class="highlight">create a web component</span> like "a simple button" or "a user profile card".</p>
                        </div>
                    </div>
                </body>
                </html>
            `
        }
    },
    watch: {
        htmlContent: {
            handler(newVal) {
                this.renderIsolatedContent(newVal);
            },
            immediate: true // Render initial content on mount
        },
        showRightPanel(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.renderIsolatedContent(this.htmlContent);
                });
            }
        }
    },
    methods: {
        renderIsolatedContent(content) {
            if (!this.$refs.isolatedContent || !this.showRightPanel) return;

            // Clear previous iframe if exists
            this.$refs.isolatedContent.innerHTML = '';

            const iframe = document.createElement('iframe');
            iframe.style.border = 'none';
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); // Basic sandbox
            iframe.setAttribute('title', 'Rendered HTML Content');

            this.$refs.isolatedContent.appendChild(iframe);

            const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;

            if (iframeDoc) {
                 // Detect dark mode from parent's class list
                const isDarkMode = document.documentElement.classList.contains('dark');
                let finalHtml = content;

                 // Inject dark mode class if needed
                 if (isDarkMode) {
                    finalHtml = finalHtml.replace('<body', '<body class="dark"');
                    // Attempt to add dark class to html tag as well if missing
                    if (!finalHtml.includes('<html class="dark"')) {
                        finalHtml = finalHtml.replace('<html', '<html class="dark"');
                    }
                 }


                iframeDoc.open();
                iframeDoc.write(finalHtml);
                iframeDoc.close();
            } else {
                console.error("Could not access iframe document.");
                this.$refs.isolatedContent.innerHTML = '<p class="text-red-500 p-4">Error: Could not render content in iframe.</p>';
            }
        }
    },
    mounted() {
        if (this.showRightPanel) {
            this.renderIsolatedContent(this.htmlContent);
        }
    }
};
</script>

<style scoped>

</style>
