components/card.py

import streamlit as st

from utils.time_utils import compute_end_time, format_time


def render_card(index: int, on_save, on_delete, rank_tone: str) -> None:
    card = st.session_state.cards[index]
    title_key = f"title_{index}"
    hour_key = f"hour_{index}"
    minute_key = f"minute_{index}"

    current_hour = f"{int(st.session_state.get(hour_key, card['startHour'])):02d}"
    current_minute = f"{int(st.session_state.get(minute_key, card['startMinute'])):02d}"
    end_hour, end_minute = compute_end_time(current_hour, current_minute)
    card["endHour"] = end_hour
    card["endMinute"] = end_minute

    with st.container(border=True):
        st.markdown(f'<div class="card-rank-marker card-rank-{rank_tone}"></div>', unsafe_allow_html=True)
        title_col, status_col = st.columns([1.8, 0.42])
        with title_col:
            card["title"] = st.text_input(
                "Title",
                value=card["title"],
                key=title_key,
                placeholder="Morning Shift",
                label_visibility="collapsed",
            )

        with status_col:
            badge = "Saved" if card.get("id") else "Draft"
            st.markdown(f'<div class="card-status">{badge}</div>', unsafe_allow_html=True)

        hour_col, minute_col, end_col, save_col, delete_col = st.columns([0.46, 0.46, 0.8, 0.62, 0.62])
        with hour_col:
            hour_value = st.number_input(
                "Hour",
                min_value=0,
                max_value=23,
                value=int(current_hour),
                step=1,
                key=hour_key,
                label_visibility="collapsed",
            )
            card["startHour"] = f"{hour_value:02d}"

        with minute_col:
            minute_value = st.number_input(
                "Minute",
                min_value=0,
                max_value=59,
                value=int(current_minute),
                step=1,
                key=minute_key,
                label_visibility="collapsed",
            )
            card["startMinute"] = f"{minute_value:02d}"

        end_hour, end_minute = compute_end_time(card["startHour"], card["startMinute"])
        card["endHour"] = end_hour
        card["endMinute"] = end_minute

        with end_col:
            st.markdown(
                f"""
                <div class="end-time-inline end-time-inline-accent">
                    <div class="end-time-inline-label">End</div>
                    <div class="end-time-inline-value">{format_time(end_hour, end_minute)}</div>
                </div>
                """,
                unsafe_allow_html=True,
            )

        with save_col:
            st.markdown('<div class="secondary-action compact-button">', unsafe_allow_html=True)
            st.button(
                "Update" if card.get("id") else "Save",
                key=f"save_{index}",
                use_container_width=True,
                on_click=on_save,
                args=(index,),
            )
            st.markdown("</div>", unsafe_allow_html=True)
        with delete_col:
            st.markdown('<div class="danger-action compact-button">', unsafe_allow_html=True)
            st.button(
                "Delete",
                key=f"delete_{index}",
                use_container_width=True,
                on_click=on_delete,
                args=(index,),
            )
            st.markdown("</div>", unsafe_allow_html=True)