use std::time::Duration;

use feshared::daemon::DaemonState;
use leptos::logging::log;
use leptos::{prelude::*, reactive::spawn_local};
use leptos_router::{
    components::{Route, Router, Routes},
    path,
};
use serde::{Deserialize, Serialize};
use wasm_bindgen::{prelude::Closure, JsValue};

use crate::bridge::{invoke, listen};
use crate::popup::PopupView;

pub const BTN_PRIMARY: &str = "bg-slate-300 hover:bg-slate-400 dark:bg-slate-800 hover:dark-bg-slate-700 px-4 py-2 rounded-md";

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Router>
            <Routes fallback=|| view! { "Page not found."}>
                <Route path=path!("/") view=Dashboard />
                <Route path=path!("/popup") view=PopupView />
            </Routes>
        </Router>
    }
}

#[component]
fn Dashboard() -> impl IntoView {
    let on_click = move |_ev: leptos::ev::MouseEvent| {
        spawn_local(async move {
            let empty_args = serde_wasm_bindgen::to_value(&serde_json::json!({})).unwrap();
            invoke("toggle_popup", empty_args).await;
        });
    };

    let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
        spawn_local(async {
            let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
        });
    };
    view! {
        <ThemeProvider>
            <DaemonProvider>
                <div class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white">
                        <button class=BTN_PRIMARY on:click=on_click>Open chat</button>
                        <button class=BTN_PRIMARY on:click=toggle_dark_mode>asdf?</button>
                </div>
            </DaemonProvider>
            <div class="fixed bottom-0 right-0 p-2">
                <DarkModeToggle />
            </div>
        </ThemeProvider>
    }
}

#[component]
pub fn DarkModeToggle() -> impl IntoView {
    let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
        spawn_local(async {
            let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
        });
    };
    view! {
        <div on:click=toggle_dark_mode class="text-gray-600 dark:text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
            </svg>
        </div>
    }
}

#[component]
pub fn DaemonStatusIndicator() -> impl IntoView {
    let (poll_count, set_pool_count) = signal(0);
    set_interval(
        move || set_pool_count.update(|v| *v += 1),
        Duration::from_secs(1),
    );
    let status = LocalResource::new(move || async move {
        poll_count.get();
        let val = invoke("daemon_state", JsValue::NULL).await;
        let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
        s
    });

    let f = |state: Option<DaemonState>| {
        let color = match state.clone() {
            Some(s) => match s.is_ok {
                true => "bg-green-600",
                false => "bg-red-600",
            },
            None => "bg-yellow-600",
        };
        let text = match state {
            Some(s) => match s.error {
                Some(err) => err,
                None => s.message.unwrap_or(String::from("")),
            },
            None => String::from("Loading..."),
        };
        view! {
            <div class="flex">
                <div class={format!("mt-1 h-4 w-4 rounded-full flex-none {color}")}></div>
                <span class="ml-2 flex-none text-gray-400 dark:text-gray-600">{ text }</span>
            </div>
        }
    };

    view! {
        <div>
        {move || f(status.get())}
        </div>
    }
}

#[component]
pub fn DaemonProvider(children: ChildrenFn) -> impl IntoView {
    let (poll_count, set_pool_count) = signal(0);
    set_interval(
        move || set_pool_count.update(|v| *v += 1),
        Duration::from_secs(1),
    );
    let status_res = LocalResource::new(move || async move {
        poll_count.get();
        let val = invoke("daemon_state", JsValue::NULL).await;
        let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
        s
    });

    let is_daemon_ok = Memo::new(move |_| status_res.get().map(|s| (s.is_ok, s.error)));

    provide_context(status_res);

    move || match is_daemon_ok.get() {
        Some((true, _)) => children().into_any(),
        Some((false, err)) => view! { <DaemonErrorStatus error=err/> }.into_any(),
        None => view! { <p>Connecting...</p> }.into_any(),
    }
}

#[component]
fn DaemonErrorStatus(error: Option<String>) -> impl IntoView {
    view! {
        <ThemeProvider>
            <div class="w-screen h-screen bg-white dark:bg-zinc-900">
                <p>{ error.unwrap_or("Daemon error!".to_string()) } </p>
            </div>
        </ThemeProvider>
    }
}

#[derive(Deserialize, Serialize, Clone)]
struct DarkMode {
    is_dark_mode: bool,
}

#[component]
pub fn ThemeProvider(children: Children) -> impl IntoView {
    let (is_dark, set_dark) = signal(false);

    Effect::new(move |_| {
        spawn_local(async move {
            let handler = Closure::wrap(Box::new(move |evt: JsValue| {
                log!("Received!!!");
                #[derive(Deserialize)]
                struct TauriEvent<T> {
                    payload: T,
                }
                if let Ok(wrapper) = serde_wasm_bindgen::from_value::<TauriEvent<DarkMode>>(evt) {
                    set_dark.set(wrapper.payload.is_dark_mode);
                }
            }) as Box<dyn FnMut(JsValue)>);
            let unlisten = listen("dark-mode-changed", &handler).await;
            // TODO use on_cleanup to call the unlisten JS function.
            handler.forget()
        });
    });

    Effect::new(move |_| {
        let el = document()
            .document_element()
            .expect("HTML element not found!");
        if is_dark.get() {
            let _ = el.set_attribute("class", "dark");
        } else {
            let _ = el.set_attribute("class", "");
        }
    });

    view! {
        {children()}
    }
}