import gradio as gr
import pandas as pd
import numpy as np
from openai import OpenAI
import ast, os

# ── Load dataset ──────────────────────────────────────────────────────────────
df = pd.read_parquet("steam_games_clustered_production.parquet")

# Normalise embeddings to a (N, 768) float32 matrix for fast cosine search
embeddings_matrix = np.stack(df["embedding"].values).astype(np.float32)
norms = np.linalg.norm(embeddings_matrix, axis=1, keepdims=True)
norms[norms == 0] = 1e-9
embeddings_matrix_normed = embeddings_matrix / norms

# Cluster descriptions (from README)
CLUSTER_LABELS = {
    0:  "🏟️ Sports & Simulation",
    1:  "🎮 Mainstream / Cinematic",
    2:  "🀄 East Asian Art Style",
    3:  "🌸 Anime & 2D Illustration",
    -1: "🌀 Unique / Outliers",
}

client = OpenAI()   # reads OPENAI_API_KEY from env automatically


# ── Core helpers ──────────────────────────────────────────────────────────────

def embed_text(text: str) -> np.ndarray:
    """Embed a user text query with OpenAI text-embedding-3-small."""
    response = client.embeddings.create(
        model="text-embedding-3-small",
        input=text,
        dimensions=768,          # match our 768-dim CLIP vectors
    )
    vec = np.array(response.data[0].embedding, dtype=np.float32)
    return vec / (np.linalg.norm(vec) + 1e-9)


def cosine_search(query_vec: np.ndarray, top_k: int = 6) -> pd.DataFrame:
    """Return the top-k most similar games via cosine similarity."""
    sims = embeddings_matrix_normed @ query_vec          # (N,)
    idx  = np.argsort(sims)[::-1][:top_k]
    result = df.iloc[idx].copy()
    result["similarity"] = sims[idx]
    return result


def build_game_card(row) -> str:
    """Build one HTML game card."""
    genres     = ", ".join(row["genres"]) if hasattr(row["genres"], "__iter__") and not isinstance(row["genres"], str) else row["genres"]
    cluster    = CLUSTER_LABELS.get(int(row["cluster_label"]), "❓ Unknown")
    sim_pct    = f"{row['similarity']*100:.1f}%"
    recs       = f"{int(row['recommendations']):,}"
    img_url    = row["header_image"]
    steam_name = row["name"].replace(" ", "_")   # rough slug (Steam search)
    search_url = f"https://store.steampowered.com/search/?term={row['name'].replace(' ', '+')}"

    return f"""
<div class="game-card">
  <a href="{search_url}" target="_blank" class="card-link">
    <div class="card-img-wrap">
      <img src="{img_url}" alt="{row['name']}" loading="lazy" onerror="this.src='https://via.placeholder.com/460x215/1a1f2e/4fc3f7?text=No+Image'"/>
      <div class="sim-badge">{sim_pct} match</div>
    </div>
    <div class="card-body">
      <h3 class="game-title">{row['name']}</h3>
      <p class="genre-tag">{genres}</p>
      <div class="meta-row">
        <span class="cluster-pill">{cluster}</span>
        <span class="recs">👍 {recs}</span>
      </div>
    </div>
  </a>
</div>"""


CARD_CSS = """
<style>
  @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Inter:wght@400;500&display=swap');

  :root {
    --bg:       #0d1117;
    --surface:  #161b27;
    --surface2: #1f2638;
    --accent:   #4fc3f7;
    --accent2:  #7c4dff;
    --text:     #e8eaf6;
    --muted:    #8898b3;
    --border:   #2a3454;
  }

  .results-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
  }

  .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    padding: 4px 0 20px;
  }

  .game-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(79,195,247,.15);
    border-color: var(--accent);
  }

  .card-link { text-decoration: none; color: inherit; display: block; }

  .card-img-wrap { position: relative; overflow: hidden; height: 140px; background: #0d1117; }
  .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;
                       transition: transform .35s ease; }
  .game-card:hover .card-img-wrap img { transform: scale(1.07); }

  .sim-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(79,195,247,.9);
    color: #050810;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: 20px;
  }

  .card-body { padding: 12px 14px 14px; }

  .game-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .genre-tag {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    color: var(--muted);
    margin: 0 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

  .cluster-pill {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--accent2);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 55%;
  }

  .recs {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
  }

  .no-results {
    font-family: 'Inter', sans-serif;
    color: var(--muted);
    text-align: center;
    padding: 40px 20px;
    font-size: .95rem;
  }
</style>
"""


def search_games(query: str, top_k: int, cluster_filter: str):
    """Main search function wired to Gradio."""
    query = query.strip()
    if not query:
        return CARD_CSS + '<p class="no-results">✨ Describe an art style or game vibe above to explore the universe.</p>'

    try:
        query_vec = embed_text(query)
    except Exception as e:
        return CARD_CSS + f'<p class="no-results">⚠️ OpenAI embedding error: {e}</p>'

    # Expand top_k when filtering so we still show `top_k` results after filter
    fetch_k = top_k * 6 if cluster_filter != "All Clusters" else top_k
    results = cosine_search(query_vec, top_k=min(fetch_k, len(df)))

    # Optional cluster filter
    if cluster_filter != "All Clusters":
        cluster_id = {v: k for k, v in CLUSTER_LABELS.items()}.get(cluster_filter, None)
        if cluster_id is not None:
            results = results[results["cluster_label"] == cluster_id]
    results = results.head(top_k)

    if results.empty:
        return CARD_CSS + '<p class="no-results">🔭 No games found for that filter. Try a broader cluster or different query.</p>'

    cards_html = "".join(build_game_card(row) for _, row in results.iterrows())
    header = f'<p class="results-header">🎯 Top {len(results)} visual matches for "{query}"</p>'
    return CARD_CSS + header + f'<div class="games-grid">{cards_html}</div>'


# ── Gradio UI ─────────────────────────────────────────────────────────────────

THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.cyan,
    secondary_hue=gr.themes.colors.indigo,
    neutral_hue=gr.themes.colors.slate,
    font=[gr.themes.GoogleFont("Rajdhani"), gr.themes.GoogleFont("Inter"), "sans-serif"],
).set(
    body_background_fill="#0d1117",
    body_text_color="#e8eaf6",
    block_background_fill="#161b27",
    block_border_color="#2a3454",
    input_background_fill="#1f2638",
    input_border_color="#2a3454",
    button_primary_background_fill="#4fc3f7",
    button_primary_text_color="#050810",
    button_primary_background_fill_hover="#7c4dff",
)

CLUSTER_CHOICES = ["All Clusters"] + list(CLUSTER_LABELS.values())

with gr.Blocks(
    theme=THEME,
    title="🌌 Steam Graphic Universe Explorer",
    css="""
    #title { text-align:center; font-family:'Rajdhani',sans-serif;
             font-size:2.4rem; font-weight:700; letter-spacing:.06em;
             background: linear-gradient(90deg,#4fc3f7,#7c4dff);
             -webkit-background-clip:text; -webkit-text-fill-color:transparent;
             margin-bottom:4px; }
    #subtitle { text-align:center; color:#8898b3; font-size:.95rem; margin-bottom:28px; }
    #search-btn { min-width:120px; font-family:'Rajdhani',sans-serif;
                  font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    """
) as demo:

    gr.HTML('<h1 id="title">🌌 Steam Graphic Universe</h1>')
    gr.HTML('<p id="subtitle">Discover games by art style, mood & visual aesthetic — powered by CLIP embeddings</p>')

    with gr.Row():
        with gr.Column(scale=5):
            query_input = gr.Textbox(
                placeholder='e.g. "dark gothic pixel art", "vibrant anime pastel", "gritty photorealistic military"…',
                label="Describe the game aesthetic",
                lines=2,
                max_lines=4,
            )
        with gr.Column(scale=2, min_width=180):
            cluster_dropdown = gr.Dropdown(
                choices=CLUSTER_CHOICES,
                value="All Clusters",
                label="Filter by Aesthetic Cluster",
            )
        with gr.Column(scale=1, min_width=120):
            top_k_slider = gr.Slider(
                minimum=3, maximum=12, step=1, value=6,
                label="Results",
            )

    search_btn = gr.Button("🔭 Explore", variant="primary", elem_id="search-btn")

    output_html = gr.HTML(
        value=CARD_CSS + '<p class="no-results">✨ Describe an art style or game vibe above to explore the universe.</p>'
    )

    # Example prompts
    gr.Examples(
        examples=[
            ["dark gothic pixel art with neon accents"],
            ["vibrant anime pastel soft character art"],
            ["gritty photorealistic military shooter"],
            ["cozy watercolor hand-drawn indie"],
            ["east asian ink brush calligraphy"],
            ["retro 8-bit arcade sprites"],
            ["sci-fi space neon cyberpunk"],
            ["sports simulation athlete photography"],
        ],
        inputs=query_input,
        label="💡 Example Aesthetic Queries",
    )

    # Wire events
    search_btn.click(
        fn=search_games,
        inputs=[query_input, top_k_slider, cluster_dropdown],
        outputs=output_html,
    )
    query_input.submit(
        fn=search_games,
        inputs=[query_input, top_k_slider, cluster_dropdown],
        outputs=output_html,
    )

if __name__ == "__main__":
    demo.launch()