/**
 * SiteChat v2 – Lovable-style AI website builder
 * Schone implementatie, geen bugs. Chat links, live preview rechts.
 */
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: 0');

session_name('CUSTOMER_PORTAL_SESSION');
ini_set('session.cookie_path', '/');
ini_set('session.cookie_domain', '');
ini_set('session.cookie_httponly', '1');
ini_set('session.cookie_secure', isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? '1' : '0');
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$is_logged_in = isset($_SESSION['customer_logged_in']) && $_SESSION['customer_logged_in'] === true;
$host = $_SERVER['HTTP_HOST'] ?? 'localhost';
$scheme = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? 'https' : 'http';
$portal = in_array(strtolower($host), ['www.itlive.nl', 'itlive.nl'], true) ? 'portal.itlive.nl' : $host;
$api_base = $scheme . '://' . $portal;
$login_url = $api_base . '/customer_portal/login.php?redirect=' . urlencode($scheme . '://' . $host . '/sitechat-v2/');
$register_url = $api_base . '/customer_portal/register.php?redirect=' . urlencode($scheme . '://' . $host . '/sitechat-v2/');
$template = isset($_GET['template']) ? preg_replace('/[^a-z0-9_-]/', '', (string)$_GET['template']) : '';
?>    <meta name="description" content="SiteChat v2 – bouw websites door te chatten met AI. Lovable-style interface.">    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #fff; height: 100vh; overflow: hidden; }
        .app { display: flex; flex-direction: column; height: 100vh; }
        .header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: rgba(15,23,42,0.95); border-bottom: 1px solid rgba(148,163,184,0.2); }
        .header-left { display: flex; align-items: center; gap: 0.75rem; }
        .header h1 { font-size: 1.1rem; font-weight: 700; }
        .header-status { font-size: 0.8rem; color: #94a3b8; }
        .header-actions { display: flex; gap: 0.5rem; }
        .header-btn { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; background: rgba(148,163,184,0.2); color: #fff; }
        .header-btn:hover { background: rgba(148,163,184,0.3); }
        .header-btn.primary { background: #3b82f6; color: #fff; }
        .main { flex: 1; display: flex; min-height: 0; }
        .chat-pane { width: 420px; min-width: 320px; display: flex; flex-direction: column; border-right: 1px solid rgba(148,163,184,0.2); background: rgba(15,23,42,0.5); }
        .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; }
        .chat-msg { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 12px; max-width: 95%; font-size: 0.95rem; line-height: 1.5; }
        .chat-msg.user { background: rgba(59,130,246,0.3); margin-left: auto; }
        .chat-msg.assistant { background: rgba(30,41,59,0.8); border: 1px solid rgba(148,163,184,0.2); }
        .chat-msg .meta { font-size: 0.75rem; color: #94a3b8; margin-top: 0.35rem; }
        .chat-input-wrap { padding: 1rem; border-top: 1px solid rgba(148,163,184,0.2); }
        .chat-input-area { display: flex; align-items: flex-end; gap: 0.5rem; background: rgba(30,41,59,0.8); border: 1px solid rgba(148,163,184,0.3); border-radius: 12px; padding: 0.5rem 0.75rem; }
        .chat-input-area:focus-within { border-color: rgba(148,163,184,0.5); }
        .chat-input { flex: 1; background: transparent; border: none; color: #fff; font-size: 1rem; outline: none; resize: none; min-height: 44px; max-height: 120px; }
        .chat-input::placeholder { color: #64748b; }
        .chat-send { width: 40px; height: 40px; border-radius: 10px; background: #3b82f6; color: #fff; border: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
        .chat-send:hover { background: #2563eb; }
        .chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
        .add-files { padding: 0.5rem 1rem; font-size: 0.8rem; color: #94a3b8; border-top: 1px dashed rgba(148,163,184,0.2); }
        .add-files span { color: #64748b; }
        .preview-pane { flex: 1; display: flex; flex-direction: column; background: #020617; }
        .preview-toolbar { padding: 0.5rem 1rem; display: flex; gap: 0.5rem; align-items: center; border-bottom: 1px solid rgba(148,163,184,0.2); }
        .preview-toolbar button { padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; background: rgba(148,163,184,0.2); color: #94a3b8; border: none; cursor: pointer; }
        .preview-toolbar button:hover { background: rgba(148,163,184,0.3); color: #fff; }
        .preview-toolbar button.active { background: #3b82f6; color: #fff; }
        .preview-frame { flex: 1; background: #fff; margin: 1rem; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
        .preview-frame iframe { width: 100%; height: 100%; border: none; }
        .preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #64748b; text-align: center; padding: 2rem; }
        .preview-placeholder h3 { font-size: 1.25rem; color: #94a3b8; margin-bottom: 0.5rem; }
        .preview-placeholder p { font-size: 0.95rem; }
        .login-bar { padding: 0.5rem 1rem; font-size: 0.85rem; color: #94a3b8; border-bottom: 1px solid rgba(148,163,184,0.2); }
        .login-bar a { color: #60a5fa; text-decoration: none; }
        .login-bar a:hover { text-decoration: underline; }
    </style>
    <div class="app">
        <header class="header">
            <div class="header-left">
                <h1>💬 SiteChat v2</h1>
                <span class="header-status" id="aiStatus">AI: OK</span>
            </div>
            <div class="header-actions">
                <a href="" class="header-btn">Log in</a>
                <a href="" class="header-btn primary">Account maken</a>
                <button type="button" class="header-btn">Share</button>
                <button type="button" class="header-btn primary">Publish</button>
            </div>
        </header>
                <div class="login-bar">
            <a href="">Inloggen</a> · <a href="">Account maken</a> om voorstellen op te slaan.
        </div>
                <main class="main">
            <aside class="chat-pane">
                <div class="chat-messages" id="chatMessages">
                    <div class="chat-msg assistant">
                        Welkom! Vertel wat voor website je wilt maken. Bijv. "website voor mijn bakkerij in Breda met webshop en contactformulier".
                        <div class="meta">AI</div>
                    </div>
                </div>
                <div class="chat-input-wrap">
                    <div class="chat-input-area">
                        <textarea class="chat-input" id="messageInput" placeholder="Vertel wat je wilt maken…" rows="1"></textarea>
                        <button type="button" class="chat-send" id="sendBtn" title="Verstuur">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                    <div class="add-files"><span>Add files – Drop bestanden hier of klik om te uploaden</span></div>
                </div>
            </aside>
            <section class="preview-pane">
                <div class="preview-toolbar">
                    <button type="button" class="active">Preview</button>
                    <button type="button">Desktop</button>
                    <button type="button">Mobiel</button>
                </div>
                <div class="preview-frame">
                    <div class="preview-placeholder" id="previewPlaceholder">
                        <h3>👁️ Live preview</h3>
                        <p>Vul je wensen in via de chat – dan verschijnt hier je voorstel.</p>
                    </div>
                    <iframe id="previewIframe" style="display:none;" title="Preview"></iframe>
                </div>
            </section>
        </main>
    </div>
    <script>
(function() {
    var apiBase = null;
    var template = null;
    var conversation = [];
    var messagesEl = document.getElementById('chatMessages');
    var inputEl = document.getElementById('messageInput');
    var sendBtn = document.getElementById('sendBtn');
    var placeholder = document.getElementById('previewPlaceholder');
    var iframe = document.getElementById('previewIframe');

    function addMsg(role, text) {
        var div = document.createElement('div');
        div.className = 'chat-msg ' + role;
        var escaped = role === 'user' ? String(text).replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>') : String(text).replace(/\n/g,'<br>');
        div.innerHTML = '<div>' + escaped + '</div><div class="meta">' + (role === 'user' ? 'Jij' : 'AI') + '</div>';
        messagesEl.appendChild(div);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function setLoading(loading) {
        sendBtn.disabled = loading;
    }

    async function send() {
        var text = (inputEl.value || '').trim();
        if (!text) return;
        addMsg('user', text);
        inputEl.value = '';
        setLoading(true);
        conversation.push({ role: 'user', content: text });

        try {
            var res = await fetch(apiBase + '/admin/api/sitechat.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    message: text,
                    conversation: conversation.slice(-12),
                    template: template || undefined
                }),
                credentials: 'include'
            });
            var data = await res.json();
            if (data.success && data.response) {
                conversation.push({ role: 'assistant', content: data.response });
                addMsg('assistant', data.response);
                if (data.website_dossier && data.website_dossier.full_plan) {
                    updatePreview(data.website_dossier);
                }
            } else {
                addMsg('assistant', data.error || data.message || 'Er ging iets mis. Probeer opnieuw.');
            }
        } catch (e) {
            addMsg('assistant', 'Verbindingsfout. Controleer je internet of probeer portal.itlive.nl.');
        } finally {
            setLoading(false);
        }
    }

    function updatePreview(dossier) {
        if (!dossier) return;
        html += '<h1>' + (dossier.company_name || 'Bedrijf') + '</h1>';
        html += '<p>' + (dossier.description || '') + '</p>';
        if (dossier.services && dossier.services.length) {
            html += '<div class="card"><strong>Diensten:</strong> ' + dossier.services.join(', ') + '</div>';
        }
        html += '</body></html>';
        iframe.srcdoc = html;
        iframe.style.display = 'block';
        placeholder.style.display = 'none';
    }

    sendBtn.addEventListener('click', send);
    inputEl.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            send();
        }
    });

    if (template) {
        addMsg('assistant', 'Template "' + template + '" geselecteerd. Vertel wat voor website je wilt en ik pas het aan.');
    }
})();
    </script>
</body>
</html>