(function () {

     function rgbToHex(rgb) {
         if (!rgb) return rgb;
         if (rgb.indexOf('#') === 0) return rgb;
         var m = rgb.match(/\d+/g);
         if (!m || m.length < 3) return rgb;
         var r = parseInt(m[0], 10), g = parseInt(m[1], 10), b = parseInt(m[2], 10);
         return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
     }

     function bb_format(element, content) {
         var color = $(element).css("background-color");
         color = rgbToHex(color);
         return '[bgcolor=' + color + ']' + content + '[/bgcolor]';
     }

 function _extractColorFromAttrs(attrs) {
     if (!attrs) return null;

     if (typeof attrs === "string") {
         return attrs;
     }

     var keysToTry = ["default", "value", "color", 0, "0"];

     var candidates = [];

     keysToTry.forEach(function (k) {
         if (attrs.hasOwnProperty(k) && attrs[k]) candidates.push(attrs[k]);
     });

     for (var k in attrs) {
         if (!attrs.hasOwnProperty(k)) continue;
         var v = attrs[k];
         if (typeof v === "string" && v) candidates.push(v);
     }

     function normalizeColor(v) {
         if (!v || typeof v !== "string") return null;
         v = v.trim();

         if (/^rgb(a)?\(/i.test(v)) return v;

         if (/^[0-9A-Fa-f]{3}$/.test(v)) {
             return "#" + v.split('').map(function(c){ return c + c; }).join('');
         }
         if (/^[0-9A-Fa-f]{6}$/.test(v)) {
             return "#" + v;
         }

         var m = v.match(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/);
         if (m) {
             var hex = m[0];
             if (hex.length === 4) {
                 var short = hex.slice(1);
                 return "#" + short.split('').map(function(c){ return c + c; }).join('');
             }
             return hex;
         }

         return null;
     }

     for (var i = 0; i < candidates.length; i++) {
         var c = normalizeColor(String(candidates[i]));
         if (c) return c;
     }

     return null;
 }

 function bb_html(token, attrs, content) {
     var color = _extractColorFromAttrs(attrs) || "#ffff00";
     return '<span style="background-color:' + color + ';">' + content + '</span>';
 }

     if ($.sceditor && $.sceditor.formats && $.sceditor.formats.bbcode) {
         $.sceditor.formats.bbcode.set("bgcolor", {
             tags: {
                 span: { style: { "background-color": null } }
             },
             format: bb_format,
             html: bb_html
         });
     } else {
         console.warn("SCEditor bbcode format API غير متاحة: $.sceditor.formats.bbcode");
     }

 }());


 $.sceditor.command.set('bgcolor', {

     _dropDown: function (editor, caller) {

         var colors = [
            "#ffff00", "#ffeb3b", "#ffe082", "#ffd54f", "#ffca28",
            "#ff9800", "#ff5722", "#f44336", "#e91e63", "#9c27b0",
            "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4",
            "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffccbc",
            "#d7ccc8", "#c5cae9", "#b3e5fc", "#b2dfdb", "#c8e6c9",
            "#ffffff", "#000000", "#f0f0f0", "#ffe4e1", "#f5f5dc"
        ];

         var $content = $('<div style="padding:10px; width:260px; font-family: Arial, sans-serif; font-size:13px;"></div>');

         $content.append('<div style="margin-bottom:6px;font-weight:bold;">اختر لون الخلفية:</div>');

         var palette = $('<div style="margin-bottom:10px;"></div>');
         colors.forEach(function (color) {
             var box = $('<div>')
                 .attr('title', color)
                 .css({
                     width: "22px",
                     height: "22px",
                     background: color,
                     border: "1px solid #888",
                     display: "inline-block",
                     margin: "3px",
                     cursor: "pointer"
                 })
                 .on("click", function () {
                     applyColor(editor, color);
                 });
             palette.append(box);
         });
         $content.append(palette);

         var pickerWrapper = $('<div style="margin-top:6px; display:flex; align-items:center;"></div>');
         var pickerInput = $('<input type="color" value="#ffff00" style="width:44px;height:32px;cursor:pointer;border:1px solid #ccc;">');
         var hexInput = $('<input type="hidden" value="#ffff00" style="width:90px;margin-left:8px;padding:6px;border:1px solid #ccc;">');
         var applyBtn = $('<button type="button" style="margin-left:8px;padding:6px 8px;cursor:pointer;">تطبيق</button>');

         pickerInput.on("input", function () {
             hexInput.val(pickerInput.val());
         });

         hexInput.on("input", function () {
             var v = hexInput.val().trim();
             if (/^#([0-9A-F]{3}){1,2}$/i.test(v)) {
                 pickerInput.val(v);
             }
         });

         applyBtn.on("click", function () {
             var color = hexInput.val().trim();
             if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
                 var tryv = color.replace(/[^0-9A-Fa-f]/g, "");
                 if (tryv.length === 3) tryv = tryv.split('').map(function(c){return c+c;}).join('');
                 if (tryv.length === 6) color = "#" + tryv;
             }
             if (!/^#([0-9A-F]{6})$/i.test(color)) {
                 alert("الرجاء إدخال كود HEX صالح مثل #ffcc00");
                 return;
             }
             applyColor(editor, color);
         });

         pickerWrapper.append(pickerInput, hexInput, applyBtn);
         $content.append(pickerWrapper);

         editor.createDropDown(caller, 'bgcolor-picker', $content.get(0));
     },

     exec: function (caller) {
         $.sceditor.command.get('bgcolor')._dropDown(this, caller);
     },

     txtExec: function (caller) {
         $.sceditor.command.get('bgcolor')._dropDown(this, caller);
     },

     tooltip: "Background Color"
 });

 function applyColor(editor, color) {
     try { $(editor).trigger('focus'); } catch (e) {}

     var inSource = false;
     try {
         inSource = !!(editor.inSourceMode && editor.inSourceMode());
     } catch (e) {
         inSource = false;
     }

     if (inSource) {
         var selText = editor.getRangeHelper().selectedText();
         if (selText) {
             editor.insert('[bgcolor=' + color + ']' + selText + '[/bgcolor]');
         } else {
             editor.insert('[bgcolor=' + color + ']النص هنا[/bgcolor]');
         }
         return;
     }

     try {
         var ok = editor.execCommand("backColor", color);
         if (!ok) editor.execCommand("hiliteColor", color);
     } catch (e) {
         var selHtml = editor.getRangeHelper().selectedHtml();
         if (selHtml) {
             editor.insert('<span style="background-color:' + color + ';">' + selHtml + '</span>');
         } else {
             editor.insert('<span style="background-color:' + color + ';">النص هنا</span>');
         }
     }
 }