/**
 * IDSC — Custom IDVE editor previews
 * Loaded only when IDVE is active, via idve_editor_scripts hook.
 */
(function() {
    'use strict';

    if (typeof IDVE === 'undefined' || !IDVE.Blocks) return;

    // ── Alert ──
    IDVE.Blocks.setPreview('idsc_alert', function(data) {
        var colors = { info: '#3b82f6', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' };
        var bgs    = { info: '#eff6ff', success: '#f0fdf4', warning: '#fffbeb', error: '#fef2f2' };
        var type   = data.type || 'info';
        var color  = colors[type] || '#3b82f6';
        var bg     = bgs[type] || '#eff6ff';
        var html   = '<div style="padding:12px 16px;border-left:4px solid ' + color + ';background:' + bg + ';border-radius:0 4px 4px 0">';
        if (data.title) html += '<strong style="display:block;margin-bottom:4px">' + data.title + '</strong>';
        html += '<span style="font-size:13px">' + (data.message || 'Alert message...') + '</span>';
        html += '</div>';
        return html;
    });

    // ── Testimonial ──
    IDVE.Blocks.setPreview('idsc_testimonial', function(data) {
        var html = '<div style="padding:14px;border-left:3px solid #e5e7eb;background:#f9fafb;border-radius:0 6px 6px 0">';
        if (data.rating && data.rating !== '0') {
            var stars = parseInt(data.rating, 10);
            html += '<div style="color:#f59e0b;margin-bottom:6px">';
            for (var i = 0; i < stars; i++) html += '\u2605';
            html += '</div>';
        }
        html += '<div style="font-style:italic;font-size:13px;color:#374151;margin-bottom:8px">"' + (data.content || 'Quote text...') + '"</div>';
        if (data.author) {
            html += '<div style="font-size:12px;color:#6b7280">\u2014 ' + data.author;
            if (data.role) html += ', ' + data.role;
            html += '</div>';
        }
        html += '</div>';
        return html;
    });

    // ── Card ──
    IDVE.Blocks.setPreview('idsc_card', function(data) {
        var html = '<div style="border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;background:#fff">';
        if (data.image) html += '<div style="height:60px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:11px">Image #' + data.image + '</div>';
        html += '<div style="padding:12px">';
        if (data.title) html += '<strong style="display:block;margin-bottom:4px;font-size:14px">' + data.title + '</strong>';
        if (data.content) html += '<div style="font-size:12px;color:#6b7280">' + data.content.substring(0, 80) + '</div>';
        if (data.button_text) html += '<div style="margin-top:8px"><span style="display:inline-block;padding:4px 12px;background:#3b82f6;color:#fff;border-radius:4px;font-size:11px">' + data.button_text + '</span></div>';
        html += '</div></div>';
        return html;
    });

    // ── Progress Bar ──
    IDVE.Blocks.setPreview('idsc_progress', function(data) {
        var val   = Math.max(0, Math.min(100, parseInt(data.value, 10) || 75));
        var color = data.color || '#3b82f6';
        var bg    = data.bg_color || '#e5e7eb';
        var html  = '<div>';
        if (data.label) html += '<div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px"><span>' + data.label + '</span><span>' + val + '%</span></div>';
        html += '<div style="background:' + bg + ';border-radius:99px;height:' + (data.height || 20) + 'px;overflow:hidden">';
        html += '<div style="width:' + val + '%;height:100%;background:' + color + ';border-radius:99px;display:flex;align-items:center;justify-content:center">';
        if (!data.label && data.show_pct !== 'no') html += '<span style="font-size:10px;color:#fff;font-weight:600">' + val + '%</span>';
        html += '</div></div></div>';
        return html;
    });

    // ── Icon List ──
    IDVE.Blocks.setPreview('idsc_icon_list', function(data) {
        if (!data.items) return '<div style="padding:10px;color:#999;text-align:center;font-size:12px">Icon List \u2014 add items in settings</div>';
        var lines = data.items.split('\n').filter(function(l) { return l.trim().length > 0; });
        var color = data.icon_color || '#22c55e';
        var html  = '<div style="padding:4px 0">';
        for (var i = 0; i < Math.min(lines.length, 5); i++) {
            var parts = lines[i].split('|');
            var text  = parts.length > 1 ? parts[1].trim() : parts[0].trim();
            html += '<div style="display:flex;align-items:center;gap:6px;padding:2px 0"><span style="color:' + color + ';font-weight:bold">\u2713</span><span style="font-size:12px">' + text + '</span></div>';
        }
        if (lines.length > 5) html += '<div style="font-size:11px;color:#999">+' + (lines.length - 5) + ' more...</div>';
        html += '</div>';
        return html;
    });

    // ── Social Links ──
    IDVE.Blocks.setPreview('idsc_social_links', function(data) {
        if (!data.links) return '<div style="padding:10px;color:#999;text-align:center;font-size:12px">Social Links \u2014 add links in settings</div>';
        var lines = data.links.split('\n').filter(function(l) { return l.trim().length > 0; });
        var colors = { facebook: '#1877f2', twitter: '#000', instagram: '#e4405f', linkedin: '#0a66c2', youtube: '#ff0000', github: '#181717' };
        var html  = '<div style="display:flex;gap:6px;justify-content:center;padding:6px 0">';
        for (var i = 0; i < lines.length; i++) {
            var parts    = lines[i].split('|');
            var platform = parts[0].trim().toLowerCase();
            var bg       = colors[platform] || '#6b7280';
            html += '<span style="display:inline-flex;width:28px;height:28px;border-radius:4px;background:' + bg + ';align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600">' + platform.charAt(0).toUpperCase() + '</span>';
        }
        html += '</div>';
        return html;
    });

    // ── Accordion ──
    IDVE.Blocks.setPreview('idsc_accordion', function(data) {
        if (!data.items) return '<div style="padding:10px;color:#999;text-align:center;font-size:12px">Accordion \u2014 add items in settings</div>';
        var lines = data.items.split('\n').filter(function(l) { return l.trim().length > 0; });
        var html  = '<div style="border:1px solid #e5e7eb;border-radius:4px;overflow:hidden">';
        for (var i = 0; i < Math.min(lines.length, 4); i++) {
            var parts = lines[i].split('|');
            var title = parts[0].trim();
            var border = i > 0 ? 'border-top:1px solid #e5e7eb;' : '';
            html += '<div style="padding:8px 12px;background:#fafafa;font-size:12px;font-weight:500;' + border + '">\u25B6 ' + title + '</div>';
        }
        if (lines.length > 4) html += '<div style="padding:6px 12px;font-size:11px;color:#999;border-top:1px solid #e5e7eb">+' + (lines.length - 4) + ' more...</div>';
        html += '</div>';
        return html;
    });

    // ── Gallery ──
    IDVE.Blocks.setPreview('idsc_gallery', function(data) {
        if (!data.ids) return '<div style="padding:10px;color:#999;text-align:center;font-size:12px">Gallery \u2014 set image IDs in settings</div>';
        var ids = data.ids.split(',');
        var cols = parseInt(data.columns, 10) || 3;
        var html = '<div style="display:grid;grid-template-columns:repeat(' + cols + ',1fr);gap:4px">';
        for (var i = 0; i < Math.min(ids.length, 9); i++) {
            html += '<div style="background:#e5e7eb;aspect-ratio:1;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#9ca3af">#' + ids[i].trim() + '</div>';
        }
        html += '</div>';
        return html;
    });

    // ── Tabs ──
    IDVE.Blocks.setPreview('idsc_tabs', function(data) {
        if (!data.items) return '<div style="padding:10px;color:#999;text-align:center;font-size:12px">Tabs \u2014 add tabs in settings</div>';
        var lines = data.items.split('\n').filter(function(l) { return l.trim().length > 0; });
        var html  = '<div>';
        html += '<div style="display:flex;border-bottom:2px solid #e5e7eb;margin-bottom:8px">';
        for (var i = 0; i < lines.length; i++) {
            var parts  = lines[i].split('|');
            var title  = parts[0].trim();
            var active = i === 0 ? 'color:#3b82f6;border-bottom:2px solid #3b82f6;' : 'color:#6b7280;';
            html += '<span style="padding:6px 12px;font-size:11px;font-weight:500;margin-bottom:-2px;' + active + '">' + title + '</span>';
        }
        html += '</div>';
        // Show first tab content
        if (lines.length > 0) {
            var firstParts = lines[0].split('|');
            if (firstParts.length > 1) {
                html += '<div style="font-size:12px;color:#374151;padding:4px 0">' + firstParts[1].trim().substring(0, 80) + '</div>';
            }
        }
        html += '</div>';
        return html;
    });

    // ── Counter ──
    IDVE.Blocks.setPreview('idsc_counter', function(data) {
        var num  = data.number || '100';
        var html = '<div style="text-align:center;padding:8px 0">';
        html += '<div style="font-size:32px;font-weight:700;color:#111827">';
        if (data.prefix) html += '<span style="font-size:0.6em;color:#6b7280">' + data.prefix + '</span>';
        html += num;
        if (data.suffix) html += '<span style="font-size:0.6em;color:#6b7280">' + data.suffix + '</span>';
        html += '</div>';
        if (data.label) html += '<div style="font-size:13px;color:#6b7280;margin-top:2px">' + data.label + '</div>';
        html += '</div>';
        return html;
    });

    // ── Table of Contents ──
    IDVE.Blocks.setPreview('idsc_toc', function(data) {
        var title = data.title || 'On This Page';
        var html  = '<div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:12px 16px">';
        html += '<div style="font-size:13px;font-weight:600;margin-bottom:8px">' + title + '</div>';
        html += '<div style="font-size:11px;color:#6b7280;font-style:italic">Auto-generated from ' + (data.levels || 'h2,h3') + ' headings</div>';
        html += '</div>';
        return html;
    });

    // ── Map ──
    IDVE.Blocks.setPreview('idsc_map', function(data) {
        var html = '<div style="background:#e5e7eb;border-radius:6px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center">';
        html += '<span class="dashicons dashicons-location-alt" style="font-size:24px;color:#6b7280"></span>';
        if (data.address) html += '<div style="font-size:11px;color:#6b7280;margin-top:4px">' + data.address + '</div>';
        else html += '<div style="font-size:11px;color:#999">Set address in settings</div>';
        html += '</div>';
        return html;
    });

})();
