components/card_deck.py

"""Render the card deck — gallery of completed thought cards."""

from __future__ import annotations


def render_deck(cards: list[dict]) -> str:
    """Render the card deck as a scrollable gallery."""
    if not cards:
        return """
        <div style="color:#5a6a7a; font-size:0.85rem; text-align:center; padding:20px;">
            <p>Your deck is empty. Complete a thought record to add your first card.</p>
        </div>
        """

    card_elements = []
    for card in reversed(cards[-10:]):  # Show last 10, newest first
        distortions = card.get("distortions", [])
        tag = distortions[0] if distortions else "—"
        date = card.get("date", "")
        thought = card.get("automatic_thought", "")[:40]
        reframe = card.get("balanced_thought", "")[:40]

        card_elements.append(f"""
        <div style="flex-shrink:0; width:140px; background:#1e2a3a; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; font-size:0.75rem;">
            <div style="color:#a78bfa; font-weight:600; font-size:0.7rem; margin-bottom:4px;">{tag}</div>
            <div style="color:#5a6a7a; font-size:0.65rem; margin-bottom:6px;">{date}</div>
            <div style="color:#8899aa; font-size:0.7rem; margin-bottom:4px;">"{thought}..."</div>
            <div style="color:#22c55e; font-size:0.7rem; font-style:italic;">→ "{reframe}..."</div>
        </div>
        """)

    return f"""
    <div style="margin-top:16px;">
        <div style="font-size:0.85rem; color:#8899aa; font-weight:600; margin-bottom:10px;">🃏 Your Deck ({len(cards)} cards)</div>
        <div style="display:flex; gap:10px; overflow-x:auto; padding-bottom:8px;">
            {''.join(card_elements)}
        </div>
    </div>
    """