import re

with open('src/main/resources/templates/dao-tao-detail.html', 'r', encoding='utf-8') as f:
    content = f.read()

# 1. Remove hardcoded tabs
old_html = """              <div>
                <!-- Tabs -->
                <div class="flex justify-center xl:mb-8 md:mb-6 mb-4" style="margin-bottom: 2rem;">
                  <div class="tabs-container">
                    <button class="dao-tao-tab-btn active" data-tab="overview"> Tổng quan </button>
                    <button class="dao-tao-tab-btn" data-tab="general-info"> Thông tin chung </button>
                  </div>
                </div>
                <!-- Tab: Tổng quan (nội dung chính) -->
                <div id="tab-overview" class="dao-tao-tab-panel active">
                  <div class="prose prose-blog prose-table prose-content max-w-none" id="postContentParsed">
                    <!-- Nội dung chi tiết sẽ được render tại đây -->
                  </div>
                  <div id="postContentRaw" style="display:none;" th:text="${post.content}"></div>
                </div>
                <!-- Tab: Thông tin chung -->
                <div id="tab-general-info" class="dao-tao-tab-panel">
                  <div class="prose prose-blog prose-table prose-content max-w-none" id="postGeneralInfoParsed">
                    <!-- Thông tin chung sẽ được render tại đây -->
                  </div>
                  <div id="postExcerptRaw" style="display:none;" th:text="${post.excerpt}"></div>
                </div>
              </div>"""

new_html = """              <div class="prose prose-blog prose-table prose-content max-w-none" id="postContentParsed">
                <!-- Nội dung chi tiết sẽ được render tại đây -->
              </div>
              <div id="postContentRaw" style="display:none;" th:text="${post.content}"></div>"""

content = content.replace(old_html, new_html)

# 2. Add handler
handler = """                        case "trainingCourseInfo":
                          var d = block.data;
                          var introHtml = d.introText ? d.introText.split('\\n').filter(function(p){return p.trim()!==''}).map(function(p){return '<p>'+p+'</p>'}).join('') : '';
                          
                          var hoSoHtml = d.documents ? d.documents.split('\\n').filter(function(p){return p.trim()!==''}).map(function(p){return '<li>'+p+'</li>'}).join('') : '';
                          if(hoSoHtml) hoSoHtml = '<ul>' + hoSoHtml + '</ul>';

                          var luuYHtml = d.notes ? d.notes.split('\\n').filter(function(p){return p.trim()!==''}).map(function(p){return '<li>'+p+'</li>'}).join('') : '';
                          if(luuYHtml) luuYHtml = '<ul>' + luuYHtml + '</ul>';

                          var locationHtml = d.location ? d.location.split('\\n').filter(function(p){return p.trim()!==''}).map(function(p){return '<p>'+p+'</p>'}).join('') : '';

                          html += '<div class="training-course-tabs-wrapper">';
                          html += '  <div class="flex justify-center xl:mb-8 md:mb-6 mb-4" style="margin-bottom: 2rem;">';
                          html += '    <div class="tabs-container">';
                          html += '      <button class="dao-tao-tab-btn active" onclick="switchTrainingTab(this, \\'overview\\')"> Tổng quan </button>';
                          html += '      <button class="dao-tao-tab-btn" onclick="switchTrainingTab(this, \\'general-info\\')"> Thông tin chung </button>';
                          html += '    </div>';
                          html += '  </div>';

                          html += '  <div class="dao-tao-tab-panel active" data-tab-content="overview">';
                          if(introHtml) html += introHtml;
                          
                          if(d.bannerText) {
                            html += '<div style="-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 102, 102);font-family:Roboto, sans-serif;font-size:16px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:0px;text-align:center;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;"><span style="color:rgb(255,0,0);font-family:Roboto, sans-serif;font-size:12pt;"><b style="box-sizing:border-box;margin:0px;padding:0px;"><span style="box-sizing:border-box;margin:0px;padding:0px;"><strong>' + d.bannerText + '</strong></span></b></span></div>';
                          }

                          html += '<figure class="table" style="width:100%;"><table class="ck-table-resized" style="border-collapse:collapse;border-spacing:0px;width:100%;">';
                          html += '<colgroup><col style="width:25%;"><col style="width:75%;"></colgroup><tbody>';
                          
                          if(d.time) html += '<tr><td><strong>Thời gian:</strong></td><td>' + d.time.replace(/\\n/g, '<br>') + '</td></tr>';
                          if(d.audience) html += '<tr><td><strong>Đối tượng đăng ký:</strong></td><td>' + d.audience.replace(/\\n/g, '<br>') + '</td></tr>';
                          
                          var thongTinLopHoc = '';
                          if(d.fileChieuSinh) thongTinLopHoc += 'Thông báo chiêu sinh <a href="'+d.fileChieuSinh+'" target="_blank"><strong>file đính kèm</strong></a>';
                          if(d.filePhieuDangKy) thongTinLopHoc += (thongTinLopHoc?' và ':'') + 'phiếu đăng ký <a href="'+d.filePhieuDangKy+'" target="_blank"><strong>file đính kèm</strong></a>';
                          if(thongTinLopHoc) html += '<tr><td><strong>Thông tin lớp học</strong></td><td><p>' + thongTinLopHoc + '</p></td></tr>';

                          if(d.quantity) html += '<tr><td><strong>Số lượng:</strong></td><td><strong>' + d.quantity + '</strong></td></tr>';
                          if(hoSoHtml) html += '<tr><td><strong>Hồ sơ đăng ký tham dự:</strong></td><td>' + hoSoHtml + '</td></tr>';
                          if(luuYHtml) html += '<tr><td><strong>Lưu ý:</strong></td><td>' + luuYHtml + '</td></tr>';
                          
                          html += '</tbody></table></figure>';
                          html += '  </div>';

                          html += '  <div class="dao-tao-tab-panel" data-tab-content="general-info">';
                          html += '<figure class="table" style="width:100%;"><table style="border-collapse:collapse;border-spacing:0px;width:100%;">';
                          html += '<colgroup><col style="width:25%;"><col style="width:75%;"></colgroup><tbody>';

                          if(d.tuitionFee) html += '<tr><td><strong>Học phí:</strong></td><td><strong>' + d.tuitionFee + '</strong></td></tr>';
                          if(locationHtml) html += '<tr><td><strong>Địa điểm nhận hồ sơ và học phí:</strong></td><td>' + locationHtml + '</td></tr>';
                          
                          var bankHtml = '';
                          if(d.bankAccountName) bankHtml += '<li>Tên tài khoản: ' + d.bankAccountName + '</li>';
                          if(d.bankAccountNumber) bankHtml += '<li>Số tài khoản: ' + d.bankAccountNumber + '</li>';
                          if(d.bankName) bankHtml += '<li>Tên ngân hàng: ' + d.bankName + '</li>';
                          if(d.transferContent) bankHtml += '<li>Nội dung: <strong>' + d.transferContent + '</strong></li>';

                          if(bankHtml) {
                            html += '<tr><td rowspan="2"><strong>Hình thức nộp học phí:</strong></td><td>&nbsp;</td></tr>';
                            html += '<tr><td><strong>Chuyển khoản:</strong><ul>' + bankHtml + '</ul></td></tr>';
                          }

                          html += '</tbody></table></figure>';
                          html += '  </div>';
                          html += '</div>';

                          break;
                        case "raw":"""

content = content.replace('case "raw":', handler)

# 3. Replace complex parseEditorContent tab split logic
regex_pattern = r"var isJsonSplit = false;.*?if \(!isJsonSplit\) \{.*?if \(contentText\.indexOf\('<!-- TAB_SPLIT -->'\) !== -1\) \{.*?\} else \{.*?parseEditorContent\(contentText, 'postContentParsed'\);.*?parseEditorContent\(excerptText, 'postGeneralInfoParsed'\);.*?\}.*?\}"
content = re.sub(regex_pattern, "parseEditorContent(contentText, 'postContentParsed');", content, flags=re.DOTALL)

# 4. Add switchTrainingTab script
script = """
    <script>
      function switchTrainingTab(btn, tabId) {
        var container = btn.closest('.training-course-tabs-wrapper');
        if(!container) return;
        
        var btns = container.querySelectorAll('.dao-tao-tab-btn');
        for(var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
        btn.classList.add('active');
        
        var panels = container.querySelectorAll('.dao-tao-tab-panel');
        for(var j = 0; j < panels.length; j++) panels[j].classList.remove('active');
        var panel = container.querySelector('.dao-tao-tab-panel[data-tab-content="' + tabId + '"]');
        if(panel) panel.classList.add('active');
      }
    </script>
"""

if 'function switchTrainingTab' not in content:
    content = content.replace('</body>', script + '\n  </body>')

with open('src/main/resources/templates/dao-tao-detail.html', 'w', encoding='utf-8') as f:
    f.write(content)