import os, base64
import gradio as gr

PROJECT_NAME = "AIO2025M03 DEMO KMeans Clustering"
AIO_YEAR = "2025"
AIO_MODULE = "03"

def image_to_base64(image_path: str):
    # Construct the absolute path to the image
    current_dir = os.path.dirname(os.path.abspath(__file__))
    full_image_path = os.path.join(current_dir, image_path)
    with open(full_image_path, "rb") as f:
        return base64.b64encode(f.read()).decode("utf-8")
    
def create_header():
    with gr.Row():
        with gr.Column(scale=2):
            logo_base64 = image_to_base64("static/aivn_logo.png")
            gr.HTML(
                f"""<img src="data:image/png;base64,{logo_base64}"
                        alt="Logo"
                        style="height:120px;width:auto;margin:0 auto;margin-bottom:16px; display:block;">"""
            )
        with gr.Column(scale=2):
            gr.HTML(f"""
<div style="display:flex;justify-content:flex-start;align-items:center;gap:30px;">
    <div>
        <h1 style="margin-bottom:0; color: #4f47e6; font-size: 2.5em; font-weight: bold;"> {PROJECT_NAME} </h1>
        <h3 style="color: #888; font-style: italic"> AIO{AIO_YEAR}: Module {AIO_MODULE} </h3>
    </div>
</div>
""")
            
def create_footer():
    logo_base64_vlai = image_to_base64("static/vlai_logo.png")
    footer_html = """
<style>
  .sticky-footer{position:fixed;bottom:0px;left:0;width:100%;background:#F4EBD3;
                 padding:10px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:1000;}
  .content-wrap{padding-bottom:60px;}
</style>""" + f"""
<div class="sticky-footer">
  <div style="text-align:center;font-size:18px; color: #888">
    Created by 
    <a href="https://vlai.work" target="_blank" style="color:#465C88;text-decoration:none;font-weight:bold; display:inline-flex; align-items:center;"> VLAI 
    <img src="data:image/png;base64,{logo_base64_vlai}" alt="Logo" style="height:20px; width:auto;">
    </a> from <a href="https://aivietnam.edu.vn/" target="_blank" style="color:#355724;text-decoration:none;font-weight:bold">AI VIET NAM</a>
  </div>
</div>
"""
    return gr.HTML(footer_html)

custom_css = """
.gradio-container {
    min-height:64vh; 
    max-width: 100% !important;
    width: 100% !important;
    background: linear-gradient(135deg, #F5EFE6 0%, #E8DFCA 50%, #AEBDCA 100%);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.content-wrap {padding-bottom:8px;}
/* Make SVG plots responsive */
.plot-container svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}
/* Full width for main content */
.main {
    max-width: 100% !important;
    width: 100% !important;
}
"""