use web_sys::HtmlInputElement;
use web_sys::HtmlSelectElement;
use yew::prelude::*;

use crate::api;
use crate::types::*;

#[function_component(PlaylistsPage)]
pub fn playlists_page() -> Html {
    // Tab state: "saved" | "generate" | "edit"
    let active_tab = use_state(|| "saved".to_string());
    let editing_playlist = use_state(|| None::<PlaylistDetail>);

    // All local artists (for seed picker)
    let all_artists = use_state(Vec::<ArtistListItem>::new);
    {
        let all_artists = all_artists.clone();
        use_effect_with((), move |_| {
            wasm_bindgen_futures::spawn_local(async move {
                if let Ok(artists) = api::list_artists(0, 0).await {
                    all_artists.set(artists);
                }
            });
        });
    }

    // All tracks (for add-track search in edit tab)
    let all_tracks = use_state(Vec::<Track>::new);
    {
        let all_tracks = all_tracks.clone();
        use_effect_with((), move |_| {
            wasm_bindgen_futures::spawn_local(async move {
                if let Ok(tracks) = api::search_tracks("").await {
                    all_tracks.set(tracks);
                }
            });
        });
    }

    // Generate form state
    let seed_input = use_state(String::new);
    let seed_focused = use_state(|| false);
    let seeds = use_state(Vec::<String>::new);
    let count = use_state(|| 30usize);
    let popularity_bias = use_state(|| 5u8);
    let ordering = use_state(|| "interleave".to_string());
    let discovery_range = use_state(|| 5u8);
    let global_popularity = use_state(|| 0u8);
    let country_filter = use_state(|| false);
    let seed_weight = use_state(|| 5u8);
    let max_tracks_per_artist = use_state(|| 0u8); // 0 = auto
    let max_artists = use_state(|| 0u8); // 0 = unlimited

    // Results
    let generated = use_state(|| None::<GeneratedPlaylist>);
    let saved_playlists = use_state(|| None::<Vec<PlaylistSummary>>);
    let error = use_state(|| None::<String>);
    let message = use_state(|| None::<String>);
    let loading = use_state(|| false);
    let save_name = use_state(String::new);

    // Edit tab state
    let edit_name = use_state(String::new);
    let track_search_input = use_state(String::new);
    let track_search_focused = use_state(|| false);
    let dragging_index = use_state(|| None::<usize>);

    // Load saved playlists on mount
    let refresh_playlists = {
        let saved_playlists = saved_playlists.clone();
        Callback::from(move |_: ()| {
            let saved_playlists = saved_playlists.clone();
            wasm_bindgen_futures::spawn_local(async move {
                if let Ok(list) = api::list_playlists().await {
                    saved_playlists.set(Some(list));
                }
            });
        })
    };

    {
        let refresh = refresh_playlists.clone();
        use_effect_with((), move |_| {
            refresh.emit(());
        });
    }

    // Generate handler
    let on_generate = {
        let seeds = seeds.clone();
        let count = count.clone();
        let popularity_bias = popularity_bias.clone();
        let ordering = ordering.clone();
        let discovery_range = discovery_range.clone();
        let global_popularity = global_popularity.clone();
        let country_filter = country_filter.clone();
        let seed_weight = seed_weight.clone();
        let max_tracks_per_artist = max_tracks_per_artist.clone();
        let max_artists = max_artists.clone();
        let generated = generated.clone();
        let error = error.clone();
        let loading = loading.clone();
        let message = message.clone();
        Callback::from(move |_: MouseEvent| {
            let seeds = (*seeds).clone();
            let count = *count;
            let popularity_bias = *popularity_bias;
            let ordering_val = (*ordering).clone();
            let discovery_range_val = *discovery_range;
            let global_popularity_val = *global_popularity;
            let country_filter_val = *country_filter;
            let seed_weight_val = *seed_weight;
            let max_tpa_val = *max_tracks_per_artist;
            let max_artists_val = *max_artists;
            let generated = generated.clone();
            let error = error.clone();
            let loading = loading.clone();
            let message = message.clone();
            loading.set(true);
            error.set(None);
            message.set(None);
            wasm_bindgen_futures::spawn_local(async move {
                let req = GenerateRequest {
                    strategy: "similar".to_string(),
                    seed_artists: seeds,
                    genres: vec![],
                    count,
                    popularity_bias,
                    ordering: ordering_val,
                    rules: None,
                    discovery_range: Some(discovery_range_val),
                    global_popularity: if global_popularity_val > 0 {
                        Some(global_popularity_val)
                    } else {
                        None
                    },
                    country_filter: if country_filter_val { Some(true) } else { None },
                    seed_weight: Some(seed_weight_val),
                    max_tracks_per_artist: if max_tpa_val > 0 {
                        Some(max_tpa_val)
                    } else {
                        None
                    },
                    max_artists: if max_artists_val > 0 {
                        Some(max_artists_val)
                    } else {
                        None
                    },
                };

                match api::generate_playlist(&req).await {
                    Ok(result) => {
                        let n = result.tracks.len();
                        message.set(Some(format!("Generated {n} tracks")));
                        generated.set(Some(result));
                    }
                    Err(e) => error.set(Some(e.0)),
                }
                loading.set(false);
            });
        })
    };

    // Save handler
    let on_save = {
        let generated = generated.clone();
        let save_name = save_name.clone();
        let error = error.clone();
        let message = message.clone();
        let refresh = refresh_playlists.clone();
        let active_tab = active_tab.clone();
        Callback::from(move |_: MouseEvent| {
            let generated = generated.clone();
            let name = (*save_name).clone();
            let error = error.clone();
            let message = message.clone();
            let refresh = refresh.clone();
            let active_tab = active_tab.clone();
            if name.is_empty() {
                error.set(Some("Enter a playlist name".to_string()));
                return;
            }
            wasm_bindgen_futures::spawn_local(async move {
                if let Some(ref gen) = *generated {
                    let track_ids: Vec<i32> = gen.tracks.iter().map(|t| t.track_id).collect();
                    match api::save_playlist(&name, None, &track_ids).await {
                        Ok(_) => {
                            message.set(Some(format!("Saved playlist: {name}")));
                            refresh.emit(());
                            active_tab.set("saved".to_string());
                        }
                        Err(e) => error.set(Some(e.0)),
                    }
                }
            });
        })
    };

    // --- Tab bar ---
    let tab_bar = {
        let active = (*active_tab).clone();
        let tab = active_tab.clone();
        let editing = editing_playlist.clone();
        html! {
            <div class="tab-bar">
                <button
                    class={classes!("tab-btn", (active == "saved").then_some("active"))}
                    onclick={{
                        let tab = tab.clone();
                        Callback::from(move |_: MouseEvent| tab.set("saved".to_string()))
                    }}
                >{ "Saved Playlists" }</button>
                <button
                    class={classes!("tab-btn", (active == "generate").then_some("active"))}
                    onclick={{
                        let tab = tab.clone();
                        Callback::from(move |_: MouseEvent| tab.set("generate".to_string()))
                    }}
                >{ "Generate" }</button>
                if let Some(ref detail) = *editing {
                    <button
                        class={classes!("tab-btn", (active == "edit").then_some("active"))}
                        onclick={{
                            let tab = tab.clone();
                            Callback::from(move |_: MouseEvent| tab.set("edit".to_string()))
                        }}
                    >{ format!("Edit: {}", detail.playlist.name) }</button>
                }
            </div>
        }
    };

    // --- Tab 1: Saved Playlists ---
    let saved_tab = {
        let active_tab = active_tab.clone();
        let editing_playlist = editing_playlist.clone();
        let edit_name = edit_name.clone();
        let saved_playlists = saved_playlists.clone();
        let refresh_playlists = refresh_playlists.clone();

        let saved_list = if let Some(ref playlists) = *saved_playlists {
            if playlists.is_empty() {
                html! { <p class="text-muted">{ "No saved playlists." }</p> }
            } else {
                html! {
                    <table>
                        <thead>
                            <tr>
                                <th>{ "Name" }</th>
                                <th>{ "Tracks" }</th>
                                <th>{ "Created" }</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            { for playlists.iter().map(|p| {
                                let id = p.id;
                                let refresh = refresh_playlists.clone();
                                let editing = editing_playlist.clone();
                                let tab = active_tab.clone();
                                let en = edit_name.clone();
                                html! {
                                    <tr>
                                        <td>{ &p.name }</td>
                                        <td>{ p.track_count }</td>
                                        <td class="text-sm text-muted">{ &p.created_at }</td>
                                        <td>
                                            <div class="actions">
                                                <button class="btn btn-sm btn-secondary" onclick={{
                                                    let editing = editing.clone();
                                                    let tab = tab.clone();
                                                    let en = en.clone();
                                                    Callback::from(move |_: MouseEvent| {
                                                        let editing = editing.clone();
                                                        let tab = tab.clone();
                                                        let en = en.clone();
                                                        wasm_bindgen_futures::spawn_local(async move {
                                                            if let Ok(detail) = api::get_playlist(id).await {
                                                                en.set(detail.playlist.name.clone());
                                                                editing.set(Some(detail));
                                                                tab.set("edit".to_string());
                                                            }
                                                        });
                                                    })
                                                }}>{ "Edit" }</button>
                                                <a href={api::export_m3u_url(id)}
                                                   class="btn btn-sm btn-secondary"
                                                   download="true">{ "M3U" }</a>
                                                <button class="btn btn-sm btn-danger" onclick={{
                                                    let refresh = refresh.clone();
                                                    let editing = editing.clone();
                                                    Callback::from(move |_: MouseEvent| {
                                                        let refresh = refresh.clone();
                                                        let editing = editing.clone();
                                                        wasm_bindgen_futures::spawn_local(async move {
                                                            let _ = api::delete_playlist(id).await;
                                                            // If we're editing this playlist, clear it
                                                            if let Some(ref d) = *editing {
                                                                if d.playlist.id == id {
                                                                    editing.set(None);
                                                                }
                                                            }
                                                            refresh.emit(());
                                                        });
                                                    })
                                                }}>{ "Delete" }</button>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            })}
                        </tbody>
                    </table>
                }
            }
        } else {
            html! { <p class="loading">{ "Loading..." }</p> }
        };

        html! {
            <div>
                <div style="margin-bottom: 1rem;">
                    <button class="btn btn-primary" onclick={{
                        let tab = active_tab.clone();
                        Callback::from(move |_: MouseEvent| tab.set("generate".to_string()))
                    }}>{ "Generate" }</button>
                    <button class="btn btn-secondary" onclick={{
                        let editing = editing_playlist.clone();
                        let edit_name = edit_name.clone();
                        let tab = active_tab.clone();
                        let error = error.clone();
                        let refresh = refresh_playlists.clone();
                        Callback::from(move |_: MouseEvent| {
                            let editing = editing.clone();
                            let edit_name = edit_name.clone();
                            let tab = tab.clone();
                            let error = error.clone();
                            let refresh = refresh.clone();
                            wasm_bindgen_futures::spawn_local(async move {
                                match api::save_playlist("New Playlist", None, &[]).await {
                                    Ok(resp) => {
                                        // Extract the new playlist id and open it for editing
                                        if let Some(id) = resp.get("id").and_then(|v| v.as_i64()) {
                                            let id = id as i32;
                                            edit_name.set("New Playlist".to_string());
                                            if let Ok(detail) = api::get_playlist(id).await {
                                                editing.set(Some(detail));
                                                tab.set("edit".to_string());
                                            }
                                            refresh.emit(());
                                        }
                                    }
                                    Err(e) => error.set(Some(e.0)),
                                }
                            });
                        })
                    }}>{ "New" }</button>
                </div>
                { saved_list }
            </div>
        }
    };

    // --- Tab 2: Generate ---
    let generate_tab = {
        let strategy_inputs = {
            let seed_input_c = seed_input.clone();
            let seeds_c = seeds.clone();
            let query = (*seed_input_c).to_lowercase();
            let filtered: Vec<_> = (*all_artists)
                .iter()
                .filter(|a| {
                    if query.is_empty() {
                        return true;
                    }
                    let name_lower = a.name.to_lowercase();
                    let mut chars = query.chars();
                    let mut current = chars.next();
                    for c in name_lower.chars() {
                        if current == Some(c) {
                            current = chars.next();
                        }
                    }
                    current.is_none()
                })
                .filter(|a| !seeds_c.contains(&a.name))
                .take(50)
                .cloned()
                .collect();
            html! {
                <div class="form-group">
                    <label>{ "Seed Artists" }</label>
                    <div style="position:relative;">
                        <input
                            type="text"
                            placeholder="Search your library..."
                            value={(*seed_input_c).clone()}
                            oninput={{
                                let si = seed_input.clone();
                                Callback::from(move |e: InputEvent| {
                                    let input: HtmlInputElement = e.target_unchecked_into();
                                    si.set(input.value());
                                })
                            }}
                            onfocus={{
                                let f = seed_focused.clone();
                                Callback::from(move |_: FocusEvent| f.set(true))
                            }}
                            onblur={{
                                let f = seed_focused.clone();
                                Callback::from(move |_: FocusEvent| {
                                    let f = f.clone();
                                    gloo_timers::callback::Timeout::new(200, move || f.set(false))
                                        .forget();
                                })
                            }}
                        />
                        if *seed_focused && !filtered.is_empty() {
                            <div class="autocomplete-dropdown">
                                { for filtered.iter().map(|a| {
                                    let name = a.name.clone();
                                    let seeds = seeds.clone();
                                    let si = seed_input.clone();
                                    let track_count = a.local_tracks;
                                    html! {
                                        <div class="autocomplete-item" onclick={Callback::from(move |_: MouseEvent| {
                                            let mut v = (*seeds).clone();
                                            v.push(name.clone());
                                            seeds.set(v);
                                            si.set(String::new());
                                        })}>
                                            <span>{ &a.name }</span>
                                            <span class="text-muted text-sm">{ format!("{} tracks", track_count) }</span>
                                        </div>
                                    }
                                })}
                            </div>
                        }
                    </div>
                    <div class="tag-list">
                        { for seeds_c.iter().enumerate().map(|(i, s)| {
                            let seeds = seeds_c.clone();
                            html! {
                                <span class="tag" onclick={Callback::from(move |_: MouseEvent| {
                                    let mut v = (*seeds).clone();
                                    v.remove(i);
                                    seeds.set(v);
                                })}>{s}{ " \u{00d7}" }</span>
                            }
                        })}
                    </div>
                    <label class="tooltip-wrap">
                        { format!("Popularity Bias: {}", *popularity_bias) }
                        <span class="tooltip-icon">{ "?" }</span>
                        <span class="tooltip-text">{ "Controls how much to prefer an artist's popular tracks over deep cuts. 0 = all tracks equally likely, 10 = heavily favor their most-played songs." }</span>
                    </label>
                    <input
                        type="range"
                        min="0" max="10"
                        value={popularity_bias.to_string()}
                        oninput={{
                            let pb = popularity_bias.clone();
                            Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                if let Ok(v) = input.value().parse() {
                                    pb.set(v);
                                }
                            })
                        }}
                    />
                    <label class="tooltip-wrap">
                        { format!("Discovery Range: {}", *discovery_range) }
                        <span class="text-sm text-muted">{ if *discovery_range <= 3 { " (focused)" } else if *discovery_range >= 7 { " (wide)" } else { "" } }</span>
                        <span class="tooltip-icon">{ "?" }</span>
                        <span class="tooltip-text">{ "How far from your seeds to explore. Low = only the most closely related artists. High = cast a wide net into loosely connected artists." }</span>
                    </label>
                    <input
                        type="range"
                        min="0" max="10"
                        value={discovery_range.to_string()}
                        oninput={{
                            let dr = discovery_range.clone();
                            Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                if let Ok(v) = input.value().parse() {
                                    dr.set(v);
                                }
                            })
                        }}
                    />
                    <label class="tooltip-wrap">
                        { format!("Seed Weight: {}", *seed_weight) }
                        <span class="text-sm text-muted">{ if *seed_weight == 0 { " (exclude seeds)" } else if *seed_weight >= 8 { " (heavy)" } else { "" } }</span>
                        <span class="tooltip-icon">{ "?" }</span>
                        <span class="tooltip-text">{ "How much your seed artists themselves should appear in the playlist. 0 = only discoveries (seeds excluded), 5 = normal, 10 = seeds appear heavily." }</span>
                    </label>
                    <input
                        type="range"
                        min="0" max="10"
                        value={seed_weight.to_string()}
                        oninput={{
                            let sw = seed_weight.clone();
                            Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                if let Ok(v) = input.value().parse() {
                                    sw.set(v);
                                }
                            })
                        }}
                    />
                    <label class="tooltip-wrap">
                        { format!("Global Popularity: {}", *global_popularity) }
                        <span class="text-sm text-muted">{ if *global_popularity == 0 { " (off)" } else { "" } }</span>
                        <span class="tooltip-icon">{ "?" }</span>
                        <span class="tooltip-text">{ "Boost tracks that are globally popular across all artists. Unlike Popularity Bias (which is per-artist), this favors well-known songs regardless of which artist they belong to." }</span>
                    </label>
                    <input
                        type="range"
                        min="0" max="10"
                        value={global_popularity.to_string()}
                        oninput={{
                            let gp = global_popularity.clone();
                            Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                if let Ok(v) = input.value().parse() {
                                    gp.set(v);
                                }
                            })
                        }}
                    />
                    <div class="playlist-controls-row">
                        <div class="form-group">
                            <label class="tooltip-wrap" style="white-space: nowrap;">
                                <input type="checkbox"
                                    checked={*country_filter}
                                    onchange={{
                                        let cf = country_filter.clone();
                                        Callback::from(move |e: Event| {
                                            let input: HtmlInputElement = e.target_unchecked_into();
                                            cf.set(input.checked());
                                        })
                                    }}
                                />
                                { " Same countries" }
                                <span class="tooltip-icon">{ "?" }</span>
                                <span class="tooltip-text">{ "Only include artists from the same countries as your seed artists. Useful for getting music in a particular language. Requires a local MusicBrainz database for best results." }</span>
                            </label>
                        </div>
                        <div class="form-group">
                            <label class="tooltip-wrap">
                                { "Max Per Artist" }
                                <span class="tooltip-icon">{ "?" }</span>
                                <span class="tooltip-text">{ "Maximum number of tracks from any single artist. 'Auto' ties this to the Popularity Bias setting." }</span>
                            </label>
                            <select onchange={{
                                let mtpa = max_tracks_per_artist.clone();
                                Callback::from(move |e: Event| {
                                    let select: HtmlSelectElement = e.target_unchecked_into();
                                    if let Ok(v) = select.value().parse() {
                                        mtpa.set(v);
                                    }
                                })
                            }}>
                                <option value="0" selected={*max_tracks_per_artist == 0}>{ "Auto" }</option>
                                { for [1u8, 2, 3, 5, 10, 15, 20, 25, 30, 50].iter().map(|n| html! {
                                    <option value={n.to_string()} selected={*max_tracks_per_artist == *n}>
                                        { n.to_string() }
                                    </option>
                                })}
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="tooltip-wrap">
                                { "Max Artists" }
                                <span class="tooltip-icon">{ "?" }</span>
                                <span class="tooltip-text">{ "Limit how many different artists appear in the playlist. Lower values give a tighter, more focused mix." }</span>
                            </label>
                            <select onchange={{
                                let ma = max_artists.clone();
                                Callback::from(move |e: Event| {
                                    let select: HtmlSelectElement = e.target_unchecked_into();
                                    if let Ok(v) = select.value().parse() {
                                        ma.set(v);
                                    }
                                })
                            }}>
                                <option value="0" selected={*max_artists == 0}>{ "Unlimited" }</option>
                                { for [5u8, 10, 15, 20, 25, 30, 50, 75, 100].iter().map(|n| html! {
                                    <option value={n.to_string()} selected={*max_artists == *n}>
                                        { n.to_string() }
                                    </option>
                                })}
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="tooltip-wrap">
                                { "Track Order" }
                                <span class="tooltip-icon">{ "?" }</span>
                                <span class="tooltip-text">{ "How to arrange tracks in the final playlist. Interleave spreads artists evenly, By Score puts the best matches first, Random shuffles everything." }</span>
                            </label>
                            <select onchange={{
                                let ord = ordering.clone();
                                Callback::from(move |e: Event| {
                                    let select: HtmlSelectElement = e.target_unchecked_into();
                                    ord.set(select.value());
                                })
                            }}>
                                <option value="interleave" selected={*ordering == "interleave"}>{ "Interleave" }</option>
                                <option value="score" selected={*ordering == "score"}>{ "By Score" }</option>
                                <option value="random" selected={*ordering == "random"}>{ "Random" }</option>
                            </select>
                        </div>
                    </div>
                </div>
            }
        };

        let track_list = if let Some(ref gen) = *generated {
            html! {
                <div class="card" style="margin-top: 1rem;">
                    <h3>{ format!("Generated Tracks ({})", gen.tracks.len()) }</h3>
                    <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
                        <input
                            type="text"
                            placeholder="Playlist name..."
                            value={(*save_name).clone()}
                            oninput={{
                                let sn = save_name.clone();
                                Callback::from(move |e: InputEvent| {
                                    let input: HtmlInputElement = e.target_unchecked_into();
                                    sn.set(input.value());
                                })
                            }}
                        />
                        <button class="btn btn-primary" onclick={on_save.clone()}>{ "Save Playlist" }</button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>{ "#" }</th>
                                <th>{ "Title" }</th>
                                <th>{ "Artist" }</th>
                                <th>{ "Album" }</th>
                                <th>{ "Score" }</th>
                            </tr>
                        </thead>
                        <tbody>
                            { for gen.tracks.iter().enumerate().map(|(i, t)| html! {
                                <tr>
                                    <td>{ i + 1 }</td>
                                    <td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
                                    <td>{ t.artist.as_deref().unwrap_or("Unknown") }</td>
                                    <td class="text-muted">{ t.album.as_deref().unwrap_or("") }</td>
                                    <td class="text-sm text-muted">{ format!("{:.3}", t.score) }</td>
                                </tr>
                            })}
                        </tbody>
                    </table>
                </div>
            }
        } else {
            html! {}
        };

        html! {
            <div>
                <div class="card">
                    <h3>{ "Generate Playlist" }</h3>
                    <p class="text-muted text-sm">{ "Build a playlist from similar artists in your library using Last.fm data." }</p>

                    { strategy_inputs }

                    <div class="form-group">
                        <label class="tooltip-wrap">
                            { format!("Count: {}", *count) }
                            <span class="tooltip-icon">{ "?" }</span>
                            <span class="tooltip-text">{ "Total number of tracks to include in the generated playlist." }</span>
                        </label>
                        <input type="range" min="10" max="100" step="5"
                            value={count.to_string()}
                            oninput={{
                                let count = count.clone();
                                Callback::from(move |e: InputEvent| {
                                    let input: HtmlInputElement = e.target_unchecked_into();
                                    if let Ok(v) = input.value().parse() {
                                        count.set(v);
                                    }
                                })
                            }}
                        />
                    </div>

                    <button
                        class="btn btn-primary"
                        onclick={on_generate}
                        disabled={*loading}
                    >
                        { if *loading { "Generating..." } else { "Generate" } }
                    </button>
                </div>

                { track_list }
            </div>
        }
    };

    // --- Tab 3: Edit ---
    let edit_tab = {
        let editing = editing_playlist.clone();
        let active_tab_c = active_tab.clone();
        let edit_name_c = edit_name.clone();
        let refresh = refresh_playlists.clone();
        let error_c = error.clone();
        let message_c = message.clone();
        let track_search_input_c = track_search_input.clone();
        let track_search_focused_c = track_search_focused.clone();
        let all_tracks_c = all_tracks.clone();
        let dragging_index_c = dragging_index.clone();

        if let Some(ref detail) = *editing {
            let playlist_id = detail.playlist.id;
            let tracks = detail.tracks.clone();

            // Filter tracks for add-track search
            let search_query = (*track_search_input_c).to_lowercase();
            let existing_ids: Vec<i32> = tracks.iter().map(|t| t.id).collect();
            let filtered_tracks: Vec<_> = if search_query.is_empty() {
                vec![]
            } else {
                (*all_tracks_c)
                    .iter()
                    .filter(|t| {
                        if existing_ids.contains(&t.id) {
                            return false;
                        }
                        let title_lower = t.title.as_deref().unwrap_or("").to_lowercase();
                        let artist_lower = t.artist.as_deref().unwrap_or("").to_lowercase();
                        // Subsequence match on title or artist
                        let matches_field = |field: &str| {
                            let mut chars = search_query.chars();
                            let mut current = chars.next();
                            for c in field.chars() {
                                if current == Some(c) {
                                    current = chars.next();
                                }
                            }
                            current.is_none()
                        };
                        matches_field(&title_lower) || matches_field(&artist_lower)
                    })
                    .take(15)
                    .cloned()
                    .collect()
            };

            html! {
                <div>
                    <button class="btn btn-secondary" style="margin-bottom: 1rem;" onclick={{
                        let tab = active_tab_c.clone();
                        let editing = editing.clone();
                        Callback::from(move |_: MouseEvent| {
                            editing.set(None);
                            tab.set("saved".to_string());
                        })
                    }}>{ "Back to Playlists" }</button>

                    <div class="card">
                        <div class="form-group">
                            <label>{ "Playlist Name" }</label>
                            <div style="display: flex; gap: 0.5rem;">
                                <input
                                    type="text"
                                    value={(*edit_name_c).clone()}
                                    oninput={{
                                        let en = edit_name_c.clone();
                                        Callback::from(move |e: InputEvent| {
                                            let input: HtmlInputElement = e.target_unchecked_into();
                                            en.set(input.value());
                                        })
                                    }}
                                />
                                <button class="btn btn-primary" onclick={{
                                    let en = edit_name_c.clone();
                                    let editing = editing.clone();
                                    let refresh = refresh.clone();
                                    let message = message_c.clone();
                                    let error = error_c.clone();
                                    let tab = active_tab_c.clone();
                                    Callback::from(move |_: MouseEvent| {
                                        let name = (*en).clone();
                                        let editing = editing.clone();
                                        let refresh = refresh.clone();
                                        let message = message.clone();
                                        let error = error.clone();
                                        let tab = tab.clone();
                                        if name.is_empty() {
                                            error.set(Some("Name cannot be empty".to_string()));
                                            return;
                                        }
                                        wasm_bindgen_futures::spawn_local(async move {
                                            match api::get_playlist(playlist_id).await {
                                                Ok(_) => {
                                                    let body = serde_json::json!({"name": name}).to_string();
                                                    let resp = gloo_net::http::Request::put(
                                                        &format!("/api/playlists/{playlist_id}"),
                                                    )
                                                    .header("Content-Type", "application/json")
                                                    .body(&body)
                                                    .unwrap()
                                                    .send()
                                                    .await;
                                                    match resp {
                                                        Ok(r) if r.ok() => {
                                                            message.set(Some("Playlist saved".to_string()));
                                                            refresh.emit(());
                                                            editing.set(None);
                                                            tab.set("saved".to_string());
                                                        }
                                                        Ok(r) => error.set(Some(format!("HTTP {}", r.status()))),
                                                        Err(e) => error.set(Some(e.to_string())),
                                                    }
                                                }
                                                Err(e) => error.set(Some(e.0)),
                                            }
                                        });
                                    })
                                }}>{ "Save" }</button>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <h3>{ format!("Tracks ({})", tracks.len()) }</h3>
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 2rem;"></th>
                                    <th style="width: 2rem;">{ "#" }</th>
                                    <th>{ "Title" }</th>
                                    <th>{ "Artist" }</th>
                                    <th>{ "Album" }</th>
                                    <th style="width: 3rem;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                { for tracks.iter().enumerate().map(|(i, t)| {
                                    let track_id = t.id;
                                    let editing = editing.clone();
                                    let dragging = dragging_index_c.clone();
                                    let idx = i;

                                    let ondragstart = {
                                        let dragging = dragging.clone();
                                        Callback::from(move |e: DragEvent| {
                                            dragging.set(Some(idx));
                                            if let Some(dt) = e.data_transfer() {
                                                let _ = dt.set_data("text/plain", &idx.to_string());
                                            }
                                        })
                                    };

                                    let ondragover = Callback::from(move |e: DragEvent| {
                                        e.prevent_default();
                                    });

                                    let ondrop = {
                                        let editing = editing.clone();
                                        let dragging = dragging.clone();
                                        Callback::from(move |e: DragEvent| {
                                            e.prevent_default();
                                            let target_idx = idx;
                                            if let Some(source_idx) = *dragging {
                                                if source_idx != target_idx {
                                                    let editing_inner = editing.clone();
                                                    let dragging_inner = dragging.clone();
                                                    // Reorder locally
                                                    if let Some(ref detail) = *editing {
                                                        let mut new_tracks = detail.tracks.clone();
                                                        let item = new_tracks.remove(source_idx);
                                                        new_tracks.insert(target_idx, item);
                                                        let track_ids: Vec<i32> = new_tracks.iter().map(|t| t.id).collect();
                                                        let new_detail = PlaylistDetail {
                                                            playlist: detail.playlist.clone(),
                                                            tracks: new_tracks,
                                                        };
                                                        editing_inner.set(Some(new_detail));
                                                        dragging_inner.set(None);
                                                        // Call reorder API
                                                        wasm_bindgen_futures::spawn_local(async move {
                                                            let _ = api::reorder_playlist_tracks(playlist_id, &track_ids).await;
                                                        });
                                                    }
                                                }
                                            }
                                            dragging.set(None);
                                        })
                                    };

                                    let on_remove = {
                                        let editing = editing.clone();
                                        Callback::from(move |_: MouseEvent| {
                                            let editing = editing.clone();
                                            wasm_bindgen_futures::spawn_local(async move {
                                                let _ = api::remove_track_from_playlist(playlist_id, track_id).await;
                                                // Refresh the playlist
                                                if let Ok(detail) = api::get_playlist(playlist_id).await {
                                                    editing.set(Some(detail));
                                                }
                                            });
                                        })
                                    };

                                    html! {
                                        <tr draggable="true"
                                            {ondragstart}
                                            {ondragover}
                                            {ondrop}
                                        >
                                            <td><span class="drag-handle">{ "\u{2261}" }</span></td>
                                            <td>{ i + 1 }</td>
                                            <td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
                                            <td>{ t.artist.as_deref().unwrap_or("Unknown") }</td>
                                            <td class="text-muted">{ t.album.as_deref().unwrap_or("") }</td>
                                            <td>
                                                <button class="btn btn-sm btn-danger" onclick={on_remove}>
                                                    { "\u{00d7}" }
                                                </button>
                                            </td>
                                        </tr>
                                    }
                                })}
                            </tbody>
                        </table>
                    </div>

                    // Add track section
                    <div class="card">
                        <h3>{ "Add Track" }</h3>
                        <div style="position:relative;">
                            <input
                                type="text"
                                placeholder="Search tracks in your library..."
                                value={(*track_search_input_c).clone()}
                                oninput={{
                                    let tsi = track_search_input_c.clone();
                                    Callback::from(move |e: InputEvent| {
                                        let input: HtmlInputElement = e.target_unchecked_into();
                                        tsi.set(input.value());
                                    })
                                }}
                                onfocus={{
                                    let f = track_search_focused_c.clone();
                                    Callback::from(move |_: FocusEvent| f.set(true))
                                }}
                                onblur={{
                                    let f = track_search_focused_c.clone();
                                    Callback::from(move |_: FocusEvent| {
                                        let f = f.clone();
                                        gloo_timers::callback::Timeout::new(200, move || f.set(false)).forget();
                                    })
                                }}
                            />
                            if *track_search_focused_c && !filtered_tracks.is_empty() {
                                <div class="autocomplete-dropdown">
                                    { for filtered_tracks.iter().map(|t| {
                                        let tid = t.id;
                                        let title = t.title.clone().unwrap_or_else(|| "Unknown".to_string());
                                        let artist = t.artist.clone().unwrap_or_else(|| "Unknown".to_string());
                                        let editing = editing.clone();
                                        let tsi = track_search_input_c.clone();
                                        html! {
                                            <div class="autocomplete-item" onclick={Callback::from(move |_: MouseEvent| {
                                                let editing = editing.clone();
                                                let tsi = tsi.clone();
                                                tsi.set(String::new());
                                                wasm_bindgen_futures::spawn_local(async move {
                                                    let _ = api::add_track_to_playlist(playlist_id, tid).await;
                                                    if let Ok(detail) = api::get_playlist(playlist_id).await {
                                                        editing.set(Some(detail));
                                                    }
                                                });
                                            })}>
                                                <span>{ format!("{} - {}", title, artist) }</span>
                                            </div>
                                        }
                                    })}
                                </div>
                            }
                        </div>
                    </div>
                </div>
            }
        } else {
            html! { <p class="text-muted">{ "No playlist selected for editing." }</p> }
        }
    };

    html! {
        <div>
            <div class="page-header">
                <h2>{ "Playlists" }</h2>
            </div>

            if let Some(ref msg) = *message {
                <div class="card" style="border-color: var(--success);">{ msg }</div>
            }
            if let Some(ref err) = *error {
                <div class="card error">{ err }</div>
            }

            { tab_bar }

            if *active_tab == "saved" {
                { saved_tab }
            }
            if *active_tab == "generate" {
                { generate_tab }
            }
            if *active_tab == "edit" {
                { edit_tab }
            }
        </div>
    }
}