import urllib.parse
import gradio as gr

# ---------------------------
# 배지 URL 생성 함수 정의
# ---------------------------
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:
    # 기존 static 예제 아이콘들
    gr.HTML("""
    <h1 style="text-align: center; font-size: 2.2em; margin-bottom: 0.2em;">🎨 BadgeCraft - Beautiful Badge Generator</h1>
    <p style="text-align: center; font-size: 1.1em; color: #555;">Design stylish shields.io badges with live preview and HTML snippet generation.</p>
    <h3 style="text-align: center; margin-top: 30px;">✨ Examples</h3>
    <div align="center" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 30px; justify-items: center;">
      <a href="https://discord.gg/openfreeai">
        <img alt="Discord" src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" />
      </a>
      <a href="https://x.com/openfree_ai">
        <img alt="X" src="https://img.shields.io/badge/X.com-000000?style=for-the-badge&logo=X&logoColor=white" />
      </a>
      <a href="https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c">
        <img alt="Collections" src="https://img.shields.io/badge/Collections-F8F8F8?style=for-the-badge&logo=huggingface&logoColor=black" />
      </a>
      <a href="https://huggingface.co/VIDraft">
        <img alt="VIDraft" src="https://img.shields.io/badge/VIDraft-FCD022?style=for-the-badge&logo=huggingface&logoColor=black" />
      </a>
      <a href="https://github.com/openfreeai">
        <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
      </a>
      <a href="https://twitter.com/openfree_ai">
        <img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
      </a>
      <a href="https://www.linkedin.com/company/openfreeai">
        <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
      </a>
      <a href="https://www.youtube.com/@AITechTree">
        <img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" alt="YouTube">
      </a>
      <a href="https://huggingface.co/openfreeai">
        <img src="https://img.shields.io/badge/HuggingFace-FCC72E?style=for-the-badge&logo=huggingface&logoColor=black" alt="HuggingFace">
      </a>
      <a href="https://www.instagram.com/openfree_ai">
        <img src="https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white" alt="Instagram">
      </a>
      <a href="https://www.threads.net/@openfree_ai">
        <img src="https://img.shields.io/badge/Threads-000000?style=for-the-badge&logo=threads&logoColor=white" alt="Threads">
      </a>
      <a href="https://www.facebook.com/profile.php?id=61575353674679">
        <img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white" alt="Facebook">
      </a>
    </div>
    """)

    # 출력 컴포넌트
    with gr.Row():
        out_code = gr.Code(label="HTML Snippet", language="html")
        out_preview = gr.HTML(label="Badge Preview")

    # 입력 컴포넌트
    with gr.Row():
        label = gr.Textbox(label="Label", placeholder="예: build")
        message = gr.Textbox(label="Message", placeholder="예: passing")
        logo = gr.Textbox(label="Logo", placeholder="예: github")
    with gr.Row():
        color = gr.ColorPicker(label="Color", value="#a0c4ff")
        label_color = gr.ColorPicker(label="Label Color", value="#bdb2ff")
        logo_color = gr.ColorPicker(label="Logo Color", value="#ffc6ff")
    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://yourlink.com")

    # Examples 데이터 (8개 필드 순서대로)
    examples = [
        ["Discord",   "5865F2", "",    "", "discord",    "white", "for-the-badge", "https://discord.gg/openfreeai"],
        ["X.com",     "000000", "",    "", "X",          "white", "for-the-badge", "https://x.com/openfree_ai"],
        ["Collections","F8F8F8", "",    "", "huggingface","black", "for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
        ["VIDraft",   "FCD022", "",    "", "huggingface","black", "for-the-badge", "https://huggingface.co/VIDraft"],
        ["GitHub",    "181717", "",    "", "github",     "white", "for-the-badge", "https://github.com/openfreeai"],
        ["Twitter",   "1DA1F2", "",    "", "twitter",    "white", "for-the-badge", "https://twitter.com/openfree_ai"],
        ["YouTube",   "FF0000", "",    "", "youtube",    "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
        ["Instagram", "E4405F", "",    "", "instagram",  "white", "for-the-badge", "https://www.instagram.com/openfree_ai"],
        ["Threads",   "000000", "",    "", "threads",    "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
        ["Facebook",  "1877F2", "",    "", "facebook",   "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
    ]

    gr.HTML("<h3 style='text-align: center; margin-top: 30px;'>✨ Click an example 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
    )

    # 실시간 change 이벤트 바인딩
    inputs = [label, message, color, label_color, logo, logo_color, style, link]
    for inp in inputs:
        inp.change(fn=generate_static_badge, inputs=inputs, outputs=[out_code, out_preview])

# 실행
if __name__ == "__main__":
    demo.launch()