import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

public class UpdateLivestreamTemplate2 {
    public static void main(String[] args) {
        try {
            Class.forName("oracle.jdbc.OracleDriver");
            Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
            
            // We append &autoplay=1 to the URL in the database so it's ready to play
            PreparedStatement updatePost = conn.prepareStatement(
                "UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
            );
            updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu&autoplay=1");
            updatePost.executeUpdate();
            
            // 2. Update the template to use data-src instead of src.
            String htmlTemplate = 
"<style>\n" +
"  .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }\n" +
"  .tabbed-media-content-media-item .f--video-embed { display: none; width: 100%; height: 100%; }\n" +
"  .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
"  .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\n" +
"  .tabbed-media-content-media-item .button-play { z-index: 10; }\n" +
"</style>\n" +
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
"  <div class=\"c--component c--tabbed-media-content\">\n" +
"    <div class=\"tabbed-media-content-text-col\">\n" +
"      <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
"        <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
"      </div>\n" +
"      <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
"        <div class=\"tab-labels-container\" role=\"tablist\">\n" +
"          <div class=\"tab-labels-inner\">\n" +
"            {{#each livestream_posts}}\n" +
"            <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
"            {{/each}}\n" +
"          </div>\n" +
"        </div>\n" +
"        <div class=\"tab-content-container\">\n" +
"          {{#each livestream_posts}}\n" +
"          <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
"            <div class=\"f--field f--cta-title\">\n" +
"              <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
"            </div>\n" +
"            <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
"              <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
"            </div>\n" +
"            <div class=\"cta-container\">\n" +
"              <div class=\"f--field f--button\">\n" +
"                <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
"                  <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
"                </a>\n" +
"              </div>\n" +
"            </div>\n" +
"          </div>\n" +
"          {{/each}}\n" +
"        </div>\n" +
"      </div>\n" +
"    </div>\n" +
"    <div class=\"tabbed-media-content-media-col\">\n" +
"      {{#each livestream_posts}}\n" +
"      <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
"        <div class=\"f--field f--image\">\n" +
"          <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
"        </div>\n" +
"        <div class=\"f--field f--button\">\n" +
"          <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
"            <span class=\"button-icon button-icon-play\">\n" +
"              <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
"                <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
"              </svg>\n" +
"            </span>\n" +
"            <span class=\"button-text visually-hidden\"> Play </span>\n" +
"          </a>\n" +
"        </div>\n" +
"        <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
"          <iframe title=\"YouTube video player\" data-src=\"{{metaDescription}}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
"        </div>\n" +
"      </div>\n" +
"      {{/each}}\n" +
"    </div>\n" +
"  </div>\n" +
"</div>\n" +
"<script>\n" +
"  document.addEventListener(\"DOMContentLoaded\", function() {\n" +
"    var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
"    if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
"    \n" +
"    var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
"    if(panels.length > 0) panels[0].classList.add('is-active');\n" +
"\n" +
"    var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
"    if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
"\n" +
"    var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
"    allLabels.forEach(function(label) {\n" +
"      label.addEventListener('click', function(e) {\n" +
"        e.preventDefault();\n" +
"        allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
"        this.setAttribute('aria-selected', 'true');\n" +
"        \n" +
"        var targetId = this.getAttribute('aria-controls');\n" +
"        document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
"        document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
"             m.classList.remove('is-active'); \n" +
"             var vEmbed = m.querySelector('.f--video-embed');\n" +
"             if(vEmbed) vEmbed.style.display = 'none';\n" +
"             var img = m.querySelector('.f--image');\n" +
"             if(img) img.style.display = 'block';\n" +
"             var btn = m.querySelector('.button-play');\n" +
"             if(btn) btn.style.display = 'flex';\n" +
"             var iframe = m.querySelector('iframe');\n" +
"             if(iframe) { \n" +
"                 iframe.src = '';\n" +
"             }\n" +
"        });\n" +
"        \n" +
"        var targetPanel = document.getElementById(targetId);\n" +
"        if(targetPanel) targetPanel.classList.add('is-active');\n" +
"        var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
"        if(targetMedia) targetMedia.classList.add('is-active');\n" +
"      });\n" +
"    });\n" +
"\n" +
"    var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
"    playButtons.forEach(function(btn) {\n" +
"      btn.addEventListener('click', function(e) {\n" +
"        e.preventDefault();\n" +
"        var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
"        var img = mediaItem.querySelector('.f--image');\n" +
"        var videoEmbed = mediaItem.querySelector('.f--video-embed');\n" +
"        \n" +
"        if(img) img.style.display = 'none';\n" +
"        this.style.display = 'none';\n" +
"        if(videoEmbed) videoEmbed.style.display = 'block';\n" +
"        \n" +
"        var iframe = mediaItem.querySelector('iframe');\n" +
"        if(iframe && iframe.getAttribute('data-src')) {\n" +
"          iframe.src = iframe.getAttribute('data-src');\n" +
"        }\n" +
"      });\n" +
"    });\n" +
"  });\n" +
"</script>";
            
            PreparedStatement updateTemplate = conn.prepareStatement(
                "UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
            );
            updateTemplate.setString(1, htmlTemplate);
            updateTemplate.executeUpdate();
            
            System.out.println("Update complete!");
            
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}