gui.py

# gui.py

import streamlit as st
import time
from clock import Clock


def inject_custom_css():
    """Injects CSS to draw smooth, modern LED dots and handle alignment."""
    st.markdown(
        """
        <style>
        .led-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .led-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }
        .led-on {
            background-color: #00ffcc;
            box-shadow: 0 0 15px #00ffcc, 0 0 5px #ffffff;
        }
        .led-off {
            background-color: #262730;
            border: 2px solid #41444c;
        }
        .label-text {
            font-size: 14px;
            font-weight: bold;
            color: #808495;
            text-align: center;
            margin-top: 15px;
        }
        .time-display {
            font-family: 'Courier New', Courier, monospace;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            color: #00ffcc;
            margin-top: 30px;
            letter-spacing: 2px;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )


def render_gui():
    """Renders the entire binary clock interface inside Streamlit."""
    st.title("🎛️ Python Binary Clock")
    st.write("A beautifully separated backend/frontend BCD clock built with Streamlit.")

    inject_custom_css()
    clock = Clock()
    matrix = clock.get_binary_clock_matrix()

    # Create 8 columns: 6 for digits + 2 empty spacer columns to separate HH : MM : SS
    # Order: H1, H2, [space], M1, M2, [space], S1, S2
    cols = st.columns([1, 1, 0.4, 1, 1, 0.4, 1, 1])

    column_mapping = {
        0: 0,  # H1
        1: 1,  # H2
        # 2 is empty space
        3: 2,  # M1
        4: 3,  # M2
        # 5 is empty space
        6: 4,  # S1
        7: 5,  # S2
    }

    # Render the 4 rows of LEDs
    for row_idx in range(4):
        for col_idx in range(8):
            with cols[col_idx]:
                if col_idx in column_mapping:
                    matrix_col = column_mapping[col_idx]
                    bit_value = matrix[row_idx][matrix_col]

                    # Choose the right CSS class based on bit value (1 = ON, 0 = OFF)
                    led_class = "led-on" if bit_value == 1 else "led-off"

                    st.markdown(
                        f'<div class="led-container"><div class="led-dot {led_class}"></div></div>',
                        unsafe_allow_html=True,
                    )
                else:
                    # Provide an empty placeholder structural block for the gaps
                    st.markdown(
                        '<div style="height: 52px;"></div>', unsafe_allow_html=True
                    )

    # Render Column Labels at the bottom
    for col_idx in range(8):
        with cols[col_idx]:
            if col_idx == 0:
                st.markdown('<p class="label-text">H</p>', unsafe_allow_html=True)
            elif col_idx == 1:
                st.markdown('<p class="label-text">H</p>', unsafe_allow_html=True)
            elif col_idx == 3:
                st.markdown('<p class="label-text">M</p>', unsafe_allow_html=True)
            elif col_idx == 4:
                st.markdown('<p class="label-text">M</p>', unsafe_allow_html=True)
            elif col_idx == 6:
                st.markdown('<p class="label-text">S</p>', unsafe_allow_html=True)
            elif col_idx == 7:
                st.markdown('<p class="label-text">S</p>', unsafe_allow_html=True)

    # Render a digital backup clock underneath for easy verification
    readable_time = time.strftime("%H : %M : %S")
    st.markdown(
        f'<div class="time-display">{readable_time}</div>', unsafe_allow_html=True
    )

    # Wait exactly 1 second, then force Streamlit to loop and repaint
    time.sleep(1)
    st.rerun()