import json
import oracledb

# Construct the Editor.js JSON structure using raw HTML blocks matching ckeditor5-layout schema
json_data = {
    "time": 1700000000000,
    "blocks": [
        {
            "type": "stickyNav",
            "data": {
                "title": "Tầm nhìn - Sứ mệnh",
                "bgColor": "#ffffff",
                "items": [
                    {"label": "Giới thiệu tổng quan", "link": "/page/gioi-thieu-tong-quan"},
                    {"label": "Lịch sử hình thành", "link": "/page/lich-su-hinh-thanh"},
                    {"label": "Tầm nhìn - Sứ mệnh - Giá trị cốt lõi", "link": "/page/tam-nhin-su-menh-gia-tri-cot-loi"},
                    {"label": "Ban lãnh đạo", "link": "/page/doi-ngu-lanh-dao"},
                    {"label": "Các đơn vị", "link": "/page/cac-don-vi"},
                    {"label": "Thành tựu và giải thưởng", "link": "/page/thanh-tuu-va-giai-thuong"}
                ]
            }
        },
        {
            "type": "raw",
            "data": {
                "html": """
<section class="relative overflow-hidden xl:py-16 md:py-12 py-8">
  <div class="absolute top-0 right-0 w-1/2 h-full bg-primary-100 -skew-x-12 translate-x-1/4 z-0 opacity-50 hidden lg:block"></div>
  <div class="container relative z-10">
    <div class="ck-layout-columns" columns="2">
      <!-- Column 1 (Left): Text -->
      <div>
        <div class="relative">
          <div class="absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full"></div>
          <h2 class="display-3 text-primary-500 uppercase mb-4 block z-[1] relative">TẦM NHÌN</h2>
          <div class="flex flex-col space-y-4">
            <div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
              <p class="body-1 text-gray-800 text-justify !font-medium">Trở thành bệnh viện đại học dẫn đầu Việt Nam đạt chuẩn quốc tế</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Column 2 (Right): Image -->
      <div>
        <div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
          <img alt="vision" src="/images/umass/mission.jpeg" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110" />
        </div>
      </div>
    </div>
  </div>
</section>
""",
                "stretched": True
            }
        },
        {
            "type": "raw",
            "data": {
                "html": """
<section class="xl:py-16 md:py-12 py-8 bg-primary-500 text-white overflow-hidden">
  <div class="container">
    <div class="ck-layout-columns" columns="2">
      <!-- Column 1 (Left): Image -->
      <div>
        <div class="relative h-full">
          <div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
            <img alt="mission" src="/images/umass/vision.jpeg" class="w-full h-full object-cover" />
          </div>
        </div>
      </div>
      <!-- Column 2 (Right): Text -->
      <div>
        <div class="relative">
          <div class="absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-white/50 rounded-full"></div>
          <h2 class="display-3 text-white mb-4 relative z-[1]">SỨ MỆNH</h2>
        </div>
        <div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
          <p class="body-1 text-primary-500 text-justify !font-medium">Mang đến giải pháp chăm sóc sức khỏe tối ưu từ sự tích hợp giữa điều trị, nghiên cứu và đào tạo</p>
        </div>
      </div>
    </div>
  </div>
</section>
""",
                "stretched": True
            }
        },
        {
            "type": "raw",
            "data": {
                "html": """
<section class="bg-primary-75 py-12 overflow-hidden">
  <div class="container">
    <h2 class="text-center display-4 text-primary-600 xl:mb-6 md:mb-4 mb-3 uppercase">Giá trị cốt lõi</h2>
    
    <div class="ck-layout-columns" columns="4">
      <!-- Column 1: Tiên phong -->
      <div class="p-3">
        <div class="rounded-lg shadow bg-primary-600 text-white p-4 h-full flex flex-col items-center text-center">
          <div class="mb-3">
            <img alt="Tiên phong" src="/images/career/core-hover-1.webp" style="width: 80px; height: 80px; object-fit: contain;" />
          </div>
          <h3 class="heading-1 font-weight-bold mb-2">Tiên phong</h3>
          <p class="title-1">Phát triển và ứng dụng kỹ thuật tiên tiến vào điều trị, giảng dạy, nghiên cứu</p>
        </div>
      </div>
      
      <!-- Column 2: Thấu hiểu -->
      <div class="p-3">
        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
          <div class="mb-3">
            <img alt="Thấu hiểu" src="/images/career/core-2.webp" style="width: 80px; height: 80px; object-fit: contain;" />
          </div>
          <h3 class="heading-1 font-weight-bold mb-2">Thấu hiểu</h3>
          <p class="title-1 text-gray-700">Nỗi đau thể xác và tinh thần của người bệnh để đưa ra giải pháp điều trị tối ưu</p>
        </div>
      </div>
      
      <!-- Column 3: Chuẩn mực -->
      <div class="p-3">
        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
          <div class="mb-3">
            <img alt="Chuẩn mực" src="/images/career/core-3.webp" style="width: 80px; height: 80px; object-fit: contain;" />
          </div>
          <h3 class="heading-1 font-weight-bold mb-2">Chuẩn mực</h3>
          <p class="title-1 text-gray-700">Về y đức và học thuật của người thầy giáo – thầy thuốc</p>
        </div>
      </div>
      
      <!-- Column 4: An toàn -->
      <div class="p-3">
        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
          <div class="mb-3">
            <img alt="An toàn" src="/images/career/core-4.webp" style="width: 80px; height: 80px; object-fit: contain;" />
          </div>
          <h3 class="heading-1 font-weight-bold mb-2">An toàn</h3>
          <p class="title-1 text-gray-700">Cho người bệnh, nhân viên y tế và cộng đồng</p>
        </div>
      </div>
    </div>
  </div>
</section>
""",
                "stretched": True
            }
        }
    ],
    "version": "2.30.8"
}

json_string = json.dumps(json_data, ensure_ascii=False, indent=2)

with open("tam_nhin_su_menh_import.json", "w", encoding="utf-8") as f:
    f.write(json_string)

print("Generated tam_nhin_su_menh_import.json successfully!")

# Automatically attempt to update local Oracle Database
try:
    conn = oracledb.connect(user='sisvietnam', password='sisvietnam', dsn='localhost:1521/sisvietnam')
    cursor = conn.cursor()
    cursor.execute("UPDATE sis_page SET content = :content WHERE slug = 'tam-nhin-su-menh-gia-tri-cot-loi'", content=json_string)
    conn.commit()
    print("Updated database table 'sis_page' for slug 'tam-nhin-su-menh-gia-tri-cot-loi' with layout JSON blocks!")
    conn.close()
except Exception as e:
    print("DB Update bypassed or failed:", e)