<?php
/**
 * Registers the [qr_generator] shortcode.
 *
 * FINAL FEATURE-COMPLETE VERSION (with Fixed Size):
 * - MODIFIED: The main container is set to a fixed size of 1082px by 562.9px as requested.
 * - NEW: Logo Upload. Users can upload an image to be placed in the center of the QR code.
 * - NEW: QR Code Design Styles. Users can change the style of the dots and corners.
 * - All previous features are retained: direct download, all buttons working, live preview.
 * - Uses the powerful 'qr-code-styling' JS library for client-side generation.
 */
function qr_generator_ultimate_shortcode() {
    ob_start();
    ?>

    <!-- The QR Code Styling Library -->
    <script src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>

    <!-- ############ STYLES ############ -->
    <style>
        :root {
            --qr-brand-color: #14b8a6; /* Teal color from screenshot */
            --qr-card-bg-color: #ffffff;
            --qr-border-color: #e2e8f0;
            --qr-text-primary: #1e293b;
            --qr-text-secondary: #64748b;
        }
        /* --- MODIFIED FOR FIXED SIZE --- */
        .qr-generator-container { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
            background-color: transparent; 
            width: 1082px; 
            height: 562.9px;
            margin: 20px auto; 
            overflow: hidden; /* Prevents content from spilling out */
        }
        .qr-generator-grid { 
            display: grid; 
            grid-template-columns: 240px 1fr 280px; 
            gap: 1.5rem; 
            height: 100%; /* Make grid fill the container height */
        }
        .qr-col { 
            background-color: var(--qr-card-bg-color); 
            border: 1px solid var(--qr-border-color); 
            border-radius: 12px; 
            padding: 1.5rem; 
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); 
            overflow-y: auto; /* Add scrollbar if content is too tall */
        }
        /* --- END OF MODIFICATION --- */

        .qr-col h3, .qr-col h4 { font-size: 1rem; font-weight: 600; color: var(--qr-text-primary); margin-top: 0; margin-bottom: 1.5rem; }
        .qr-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--qr-text-secondary); margin-top: 2rem; }
        .qr-destination-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        .qr-type-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 0.5rem; border-radius: 8px; border: 1px solid var(--qr-border-color); background-color: #fff; color: var(--qr-text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; text-align: center; }
        .qr-type-btn:hover { border-color: var(--qr-brand-color); color: var(--qr-brand-color); }
        .qr-type-btn.active { background-color: var(--qr-brand-color); color: white; border-color: var(--qr-brand-color); }
        .qr-type-btn svg { width: 24px; height: 24px; stroke-width: 1.5; }
        .qr-input-panel { display: none; } .qr-input-panel.active { display: block; }
        .form-group { margin-bottom: 1.25rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--qr-text-secondary); font-size: 0.9rem; }
        .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid var(--qr-border-color); border-radius: 6px; background-color: #fff; box-sizing: border-box; color: var(--qr-text-primary); transition: all 0.2s; }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--qr-brand-color); outline: none; box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3); }
        textarea { resize: vertical; min-height: 80px; }
        .qr-color-palette { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .qr-color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; box-shadow: 0 0 0 1px var(--qr-border-color) inset; }
        .qr-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--qr-brand-color); }
        .qr-logo-controls { display: flex; gap: 10px; align-items: center; }
        #qr-logo-upload { display: none; }
        .qr-logo-label { display: inline-block; padding: 0.6rem 1rem; background-color: #f1f5f9; color: var(--qr-text-primary); border-radius: 6px; cursor: pointer; font-weight: 500; transition: background-color 0.2s; flex-grow: 1; text-align: center; }
        .qr-logo-label:hover { background-color: #e2e8f0; }
        #qr-logo-remove { padding: 0.6rem; background: #fee2e2; color: #ef4444; border: none; border-radius: 6px; cursor: pointer; display: none; }
        .qr-preview-box { background-color: #f1f5f9; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; }
        #qr-canvas { max-width: 100%; } #qr-canvas canvas, #qr-canvas svg { max-width: 100%; height: auto !important; }
        .qr-format-selector { display: flex; border: 1px solid var(--qr-border-color); border-radius: 6px; margin-bottom: 1rem; }
        .qr-format-btn { flex-grow: 1; padding: 0.6rem 0; border: none; background: #fff; color: var(--qr-text-secondary); cursor: pointer; transition: all .2s; font-weight: 500; }
        .qr-format-btn:first-child { border-radius: 5px 0 0 5px; } .qr-format-btn:last-child { border-radius: 0 5px 5px 0; }
        .qr-format-btn.active { background-color: var(--qr-brand-color); color: #fff; }
        .qr-download-btn { display: block; width: 100%; text-align: center; padding: 0.85rem 1rem; background-color: #ccc; color: #fff; font-size: 1rem; font-weight: 600; border: none; border-radius: 6px; cursor: not-allowed; text-decoration: none; transition: background-color 0.2s; }
        .qr-download-btn.active { background-color: var(--qr-brand-color); cursor: pointer; }
        @media (max-width: 1082px) { .qr-generator-grid { grid-template-columns: 1fr; } } /* Adjusted responsive breakpoint */
    </style>

    <!-- ############ HTML STRUCTURE ############ -->
    <div class="qr-generator-container">
        <div class="qr-generator-grid">
            <!-- Col 1: Destination Types -->
            <div class="qr-col">
                <h3>Destination</h3>
                <div class="qr-destination-types">
                    <button class="qr-type-btn active" data-type="url"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg><span>URL</span></button>
                    <button class="qr-type-btn" data-type="text"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg><span>Text</span></button>
                    <button class="qr-type-btn" data-type="email"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25-2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg><span>Email</span></button>
                    <button class="qr-type-btn" data-type="sms"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" /></svg><span>SMS</span></button>
                </div>
            </div>
            <!-- Col 2: Content & Customization -->
            <div class="qr-col qr-settings">
                <div id="panel-url" class="qr-input-panel active"><div class="form-group"><label for="qr-url">Your Website URL</label><input type="text" id="qr-url" placeholder="https://example.com" value="https://google.com"></div></div>
                <div id="panel-text" class="qr-input-panel"><div class="form-group"><label for="qr-text-content">Your Text</label><textarea id="qr-text-content" placeholder="Enter any text here..."></textarea></div></div>
                <div id="panel-email" class="qr-input-panel"><div class="form-group"><label for="qr-email-to">Recipient Email</label><input type="email" id="qr-email-to" placeholder="recipient@example.com"></div><div class="form-group"><label for="qr-email-subject">Subject</label><input type="text" id="qr-email-subject" placeholder="Email Subject"></div></div>
                <div id="panel-sms" class="qr-input-panel"><div class="form-group"><label for="qr-sms-phone">Phone Number</label><input type="tel" id="qr-sms-phone" placeholder="+11234567890"></div><div class="form-group"><label for="qr-sms-message">Message</label><textarea id="qr-sms-message" placeholder="Your message..."></textarea></div></div>
                
                <h4>Color</h4>
                <div class="form-group"><div id="qr-color-palette" class="qr-color-palette"><div class="qr-color-swatch active" data-color="#000000" style="background-color: #000000;"></div><div class="qr-color-swatch" data-color="#dc2626" style="background-color: #dc2626;"></div><div class="qr-color-swatch" data-color="#ea580c" style="background-color: #ea580c;"></div><div class="qr-color-swatch" data-color="#2563eb" style="background-color: #2563eb;"></div><div class="qr-color-swatch" data-color="#14b8a6" style="background-color: #14b8a6;"></div><div class="qr-color-swatch" data-color="#7c3aed" style="background-color: #7c3aed;"></div></div></div>

                <h4>Logo</h4>
                <div class="form-group qr-logo-controls">
                    <input type="file" id="qr-logo-upload" accept="image/png, image/jpeg, image/svg+xml">
                    <label for="qr-logo-upload" class="qr-logo-label">Upload Logo</label>
                    <button id="qr-logo-remove"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg></button>
                </div>

                <h4>Design</h4>
                <div class="form-group"><label for="qr-dot-style">Dot Style</label><select id="qr-dot-style"><option value="square">Square</option><option value="dots">Dots</option><option value="rounded">Rounded</option><option value="extra-rounded">Extra Rounded</option><option value="classy">Classy</option><option value="classy-rounded">Classy Rounded</option></select></div>
                <div class="form-group"><label for="qr-corner-square-style">Corner Square Style</label><select id="qr-corner-square-style"><option value="square">Square</option><option value="dot">Dot</option><option value="extra-rounded">Extra Rounded</option></select></div>
            </div>
            <!-- Col 3: Preview & Download -->
            <div class="qr-col">
                <h3>Preview QR Code</h3>
                <div class="qr-preview-wrapper">
                    <div class="qr-preview-box"><div id="qr-canvas"></div></div>
                    <div class="form-group"><label for="qr-size" style="text-align: left;">Resolution (px)</label><input type="text" id="qr-size" value="300"></div>
                    <div class="qr-format-selector"><button class="qr-format-btn active" data-format="png">PNG</button><button class="qr-format-btn" data-format="jpeg">JPG</button><button class="qr-format-btn" data-format="svg">SVG</button></div>
                    <a id="qr-download-btn" href="#" class="qr-download-btn">Download QR Code</a>
                </div>
            </div>
        </div>
    </div>

    <!-- ############ JAVASCRIPT ############ -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Use a unique selector to avoid conflicts if shortcode is used multiple times
        const generator = document.querySelector('.qr-generator-container'); 
        if (!generator || generator.classList.contains('qr-initialized')) {
            return;
        }
        generator.classList.add('qr-initialized');

        const allInputs = generator.querySelectorAll('input, select, textarea');
        const typeButtons = generator.querySelectorAll('.qr-type-btn');
        const colorSwatches = generator.querySelectorAll('.qr-color-swatch');
        const formatBtns = generator.querySelectorAll('.qr-format-btn');
        const downloadBtn = generator.querySelector('#qr-download-btn');
        const logoUpload = generator.querySelector('#qr-logo-upload');
        const logoRemoveBtn = generator.querySelector('#qr-logo-remove');
        const canvasWrapper = generator.querySelector('#qr-canvas');

        let state = {
            type: 'url',
            data: 'https://google.com',
            size: 300,
            color: '#000000',
            format: 'png',
            logo: null,
            dotStyle: 'square',
            cornerStyle: 'square',
        };

        const qrCode = new QRCodeStyling({
            width: state.size,
            height: state.size,
            data: state.data,
            margin: 10,
            dotsOptions: { color: state.color, type: state.dotStyle },
            cornersSquareOptions: { type: state.cornerStyle },
            backgroundOptions: { color: '#ffffff' },
            imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 5 }
        });
        qrCode.append(canvasWrapper);

        function getQrData() {
            let data = '';
            const type = state.type;
            if (type === 'url') { data = generator.querySelector('#qr-url').value; }
            else if (type === 'text') { data = generator.querySelector('#qr-text-content').value; }
            else if (type === 'email') {
                const to = generator.querySelector('#qr-email-to').value;
                const subject = generator.querySelector('#qr-email-subject').value;
                if (to) data = `mailto:${to}?subject=${encodeURIComponent(subject)}`;
            } else if (type === 'sms') {
                const phone = generator.querySelector('#qr-sms-phone').value;
                const message = generator.querySelector('#qr-sms-message').value;
                if (phone) data = `SMSTO:${phone.trim()}:${encodeURIComponent(message)}`;
            }
            return data.trim();
        }

        function updateQrCode() {
            const newData = getQrData();
            if (!newData) {
                downloadBtn.classList.remove('active');
                return;
            }
            downloadBtn.classList.add('active');
            
            qrCode.update({
                width: state.size,
                height: state.size,
                data: newData,
                image: state.logo,
                dotsOptions: { color: state.color, type: state.dotStyle },
                cornersSquareOptions: { type: state.cornerStyle }
            });
        }

        typeButtons.forEach(button => {
            button.addEventListener('click', () => {
                state.type = button.dataset.type;
                generator.querySelector('.qr-type-btn.active').classList.remove('active');
                button.classList.add('active');
                generator.querySelector('.qr-input-panel.active').classList.remove('active');
                generator.querySelector(`#panel-${state.type}`).classList.add('active');
                updateQrCode();
            });
        });

        allInputs.forEach(input => {
            input.addEventListener('input', () => {
                const id = input.id;
                if (id === 'qr-size') state.size = parseInt(input.value) || 300;
                if (id === 'qr-dot-style') state.dotStyle = input.value;
                if (id === 'qr-corner-square-style') state.cornerStyle = input.value;
                updateQrCode();
            });
        });

        colorSwatches.forEach(swatch => {
            swatch.addEventListener('click', () => {
                state.color = swatch.dataset.color;
                generator.querySelector('.qr-color-swatch.active').classList.remove('active');
                swatch.classList.add('active');
                updateQrCode();
            });
        });

        formatBtns.forEach(button => {
            button.addEventListener('click', () => {
                state.format = button.dataset.format;
                generator.querySelector('.qr-format-btn.active').classList.remove('active');
                button.classList.add('active');
            });
        });
        
        logoUpload.addEventListener('change', (e) => {
            if (!e.target.files || !e.target.files[0]) return;
            state.logo = URL.createObjectURL(e.target.files[0]);
            logoRemoveBtn.style.display = 'block';
            updateQrCode();
        });

        logoRemoveBtn.addEventListener('click', () => {
            state.logo = null;
            logoUpload.value = '';
            logoRemoveBtn.style.display = 'none';
            updateQrCode();
        });

        downloadBtn.addEventListener('click', (e) => {
            e.preventDefault();
            if (!downloadBtn.classList.contains('active')) return;
            qrCode.download({ name: 'qr-code', extension: state.format });
        });

        updateQrCode();
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('qr_generator', 'qr_generator_ultimate_shortcode');