use pulldown_cmark::{html as md_html, Options, Parser};
use serde::{Deserialize, Serialize};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::{HtmlInputElement, MouseEvent};
use yew::prelude::*;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"], catch)]
    async fn invoke(cmd: &str, args: JsValue) -> Result<JsValue, JsValue>;
}

#[derive(PartialEq, Clone, Copy)]
pub enum NewsMode {
    Ai,
    Rss,
}

#[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
#[serde(rename_all = "camelCase")]
pub struct NewsArticle {
    pub content: String,
    pub author: String,
    pub created_at: String,
}

#[derive(Serialize)]
struct StringArgs {
    key: String,
}
#[derive(Serialize)]
struct UrlsArgs {
    urls: Vec<String>,
}

#[function_component(News)]
pub fn news() -> Html {
    let articles = use_state(|| None::<Vec<NewsArticle>>);
    let error_msg = use_state(|| None::<String>);
    let show_config = use_state(|| false);
    let current_mode = use_state(|| NewsMode::Ai);
    let rss_urls = use_state(Vec::<String>::new);

    let api_key_ref = use_node_ref();
    let new_url_ref = use_node_ref();

    // Init: Konfiguration laden
    {
        let rss_urls = rss_urls.clone();
        use_effect_with((), move |_| {
            spawn_local(async move {
                if let Ok(res) = invoke("load_rss_config", JsValue::NULL).await {
                    if let Ok(urls) = serde_wasm_bindgen::from_value::<Vec<String>>(res) {
                        rss_urls.set(urls);
                    }
                }
            });
            || ()
        });
    }

    // News laden Funktion
    let load_news = {
        let articles = articles.clone();
        let error_msg = error_msg.clone();
        let mode = *current_mode;
        Callback::from(move |_| {
            let articles = articles.clone();
            let error_msg = error_msg.clone();
            articles.set(None);
            error_msg.set(None);
            spawn_local(async move {
                let cmd = if mode == NewsMode::Ai {
                    "fetch_ai_news"
                } else {
                    "fetch_rss_news"
                };
                match invoke(cmd, JsValue::NULL).await {
                    Ok(res) => {
                        let data = serde_wasm_bindgen::from_value::<Vec<NewsArticle>>(res)
                            .unwrap_or_default();
                        articles.set(Some(data));
                    }
                    Err(e) => error_msg.set(Some(e.as_string().unwrap_or_default())),
                }
            });
        })
    };

    // Automatisches Laden bei Modus-Wechsel
    {
        let load_news = load_news.clone();
        use_effect_with((*current_mode).clone(), move |_| {
            load_news.emit(MouseEvent::new("click").unwrap());
            || ()
        });
    }

    let save_settings = {
        let rss_urls = rss_urls.clone();
        let api_key_ref = api_key_ref.clone();
        let show_config = show_config.clone();
        let load_news = load_news.clone();
        Callback::from(move |_| {
            let key = api_key_ref
                .cast::<HtmlInputElement>()
                .map(|i| i.value())
                .unwrap_or_default();
            let urls = (*rss_urls).clone();
            let show_config = show_config.clone();
            let load_news = load_news.clone();
            spawn_local(async move {
                let _ = invoke(
                    "save_openrouter_key",
                    serde_wasm_bindgen::to_value(&StringArgs { key }).unwrap(),
                )
                .await;
                let _ = invoke(
                    "save_rss_urls",
                    serde_wasm_bindgen::to_value(&UrlsArgs { urls }).unwrap(),
                )
                .await;
                show_config.set(false);
                load_news.emit(MouseEvent::new("click").unwrap());
            });
        })
    };

    html! {
        <div class="feed-container">
            <div class="feed-header">
                <div class="header-main">
                    <h1>{ if *current_mode == NewsMode::Ai { "📰 KI News" } else { "📻 RSS Feeds" } }</h1>
                    <div class="mode-toggle">
                        <button
                            class={if *current_mode == NewsMode::Ai { "toggle-btn active" } else { "toggle-btn" }}
                            onclick={let m = current_mode.clone(); move |_| m.set(NewsMode::Ai)}>
                            {"KI"}
                        </button>
                        <button
                            class={if *current_mode == NewsMode::Rss { "toggle-btn active" } else { "toggle-btn" }}
                            onclick={let m = current_mode.clone(); move |_| m.set(NewsMode::Rss)}>
                            {"RSS"}
                        </button>
                    </div>
                </div>
                <div class="header-actions">
                    <button class="action-btn" onclick={let sc = show_config.clone(); move |_| sc.set(!*sc)}>{"⚙️"}</button>
                    <button class="action-btn" onclick={load_news.clone()}>{"🔄"}</button>
                </div>
            </div>

            if *show_config {
                <div class="config-panel">
                    <div class="config-section">
                        <label>{"OPENROUTER API KEY"}</label>
                        <input ref={api_key_ref} type="password" class="config-input" placeholder="sk-..." />
                    </div>

                    <div class="config-section">
                        <label>{"RSS FEEDS"}</label>
                        <div class="rss-input-row">
                            <input ref={new_url_ref.clone()} type="text" class="config-input" placeholder="URL hinzufügen..." />
                            <button class="add-btn" onclick={
                                let rss_urls = rss_urls.clone();
                                let new_url_ref = new_url_ref.clone();
                                move |_| {
                                    if let Some(input) = new_url_ref.cast::<HtmlInputElement>() {
                                        let val = input.value();
                                        if !val.trim().is_empty() {
                                            let mut list = (*rss_urls).clone();
                                            list.push(val);
                                            rss_urls.set(list);
                                            input.set_value("");
                                        }
                                    }
                                }
                            }>{"+"}</button>
                        </div>
                        <div class="rss-list-scroll">
                            { for (*rss_urls).iter().enumerate().map(|(i, url)| html! {
                                <div class="rss-url-entry" key={i}>
                                    <span class="url-text">{url}</span>
                                    <button class="delete-btn" onclick={
                                        let rss_urls = rss_urls.clone();
                                        move |_| {
                                            let mut list = (*rss_urls).clone();
                                            list.remove(i);
                                            rss_urls.set(list);
                                        }
                                    }>{"✕"}</button>
                                </div>
                            }) }
                        </div>
                    </div>
                    <button class="save-master-btn" onclick={save_settings}>{"Alles Speichern"}</button>
                </div>
            }

            <div class="posts-list">
                { if let Some(msg) = (*error_msg).clone() {
                    html! { <div class="error-box">{ format!("⚠️ Error: {}", msg) }</div> }
                } else if let Some(list) = (*articles).clone() {
                    if list.is_empty() {
                        html! { <p class="empty-msg">{"Keine Nachrichten gefunden. Überprüfe deine Feeds."}</p> }
                    } else {
                        html! { for list.iter().map(|a| html! { <NewsCard article={a.clone()} /> }) }
                    }
                } else {
                    html! { <div class="loading-spinner">{"Lade Nachrichten..."}</div> }
                } }
            </div>
        </div>
    }
}

#[derive(Properties, PartialEq)]
pub struct NewsCardProps {
    pub article: NewsArticle,
}

#[function_component(NewsCard)]
pub fn news_card(props: &NewsCardProps) -> Html {
    let a = &props.article;
    let markdown_html = {
        let mut options = Options::empty();
        options.insert(Options::ENABLE_STRIKETHROUGH);
        let parser = Parser::new_ext(&a.content, options);
        let mut out = String::new();
        md_html::push_html(&mut out, parser);
        out
    };

    html! {
        <div class="post-card">
            <div class="post-header">
                <span class="post-author">{ &a.author }</span>
                <span class="post-date">{ &a.created_at }</span>
            </div>
            <div class="post-content markdown-body">
                { Html::from_html_unchecked(AttrValue::from(markdown_html)) }
            </div>
        </div>
    }
}