"""Generate the HTML/CSS card preview for the Gradio UI."""

from src.scoring import CardData


STYLE_THEMES = {
    "Starter": {
        "bg": "linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)",
        "accent": "#6366f1",
        "accent2": "#818cf8",
        "text": "#1f2937",
        "subtext": "#4b5563",
        "card": "#ffffff",
        "shine": "rgba(255,255,255,0.6)",
    },
    "Legendary": {
        "bg": "linear-gradient(135deg, #fff1c1 0%, #ff8a00 100%)",
        "accent": "#b45309",
        "accent2": "#f59e0b",
        "text": "#451a03",
        "subtext": "#78350f",
        "card": "#fffbeb",
        "shine": "rgba(255,255,255,0.7)",
    },
    "Dark Mode": {
        "bg": "linear-gradient(135deg, #0f172a 0%, #4c1d95 100%)",
        "accent": "#22d3ee",
        "accent2": "#a855f7",
        "text": "#f8fafc",
        "subtext": "#cbd5e1",
        "card": "#1e293b",
        "shine": "rgba(255,255,255,0.15)",
    },
    "Researcher": {
        "bg": "linear-gradient(135deg, #e0f2fe 0%, #0ea5e9 100%)",
        "accent": "#0369a1",
        "accent2": "#38bdf8",
        "text": "#082f49",
        "subtext": "#0c4a6e",
        "card": "#f0f9ff",
        "shine": "rgba(255,255,255,0.6)",
    },
    "Builder": {
        "bg": "linear-gradient(135deg, #ffedd5 0%, #f97316 100%)",
        "accent": "#c2410c",
        "accent2": "#fb923c",
        "text": "#431407",
        "subtext": "#7c2d12",
        "card": "#fff7ed",
        "shine": "rgba(255,255,255,0.6)",
    },
    "Esport": {
        "bg": "linear-gradient(135deg, #1a0505 0%, #dc2626 100%)",
        "accent": "#facc15",
        "accent2": "#ef4444",
        "text": "#fef2f2",
        "subtext": "#fecaca",
        "card": "#450a0a",
        "shine": "rgba(255,255,255,0.2)",
    },
}


RARITY_GLYPHS = {
    "Common": "★",
    "Rare": "★★",
    "Epic": "★★★",
    "Legendary": "★★★★",
}


def _stat_bar(label: str, value: int, theme: dict) -> str:
    return f"""
    <div class="hstat" style="margin: 6px 0;">
      <div style="display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:{theme['text']};">
        <span>{label}</span><span>{value}</span>
      </div>
      <div style="background:{theme['shine']};border-radius:999px;height:8px;overflow:hidden;margin-top:3px;">
        <div style="width:{value}%;background:{theme['accent']};height:100%;border-radius:999px;transition:width 0.8s ease;"></div>
      </div>
    </div>
    """


def render_card_html(card: CardData, style: str = "Starter", share_url: str = "") -> str:
    theme = STYLE_THEMES.get(style, STYLE_THEMES["Starter"])
    rarity_glyph = RARITY_GLYPHS.get(card.rarity, "★")
    attacks = " · ".join(card.attacks) if card.attacks else "Learning"

    stats_html = "".join(
        [
            _stat_bar("MODEL", card.stats.model, theme),
            _stat_bar("DATA", card.stats.data, theme),
            _stat_bar("SPACE", card.stats.space, theme),
            _stat_bar("IMPACT", card.stats.impact, theme),
            _stat_bar("COMMUNITY", card.stats.community, theme),
            _stat_bar("DOCS", card.stats.docs, theme),
        ]
    )

    share_hint = f"""
    <div style="margin-top:14px;font-size:11px;color:{theme['subtext']};text-align:center;">
      Share: <code style="background:{theme['shine']};padding:2px 6px;border-radius:4px;">{share_url or f'/api/card/{card.username}.png'}</code>
    </div>
    """

    return f"""
    <div class="hcard" style="
      width:380px;
      border-radius:20px;
      padding:22px;
      background:{theme['bg']};
      color:{theme['text']};
      font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);
      border:1px solid {theme['shine']};
      position:relative;
      overflow:hidden;
    ">
      <div style="position:absolute;top:0;left:0;right:0;height:6px;background:{theme['accent']};"></div>
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
        <div>
          <div style="font-size:11px;letter-spacing:1.5px;font-weight:800;color:{theme['accent']};text-transform:uppercase;">AI Trainer Card</div>
          <h2 style="margin:4px 0 0;font-size:28px;letter-spacing:-0.5px;">{card.display_name}</h2>
        </div>
        <div style="text-align:right;">
          <div style="font-size:22px;color:{theme['accent']};">{rarity_glyph}</div>
          <div style="font-size:11px;font-weight:700;color:{theme['subtext']};">{card.rarity}</div>
        </div>
      </div>

      <div style="display:flex;gap:12px;margin-bottom:14px;">
        <div style="flex:1;background:{theme['card']};border-radius:14px;padding:12px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
          <div style="font-size:10px;font-weight:700;color:{theme['accent']};text-transform:uppercase;">Type</div>
          <div style="font-size:16px;font-weight:800;">{card.type}</div>
        </div>
        <div style="flex:1;background:{theme['card']};border-radius:14px;padding:12px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
          <div style="font-size:10px;font-weight:700;color:{theme['accent']};text-transform:uppercase;">Level</div>
          <div style="font-size:22px;font-weight:900;color:{theme['accent']};">{card.level}</div>
        </div>
      </div>

      <div style="background:{theme['card']};border-radius:16px;padding:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
        {stats_html}
      </div>

      <div style="margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div style="background:{theme['card']};border-radius:12px;padding:10px;">
          <div style="font-size:9px;font-weight:700;color:{theme['accent']};text-transform:uppercase;">Attacks</div>
          <div style="font-size:12px;font-weight:700;">{attacks}</div>
        </div>
        <div style="background:{theme['card']};border-radius:12px;padding:10px;">
          <div style="font-size:9px;font-weight:700;color:{theme['accent']};text-transform:uppercase;">Passive</div>
          <div style="font-size:12px;font-weight:700;">{card.passive}</div>
        </div>
      </div>

      <div style="margin-top:12px;background:{theme['card']};border-radius:12px;padding:10px;text-align:center;">
        <div style="font-size:9px;font-weight:700;color:{theme['accent']};text-transform:uppercase;">Evolution</div>
        <div style="font-size:12px;font-weight:700;">{card.evolution}</div>
      </div>

      <div style="margin-top:14px;display:flex;justify-content:space-between;font-size:10px;color:{theme['subtext']};">
        <span>🤗 {card.total_models} models · {card.total_datasets} datasets · {card.total_spaces} spaces</span>
        <span>❤️ {card.total_likes} · ⬇️ {card.total_downloads}</span>
      </div>

      {share_hint}
    </div>
    """