use gloo_storage::{LocalStorage, Storage};
use web_sys::window;
use yew::prelude::*;

#[function_component(DarkModeToggle)]
pub fn dark_mode_toggle() -> Html {
    // 1. Initialize state from LocalStorage or system preference
    let is_dark = use_state(|| {
        LocalStorage::get::<bool>("dark-mode").unwrap_or_else(|_| {
            // Fallback to system preference if not set
            window()
                .and_then(|w| w.match_media("(prefers-color-scheme: dark)").ok().flatten())
                .map(|m| m.matches())
                .unwrap_or(false)
        })
    });

    // 2. Synchronize the class on the body when the state changes
    {
        let is_dark = is_dark.clone();
        use_effect_with(is_dark, |is_dark| {
            if let Some(win) = window() {
                if let Some(doc) = win.document() {
                    if let Some(body) = doc.body() {
                        if **is_dark {
                            let _ = body.class_list().add_1("theme-dark");
                            let _ = body.class_list().remove_1("theme-light");
                            let _ = LocalStorage::set("dark-mode", true);
                        } else {
                            let _ = body.class_list().add_1("theme-light");
                            let _ = body.class_list().remove_1("theme-dark");
                            let _ = LocalStorage::set("dark-mode", false);
                        }
                    }
                }
            }
            || ()
        });
    }

    // 3. Toggle action
    let onclick = {
        let is_dark = is_dark.clone();
        Callback::from(move |_| {
            is_dark.set(!*is_dark);
        })
    };

    html! {
        <button class="dark-mode-toggle" {onclick}>
            if *is_dark {
                // Sun Icon for switching to light mode
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="4"/>
                    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
                </svg>
            } else {
                // Moon Icon for switching to dark mode
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
                </svg>
            }
        </button>
    }
}