import streamlit as st
import os

VIDEO_FOLDER = "./src/synthda_falling_realreal/"

# Page layout settings
st.set_page_config(layout="wide", initial_sidebar_state="collapsed")

# Custom styles for centering and reducing video size
st.markdown("""
    <style>
    html, body, [class*="css"] {
        padding: 0;
        margin: 0;
        font-size: 14px;
    }
    .block-container {
        padding-top: 1rem;
        padding-bottom: 0rem;
    }
    .video-wrapper {
        display: flex;
        justify-content: center;
    }
    video {
        width: 100%;
        max-width: 300px;  /* Shrink video */
        height: auto;
        border-radius: 6px;
    }
    .video-caption {
        text-align: center;
        font-weight: bold;
        margin-bottom: 0.2rem;
    }
    </style>
""", unsafe_allow_html=True)

# Title and description
st.markdown("""
<h2 style='text-align: center;'>Project SynthDa</h2>
<h4 style='text-align: center;'>SynthDa Interpolation Demo Viewer</h4>
<p style='text-align: center;'>
AutoSynthDa blends two input motion videos to <strong>generate kinematically coherent, synthetic action videos</strong>.<br>
Use the slider below to explore how the system interpolates motion from one video to another.<br>
<a href="https://github.com/nvidia/synthda" target="_blank">github.com/nvidia/synthda</a>
</p>
""", unsafe_allow_html=True)

# Slider
weight = st.slider("Interpolation Weight (0 = Left Video, 1 = Right Video)", 0.1, 0.9, 0.5, step=0.1)

# Interpolation status
if weight == 0.0:
    interp_text = "Showing Input Video 1 (no interpolation)"
elif weight == 1.0:
    interp_text = "Showing Input Video 2 (no interpolation)"
else:
    w2 = round(1.0 - weight, 1)
    interp_text = f"{weight:.1f} from Input 1 + {w2:.1f} from Input 2"

st.markdown(f"<p style='text-align:center;'><strong>{interp_text}</strong></p>", unsafe_allow_html=True)

# Video paths
filename_interp = f"videos_generated_{weight:.1f}.mp4"
video_interp = os.path.join(VIDEO_FOLDER, filename_interp)
video_input1 = os.path.join(VIDEO_FOLDER, "videos_generated_0.0.mp4")
video_input2 = os.path.join(VIDEO_FOLDER, "videos_generated_1.0.mp4")

# 3 videos in row
col1, col2, col3 = st.columns([1, 1, 1])

with col1:
    st.markdown("<div class='video-caption'>Input Video 1</div>", unsafe_allow_html=True)
    if os.path.exists(video_input1):
        st.markdown(f"""
            <div class='video-wrapper'>
                <video controls>
                    <source src="{video_input1}" type="video/mp4">
                </video>
            </div>
        """, unsafe_allow_html=True)
    else:
        st.error("Video 1 not found")

with col2:
    st.markdown("<div class='video-caption'>Interpolated Video</div>", unsafe_allow_html=True)
    if os.path.exists(video_interp):
        st.markdown(f"""
            <div class='video-wrapper'>
                <video controls>
                    <source src="{video_interp}" type="video/mp4">
                </video>
            </div>
        """, unsafe_allow_html=True)
    else:
        st.error("Interpolated video not found")

with col3:
    st.markdown("<div class='video-caption'>Input Video 2</div>", unsafe_allow_html=True)
    if os.path.exists(video_input2):
        st.markdown(f"""
            <div class='video-wrapper'>
                <video controls>
                    <source src="{video_input2}" type="video/mp4">
                </video>
            </div>
        """, unsafe_allow_html=True)
    else:
        st.error("Video 2 not found")