import streamlit as st
from PIL import Image
import base64
import yaml
import os
import urllib.request
import tarfile
from yaml.loader import SafeLoader

# Page setup
st.set_page_config(
    layout="wide",
    page_icon="/home/ubuntu/images/opensearch_mark_default.png"
)

import streamlit as st
from PIL import Image
import base64
import yaml
import os
import urllib.request
import tarfile
from yaml.loader import SafeLoader

# Page setup
st.set_page_config(
    layout="wide",
    page_icon="/home/ubuntu/images/opensearch_mark_default.png"
    
)
st.markdown("""
    <style>
    /* Import Amazon Ember font */
    @import url('https://fonts.cdnfonts.com/css/amazon-ember');

    /* Global layout tweaks */
    html, body, .main {
        overflow: hidden;
        height: 100vh;
        background-color: #1E1E1E;
        color: #FFFFFF;
        font-family: 'Amazon Ember', sans-serif;
    }

    .block-container {
        padding-top: 5rem;
    }

    /* Hide Streamlit UI elements */
    #MainMenu, header, footer,
    button[title="View fullscreen"] {
        visibility: hidden;
    }

    /* Title styling */
    .title {
        font-size: 40px;
        color: #FF9900;
        font-family: 'Amazon Ember Display 500', sans-serif;
        margin-bottom: 10px;
    }

    /* Demo card styling */
    .demo-card {
        background-color: #111111;
        border-radius: 12px;
        padding: 20px;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #333333;
    }

    .demo-text {
        font-size: 24px;
        color: #c5c3c0;
        font-family: 'Amazon Ember Cd RC 250', sans-serif;
    }

    .demo-button {
        background-color: #000000;
        border: 1px solid #888;
        color: white;
        padding: 8px 18px;
        border-radius: 6px;
        font-size: 16px;
    }

    a .demo-card:hover {
        background-color: #e46e08 !important;
        color: black !important;
        transition: 0.3s;
    }
    </style>
""", unsafe_allow_html=True)




# Header with logo and title
extra, col_logo, col_title = st.columns([3,40, 58])
with col_logo:
    st.image("/home/ubuntu/AI-search-with-amazon-opensearch-service/OpenSearchApp/images/OS_AI_1_cropped.png", use_column_width=True)

    #st.image("/home/ubuntu/images/OS_AI_1.png", use_column_width=True)
# with col_title:
#     st.write("")
#     st.markdown('<div class="title">OpenSearch AI demos</div>', unsafe_allow_html=True)

def demo_link_block(icon, title, target_page):
    st.markdown(f"""
        <a href="/{target_page}" target="_self" style="text-decoration: none;">
            <div class="demo-card">
                <div class="demo-text">{icon} {title}</div>
            </div>
        </a>
    """, unsafe_allow_html=True)

st.write("")
demo_link_block("🔍", "AI Search", "Semantic_Search")
demo_link_block("💬","Multimodal Conversational Search", "Multimodal_Conversational_Search")
demo_link_block("🛍️","Agentic Shopping Assistant", "AI_Shopping_Assistant")




# Header with logo and title
extra, col_logo, col_title = st.columns([3,34, 63])
with col_logo:
    st.image("/home/user/app/images/OS_AI_1_cropped.png", use_column_width=True)
st.write("")
st.write("")
    #st.image("/home/ubuntu/images/OS_AI_1.png", use_column_width=True)
# with col_title:
#     st.write("")
#     st.markdown('<div class="title">OpenSearch AI demos</div>', unsafe_allow_html=True)

def demo_link_block(icon, title, target_page):
    st.markdown(f"""
        <a href="/{target_page}" target="_self" style="text-decoration: none;">
            <div class="demo-card">
                <div class="demo-text">{icon} {title}</div>
            </div>
        </a>
    """, unsafe_allow_html=True)

st.write("")
demo_link_block("🔍", "AI Search", "Semantic_Search")
demo_link_block("💬","Multimodal Conversational Search", "Multimodal_Conversational_Search")
demo_link_block("🛍️","Agentic Shopping Assistant", "AI_Shopping_Assistant")