import urllib.parse
import gradio as gr

# ---------------------------
# Badge URL generation
# ---------------------------
def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
    base = "https://img.shields.io/static/v1"
    params = []
    if label:
        params.append(f"label={urllib.parse.quote(label, safe='')}")
    if message:
        params.append(f"message={urllib.parse.quote(message, safe='')}")
    if color:
        params.append(f"color={urllib.parse.quote(color, safe='')}")
    if label_color:
        params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
    if logo:
        params.append(f"logo={urllib.parse.quote(logo, safe='')}")
    if logo_color:
        params.append(f"logoColor={urllib.parse.quote(logo_color, safe='')}")
    if style:
        params.append(f"style={urllib.parse.quote(style, safe='')}")

    badge_url = base + ("?" + "&".join(params) if params else "")
    if link:
        html_code = f'<a href="{link}" target="_blank"><img src="{badge_url}" alt="badge"></a>'
    else:
        html_code = f'<img src="{badge_url}" alt="badge">'

    badge_preview = f"""
    <div style='padding:20px; background: #fefefe; border-radius: 12px; display: flex; justify-content: center;'>
        {html_code}
    </div>
    """
    return html_code, badge_preview

# ---------------------------
# Gradio UI
# ---------------------------
with gr.Blocks(theme=gr.themes.Default()) as demo:
    # Custom pastel CSS
    gr.HTML("""
    <style>
      body { background: #f7f9fc; }
      .gradio-container { background: #ffffff; border-radius: 16px; padding: 20px; }
      .gr-button { background: #a8dadc !important; color: #1d3557 !important; }
      .gr-textbox, .gr-select, .gr-color { background: #e8f6f3 !important; }
      h1 { color: #457b9d; }
      h3 { color: #6d6875; }
    </style>
    """)

    gr.HTML("""
    <h1 style=\"text-align:center; margin-bottom:0.2em;\">🎨 BadgeCraft</h1>
    <p style=\"text-align:center; color:#555;\">Create colorful shields.io badges with live preview and HTML snippet.</p>
    <p style=\"text-align:center; color:#555;\">MIT License & Created Team: https://discord.gg/openfreeai</p>    
    """)

    # Output components
    with gr.Row():
        out_code = gr.Code(label="HTML Snippet", language="html")
        out_preview = gr.HTML(label="Badge Preview")

    # Input components with Discord defaults
    with gr.Row():
        label = gr.Textbox(label="Label", placeholder="e.g. build", value="Discord")
        message = gr.Textbox(label="Message", placeholder="e.g. passing", value="Join our community")
        logo = gr.Textbox(label="Logo", placeholder="e.g. github", value="discord")
    with gr.Row():
        color = gr.ColorPicker(label="Color", value="#5865F2")  # Discord neon blue
        label_color = gr.ColorPicker(label="Label Color", value="#99AAFF")
        logo_color = gr.ColorPicker(label="Logo Color", value="white")
    style = gr.Dropdown(label="Style", choices=["flat","flat-square","plastic","for-the-badge","social"], value="for-the-badge")
    link = gr.Textbox(label="Link (URL)", placeholder="https://example.com", value="https://discord.gg/openfreeai")

    # Example presets (click to autofill) with neon/vibrant colors
    examples = [
        ["Discord",  "Join our community", "#5865F2", "#99AAFF", "discord",   "white", "for-the-badge", "https://discord.gg/openfreeai"],
        ["X.com",    "Follow us",            "#1DA1F2", "#00CFFF", "X",         "white", "for-the-badge", "https://x.com/openfree_ai"],
        ["Collections","Explore",            "#FFB300", "#FFF176", "huggingface","black","for-the-badge","https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
        ["GitHub",   "Star us",               "#0A0A0A", "#39FF14", "github",      "white", "for-the-badge", "https://github.com/openfreeai"],
        ["YouTube",  "Watch now",             "#E50000", "#FF5E5E", "youtube",     "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
        ["Facebook","Like us",               "#1877F2", "#6FAFFF", "facebook",    "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
        ["Instagram","Follow",               "#E4405F", "#FF77A9", "instagram",   "white", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
        ["Threads",  "Join the convo",        "#000000", "#FF00FF", "threads",     "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
    ]
    gr.HTML("<h3 style='text-align:center; margin-top:20px;'>✨ Examples (click to autofill)</h3>")
    gr.Examples(
        examples=examples,
        inputs=[label, message, color, label_color, logo, logo_color, style, link],
        outputs=[out_code, out_preview],
        fn=generate_static_badge,
        cache_examples=False,
        run_on_click=True
    )

    # On-load default preview
    demo.load(
        fn=generate_static_badge,
        inputs=[label, message, color, label_color, logo, logo_color, style, link],
        outputs=[out_code, out_preview]
    )

    # Live update on change
    for inp in [label, message, color, label_color, logo, logo_color, style, link]:
        inp.change(fn=generate_static_badge, inputs=[label, message, color, label_color, logo, logo_color, style, link], outputs=[out_code, out_preview])

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