components/model_card.py

import streamlit as st
import datetime


def model_list(models, on_select_callback):
    """Render a list of model cards with enhanced UI and metadata badges"""
    if not models:
        st.info("No models found. Create your first repository to get started!")
        return

    # Display the models in a grid
    cols = st.columns(2)

    for i, model in enumerate(models):
        with cols[i % 2]:
            with st.container():
                st.markdown(
                    f"""
                    <div class="model-card">
                        <div class="model-card-header">
                            <div class="model-card-title">{model.modelId}</div>
                            <div>
                                <span class="badge hf-badge">
                                    <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HF">
                                    HF
                                </span>
                                <span class="tooltip">
                                    ℹ️
                                    <span class="tooltip-text">Last updated: {datetime.datetime.now().strftime("%Y-%m-%d")}</span>
                                </span>
                            </div>
                        </div>
                        <div class="model-card-description">
                            {getattr(model, 'description', 'No description available.') or 'No description available.'}
                        </div>
                        <div class="model-card-footer">
                            <div class="model-card-tags">
                                {generate_tags(model)}
                            </div>
                            <div>
                                <span style="color: #6B7280; font-size: 0.8rem; margin-right: 8px;">
                                    <span title="Downloads">📥 {getattr(model, 'downloads', 0)}</span>
                                </span>
                                <span style="color: #6B7280; font-size: 0.8rem;">
                                    <span title="Likes">❤️ {getattr(model, 'likes', 0)}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    """,
                    unsafe_allow_html=True,
                )
                # Button to select model below the card
                if st.button(
                    f"View Details",
                    key=f"view_{model.modelId}",
                    use_container_width=True,
                ):
                    on_select_callback(model.modelId)


def generate_tags(model):
    """Generate HTML for model tags"""
    tags = getattr(model, "tags", []) or []
    if not tags:
        tags = ["untagged"]

    tags_html = ""
    for tag in tags[:3]:  # Limit to 3 tags to avoid clutter
        tags_html += f'<span class="model-tag">{tag}</span>'

    if len(tags) > 3:
        tags_html += f'<span class="model-tag">+{len(tags) - 3} more</span>'

    return tags_html


def model_detail_card(model):
    """Render a detailed model card with badges, stats, and actions"""
    st.markdown(
        f"""
        <div class="hf-card" style="padding: 20px; margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
                <div>
                    <h2 style="margin-top: 0; margin-bottom: 8px;">{model.modelId}</h2>
                    <div style="display: flex; gap: 8px; margin-bottom: 16px;">
                        <a href="https://huggingface.co/{st.session_state.username}/{model.modelId}" target="_blank" class="badge hf-badge">
                            <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HF">
                            View on Hugging Face
                        </a>
                        <a href="#" class="badge github-badge">
                            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub">
                            View on GitHub
                        </a>
                    </div>
                </div>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <span title="Downloads" class="tooltip">
                        📥 {getattr(model, 'downloads', 0)}
                        <span class="tooltip-text">Total downloads</span>
                    </span>
                    <span title="Likes" class="tooltip">
                        ❤️ {getattr(model, 'likes', 0)}
                        <span class="tooltip-text">Total likes</span>
                    </span>
                </div>
            </div>
            
            <div style="margin-bottom: 16px;">
                <h4 style="margin-bottom: 4px;">Description</h4>
                <p>{getattr(model, 'description', 'No description available.') or 'No description available.'}</p>
            </div>
            
            <div style="margin-bottom: 16px;">
                <h4 style="margin-bottom: 4px;">Tags</h4>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    {generate_detailed_tags(model)}
                </div>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                <div>
                    <h4 style="margin-bottom: 4px;">Last Updated</h4>
                    <p>{datetime.datetime.now().strftime("%B %d, %Y")}</p>
                </div>
                <div>
                    <h4 style="margin-bottom: 4px;">Model Size</h4>
                    <p>{getattr(model, 'size', 'Unknown')} MB</p>
                </div>
            </div>
        </div>
        """,
        unsafe_allow_html=True,
    )


def generate_detailed_tags(model):
    """Generate HTML for detailed model tags view"""
    tags = getattr(model, "tags", []) or []
    if not tags:
        return '<span class="model-tag">untagged</span>'

    tags_html = ""
    for tag in tags:
        tags_html += f'<span class="model-tag">{tag}</span>'

    return tags_html