import gradio as gr
import json
import os
from openai import OpenAI

def get_client():
    return OpenAI(
        base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
        api_key=os.environ.get("DASHSCOPE_API_KEY", ""),
    )

SYSTEM = 'Output ONLY valid JSON no markdown: {"name":"epic name","class":"funny class","level":<1-50>,"alignment":"e.g. Chaotic Tired","stats":{"STR":<1-20>,"DEX":<1-20>,"INT":<1-20>,"WIS":<1-20>,"CHA":<1-20>,"LUK":<1-20>},"quest":"one sentence epic quest"}'

COLORS = {"STR":"#e05050","DEX":"#50e080","INT":"#5080e0","WIS":"#a050e0","CHA":"#e050a0","LUK":"#f0c030"}

def roll(text):
    if not text.strip():
        return None
    try:
        r = get_client().chat.completions.create(
            model="qwen-turbo",
            messages=[{"role":"system","content":SYSTEM},{"role":"user","content":text}],
            temperature=0.85, max_tokens=300,
        )
        raw = r.choices[0].message.content.strip()
        if "```" in raw:
            raw = raw.split("```")[1]
            if raw.startswith("json"): raw = raw[4:]
        d = json.loads(raw)
    except Exception as e:
        d = {"name":"Error Knight","class":"Debug Wizard","level":1,"alignment":"True Broken",
             "stats":{k:10 for k in COLORS},"quest":str(e)[:80]}

    st = d.get("stats", {})
    return {
        "name": d.get("name","???"),
        "cls":  d.get("class",""),
        "level": d.get("level",1),
        "alignment": d.get("alignment",""),
        "quest": d.get("quest",""),
        "pairs": [{"c":COLORS[k],"l":k,"v":st.get(k,10)} for k in COLORS]
    }

CANVAS_HTML = """
<div class="wrap">
  <canvas id="dna-canvas" width="180" height="300"></canvas>
  <div id="char-card" class="card">
    <div style="color:#8b6914;font-style:italic;display:flex;align-items:center;justify-content:center;height:100%;min-height:200px">Roll your character to begin...</div>
  </div>
</div>
"""

INIT_JS = """
() => {
    window._dnaAnim = null;
    window.updateChar = function(data) {
        if (!data) return;
        const card = document.getElementById('char-card');
        if (card) {
            const bars = data.pairs.map(p =>
                '<div class="sr"><span class="sk">' + p.l + '</span>' +
                '<div class="sb"><div style="width:' + Math.round(p.v/20*100) + '%;height:100%;background:' + p.c + ';border-radius:2px"></div></div>' +
                '<span class="sv">' + p.v + '</span></div>'
            ).join('');
            card.innerHTML =
                '<div class="cn">' + data.name + '</div>' +
                '<div class="cc">' + data.cls + ' · Lv.' + data.level + ' · ' + data.alignment + '</div>' +
                '<div class="stats">' + bars + '</div>' +
                '<div class="quest">📜 ' + data.quest + '</div>';
        }
        if (window._dnaAnim) cancelAnimationFrame(window._dnaAnim);
        const cv = document.getElementById('dna-canvas');
        if (!cv) return;
        const ctx = cv.getContext('2d');
        let t = 0;
        function draw() {
            ctx.clearRect(0, 0, 180, 300);
            data.pairs.forEach(function(e, i) {
                const y = 30 + i * 42, a = t + i * 1.1;
                const x1 = 90 + Math.sin(a) * 50, x2 = 90 - Math.sin(a) * 50;
                ctx.strokeStyle = '#2a3a4a'; ctx.lineWidth = 1.5;
                ctx.beginPath(); ctx.moveTo(x1, y); ctx.lineTo(x2, y); ctx.stroke();
                [x1, x2].forEach(function(x) {
                    ctx.beginPath(); ctx.arc(x, y, 9, 0, Math.PI * 2);
                    ctx.fillStyle = e.c; ctx.shadowColor = e.c; ctx.shadowBlur = 14;
                    ctx.fill(); ctx.shadowBlur = 0;
                    ctx.fillStyle = '#fff'; ctx.font = 'bold 8px monospace';
                    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
                    ctx.fillText(e.l, x, y);
                });
            });
            t += 0.025;
            window._dnaAnim = requestAnimationFrame(draw);
        }
        draw();
    }
}
"""

CSS = """
body,.gradio-container{background:#08080d!important;color:#e8d5a3!important}
.gradio-container p,.gradio-container h1,.gradio-container label{color:#e8d5a3!important}
.wrap{display:flex;gap:20px;align-items:center;max-width:580px;margin:0 auto;padding:16px}
canvas{flex-shrink:0;filter:drop-shadow(0 0 8px rgba(100,150,255,.4))}
.card{flex:1;color:#e8d5a3;font-family:Georgia,serif}
.cn{font-size:20px;font-weight:bold;color:#ffd700;letter-spacing:1px;margin-bottom:3px}
.cc{font-size:12px;color:#8b6914;margin-bottom:10px}
.stats{margin-bottom:10px}
.sr{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.sk{width:28px;font-size:10px;color:#c0a060}
.sb{flex:1;height:6px;background:#1a1008;border-radius:2px;overflow:hidden}
.sv{width:18px;font-size:10px;color:#e8d5a3;text-align:right}
.quest{font-size:12px;font-style:italic;color:#c0a060;border-left:2px solid #8b6914;padding-left:8px}
"""

with gr.Blocks(css=CSS, title="Life Quest", js=INIT_JS) as demo:
    gr.HTML("<h1 style='color:#ffd700;text-align:center;margin-bottom:4px'>⚔️ LIFE QUEST</h1><p style='color:#c0a060;text-align:center;font-style:italic;margin-top:0'>Describe your life. Get your DNA-coded RPG character.</p>")
    gr.HTML(CANVAS_HTML)
    txt = gr.Textbox(label="Your life situation", placeholder="I'm a grad student surviving on ramen and false hope...", lines=3)
    btn = gr.Button("⚔ Roll Character", variant="primary")
    data_out = gr.JSON(visible=False)
    btn.click(roll, inputs=txt, outputs=data_out).then(
        fn=None,
        inputs=[data_out],
        js="(data) => { if (data && window.updateChar) window.updateChar(data); }"
    )

demo.launch()