import pandas as pd
from pyscript import document
from pyodide.ffi import create_proxy
from game_logic import Pokemon, Battle
import js

# Global State
df = None
selected_p1 = None
selected_p2 = None
current_battle = None

def load_data():
    global df
    try:
        df = pd.read_csv("pokemon.csv")
        render_grid(df.head(50))
        document.querySelector(".loading").style.display = "none"
    except Exception as e:
        print(f"Error loading data: {e}")

def create_card(row):
    name = row['name']
    pid = int(row['pokedex_number'])
    t1 = row['type1']
    t2 = row['type2']
    
    card = document.createElement("div")
    card.classList.add("card")
    card.id = f"card-{name}"
    
    img_url = f"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{pid}.png"
    
    types_html = f"<span class='type-{t1}'>{t1}</span>"
    if str(t2) != 'nan':
        types_html += f"<span class='type-{t2}'>{t2}</span>"
        
    card.innerHTML = f"""
        <button class="info-btn" id="info-{name}">i</button>
        <img src="{img_url}" loading="lazy" alt="{name}">
        <h3>{name}</h3>
        <div class="types">{types_html}</div>
    """
    
    card.onclick = lambda e: select_pokemon(name)
    
    def open_info(e):
        e.stopPropagation()
        show_stats(name)
        
    btn = card.querySelector(f"#info-{name}")
    btn.onclick = open_info
    
    return card

def show_stats(name):
    row = df[df['name'] == name].iloc[0]
    
    document.getElementById("modal-name").innerText = name.title()
    
    pid = int(row['pokedex_number'])
    document.getElementById("modal-img").src = f"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{pid}.png"
    
    t1 = row['type1']
    t2 = row['type2']
    types_html = f"<span class='type-{t1}'>{t1}</span>"
    if str(t2) != 'nan':
        types_html += f"<span class='type-{t2}'>{t2}</span>"
    document.getElementById("modal-types").innerHTML = types_html
    
    stats = {
        'hp': row['hp'], 'atk': row['attack'], 'def': row['defense'],
        'spa': row['sp_attack'], 'spd': row['sp_defense'], 'spe': row['speed']
    }
    
    for key, val in stats.items():
        document.getElementById(f"val-{key}").innerText = val
        pct = min(100, (int(val) / 255) * 100)
        document.getElementById(f"stat-{key}").style.width = f"{pct}%"
        
    document.getElementById("stats-modal").classList.remove("hidden")

def close_modal(event=None):
    document.getElementById("stats-modal").classList.add("hidden")

def render_grid(dataframe):
    grid = document.getElementById("pokemon-grid")
    grid.innerHTML = ""
    for _, row in dataframe.iterrows():
        card = create_card(row)
        grid.appendChild(card)

def select_pokemon(name):
    global selected_p1, selected_p2
    card = document.getElementById(f"card-{name}")
    
    if selected_p1 == name:
        selected_p1 = None
        card.classList.remove("selected-p1")
        document.getElementById("p1-name").innerText = "None"
    elif selected_p2 == name:
        selected_p2 = None
        card.classList.remove("selected-p2")
        document.getElementById("p2-name").innerText = "None"
    elif selected_p1 is None:
        selected_p1 = name
        card.classList.add("selected-p1")
        document.getElementById("p1-name").innerText = name.title()
    elif selected_p2 is None:
        selected_p2 = name
        card.classList.add("selected-p2")
        document.getElementById("p2-name").innerText = name.title()
    else:
        js.alert("Both slots full! Deselect one first.")
        
    check_start_btn()

def check_start_btn():
    btn = document.getElementById("start-btn")
    if selected_p1 and selected_p2:
        btn.disabled = False
    else:
        btn.disabled = True

def filter_pokemon(event=None):
    search_val = document.getElementById("search-input").value.lower()
    t1_val = document.getElementById("type1-filter").value
    t2_val = document.getElementById("type2-filter").value
    gen_val = document.getElementById("gen-filter").value
    legend_val = document.getElementById("legendary-filter").checked
    
    filtered = df.copy()
    
    if search_val: 
        filtered = filtered[filtered['name'].str.contains(search_val)]
        
    if t1_val != "all":
        filtered = filtered[filtered['type1'] == t1_val]
        
    if t2_val != "all":
        if t2_val == "none":
            filtered = filtered[filtered['type2'].isna()]
        else:
            filtered = filtered[filtered['type2'] == t2_val]
            
    if gen_val != "all":
        filtered = filtered[filtered['generation'] == int(gen_val)]
        
    if legend_val:
        filtered = filtered[filtered['is_legendary'] == True]
    
    render_grid(filtered.head(100))

def start_battle(event):
    global current_battle
    
    p1_row = df[df['name'] == selected_p1].iloc[0]
    p2_row = df[df['name'] == selected_p2].iloc[0]
    p1 = Pokemon(p1_row)
    p2 = Pokemon(p2_row)
    current_battle = Battle(p1, p2)
    
    document.getElementById("selection-screen").classList.remove("active")
    document.getElementById("selection-screen").classList.add("hidden")
    document.getElementById("battle-screen").classList.remove("hidden")
    document.getElementById("battle-screen").classList.add("active")
    
    document.getElementById("p1-img").src = p1.sprite_url
    document.getElementById("p2-img").src = p2.sprite_url
    document.getElementById("p1-battle-name").innerText = p1.name
    document.getElementById("p2-battle-name").innerText = p2.name
    
    # Setup Battle Info Buttons
    document.getElementById("info-p1").onclick = lambda e: show_stats(p1.name.lower())
    document.getElementById("info-p2").onclick = lambda e: show_stats(p2.name.lower())
    
    update_hp_ui()
    document.getElementById("battle-log").innerHTML = ""
    log("Battle Started!")

def update_hp_ui():
    if not current_battle: return
    p1 = current_battle.p1
    p2 = current_battle.p2
    p1_pct = (p1.current_hp / p1.max_hp) * 100
    p2_pct = (p2.current_hp / p2.max_hp) * 100
    
    bar1 = document.getElementById("p1-hp-bar")
    bar2 = document.getElementById("p2-hp-bar")
    bar1.style.width = f"{p1_pct}%"
    bar2.style.width = f"{p2_pct}%"
    
    for bar, pct in [(bar1, p1_pct), (bar2, p2_pct)]:
        if pct > 50: bar.style.backgroundColor = "#4caf50"
        elif pct > 20: bar.style.backgroundColor = "#ffeb3b"
        else: bar.style.backgroundColor = "#f44336"
        
    document.getElementById("p1-hp-text").innerText = f"{p1.current_hp}/{p1.max_hp}"
    document.getElementById("p2-hp-text").innerText = f"{p2.current_hp}/{p2.max_hp}"

def log(msg):
    log_div = document.getElementById("battle-log")
    p = document.createElement("p")
    p.innerText = msg
    log_div.appendChild(p)
    log_div.scrollTop = log_div.scrollHeight

def play_sound(sound_id):
    try:
        audio = document.getElementById(sound_id)
        audio.currentTime = 0
        audio.play()
    except:
        pass

def attack(event):
    if not current_battle: return
    
    play_sound("snd-attack")
    is_over = current_battle.execute_turn()
    
    for line in current_battle.log:
        log(line)
        if "super effective" in line:
            play_sound("snd-hit")
        
    update_hp_ui()
    
    if is_over:
        document.getElementById("attack-btn").classList.add("hidden")
        document.getElementById("reset-btn").classList.remove("hidden")
        log(f"Winner: {current_battle.winner.name}!")

def reset_game(event):
    global selected_p1, selected_p2, current_battle
    selected_p1 = None
    selected_p2 = None
    current_battle = None
    
    document.getElementById("p1-name").innerText = "None"
    document.getElementById("p2-name").innerText = "None"
    document.getElementById("start-btn").disabled = True
    
    for card in document.querySelectorAll(".card"):
        card.classList.remove("selected-p1")
        card.classList.remove("selected-p2")
    
    document.getElementById("battle-screen").classList.remove("active")
    document.getElementById("battle-screen").classList.add("hidden")
    document.getElementById("selection-screen").classList.remove("hidden")
    document.getElementById("selection-screen").classList.add("active")
    
    document.getElementById("attack-btn").classList.remove("hidden")
    document.getElementById("reset-btn").classList.add("hidden")
    document.getElementById("battle-log").innerHTML = ""

# Bind Events
document.getElementById("search-input").oninput = create_proxy(filter_pokemon)
document.getElementById("type1-filter").onchange = create_proxy(filter_pokemon)
document.getElementById("type2-filter").onchange = create_proxy(filter_pokemon)
document.getElementById("gen-filter").onchange = create_proxy(filter_pokemon)
document.getElementById("legendary-filter").onchange = create_proxy(filter_pokemon)
document.getElementById("start-btn").onclick = create_proxy(start_battle)
document.getElementById("attack-btn").onclick = create_proxy(attack)
document.getElementById("reset-btn").onclick = create_proxy(reset_game)
document.querySelector(".close-modal").onclick = create_proxy(close_modal)

# Init
load_data()