/**
 * 后台 JS：订阅计划面板交互
 * - 隐藏旧的单一订阅字段（周期、默认数量、最小起订量、每周期价格、分级折扣）
 * - 将后端渲染的表格（保持字段 name 不变）转换为“可折叠面板”形式
 * - 支持新增/删除计划，折叠/展开计划详情
 * - 保持与后端 save_meta 的兼容：使用相同的 name 数组结构提交
 */
(function($){
  $(function(){
    // 隐藏旧的单一订阅字段
    ['yoone_sub_enabled','yoone_sub_period','yoone_sub_qty_default','yoone_sub_min_qty','yoone_sub_price','yoone_sub_tier_rules'].forEach(function(id){
      var $input = $('#'+id);
      if ($input.length) {
        var $field = $input.closest('.form-field');
        if ($field.length) { $field.hide(); }
      }
    });

    var $table = $('.yoone-sub-plans-table');
    var $tbody = $('#yoone-sub-plans-body');
    var $addBtn = $('#yoone-sub-plan-add');

    function buildPanel(labelInput, periodSelect, priceInput, discountInput){
      var $panel = $('<div class="yoone-sub-plan-panel"/>');
      var $header = $('<div class="yoone-sub-plan-header"/>');
      var $actions = $('<div class="yoone-sub-plan-actions"/>');
      var $toggle = $('<button type="button" class="button yoone-sub-plan-toggle" aria-expanded="true"/>').text((typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.collapse : '折叠'));
      var $remove = $('<button type="button" class="button yoone-sub-plan-remove"/>').text((typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.remove : '删除'));
      var $title = $(labelInput || '<input type="text" class="yoone-sub-plan-title" name="yoone_sub_plans[label][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderLabel : '例如：标准计划')+'" />');
      $title.addClass('yoone-sub-plan-title');
      $actions.append($toggle).append(' ').append($remove);
      $header.append($title).append($actions);

      var $body = $('<div class="yoone-sub-plan-body"/>');
      var $periodRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.period : '周期')+'</label> ');
      var $period = $(periodSelect || [
        '<select name="yoone_sub_plans[period][]">',
        '<option value="month">', (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.month : '月'), '</option>',
        '<option value="year">',  (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.year  : '年'),  '</option>',
        '</select>'
      ].join(''));
      $periodRow.append($period);

      var $priceRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.pricePerPeriod : '每周期价格')+'</label> ');
      var $price = $(priceInput || '<input type="text" name="yoone_sub_plans[price][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderPrice : '留空表示用产品价')+'" />');
      $priceRow.append($price);

      var $discRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.discountPercent : '折扣百分比(可选)')+'</label> ');
      var $disc = $(discountInput || '<input type="number" min="0" step="0.1" name="yoone_sub_plans[discount_percent][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderDiscount : '如：10 表示9折')+'" />');
      $discRow.append($disc);

      $body.append($periodRow).append($priceRow).append($discRow);
      $panel.append($header).append($body);
      return $panel;
    }

    if ($tbody.length && $addBtn.length) {
      // 将现有表格行转换为面板
      var $container = $('<div id="yoone-sub-plans-panels"/>');
      $table.before($container);
      $tbody.find('tr').each(function(){
        var $tr = $(this);
        var $label = $tr.find('input[name="yoone_sub_plans[label][]"]').detach();
        var $period = $tr.find('select[name="yoone_sub_plans[period][]"]').detach();
        var $price = $tr.find('input[name="yoone_sub_plans[price][]"]').detach();
        var $disc = $tr.find('input[name="yoone_sub_plans[discount_percent][]"]').detach();
        var $panel = buildPanel($label, $period, $price, $disc);
        $container.append($panel);
      });
      // 隐藏表格
      $table.hide();

      // 新增面板
      $addBtn.on('click', function(){
        $container.append(buildPanel());
      });

      // 删除面板
      $(document).on('click', '.yoone-sub-plan-remove', function(){
        $(this).closest('.yoone-sub-plan-panel').remove();
      });

      // 折叠/展开
      $(document).on('click', '.yoone-sub-plan-toggle', function(){
        var $btn = $(this);
        var $body = $btn.closest('.yoone-sub-plan-panel').find('.yoone-sub-plan-body');
        var expanded = $btn.attr('aria-expanded') === 'true';
        $btn.attr('aria-expanded', expanded ? 'false' : 'true');
        $btn.text(expanded ? (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.expand : '展开') : (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.collapse : '折叠'));
        $body.toggleClass('collapsed', expanded);
      });
    }
  });
})(jQuery);