use yew::prelude::*;
use web_sys::window;
use wasm_bindgen::JsCast;

#[derive(Properties, PartialEq)]
pub struct MobileWarningModalProps {
    pub is_open: bool,
    pub on_close: Callback<()>,
}

#[function_component(MobileWarningModal)]
pub fn mobile_warning_modal(props: &MobileWarningModalProps) -> Html {
    let on_backdrop_click = {
        let on_close = props.on_close.clone();
        Callback::from(move |e: MouseEvent| {
            if let Some(target) = e.target() {
                let element = target.dyn_into::<web_sys::Element>().unwrap();
                if element.class_list().contains("modal-overlay") {
                    on_close.emit(());
                }
            }
        })
    };

    if !props.is_open {
        return html! {};
    }

    html! {
        <div class="modal-overlay mobile-warning-overlay" onclick={on_backdrop_click}>
            <div class="modal-content mobile-warning-modal">
                <div class="modal-header">
                    <h2>{"Desktop Application"}</h2>
                    <button class="modal-close" onclick={
                        let on_close = props.on_close.clone();
                        Callback::from(move |_: MouseEvent| on_close.emit(()))
                    }>{"×"}</button>
                </div>
                <div class="modal-body">
                    <div class="mobile-warning-icon">
                        {"💻"}
                    </div>
                    <p class="mobile-warning-title">
                        {"This calendar application is designed for desktop usage"}
                    </p>
                    <p class="mobile-warning-description">
                        {"For the best mobile calendar experience, we recommend using dedicated CalDAV apps available on your device's app store:"}
                    </p>
                    <ul class="mobile-warning-apps">
                        <li>
                            <strong>{"iOS:"}</strong>
                            {" Calendar (built-in), Calendars 5, Fantastical"}
                        </li>
                        <li>
                            <strong>{"Android:"}</strong>
                            {" Google Calendar, DAVx5, CalDAV Sync"}
                        </li>
                    </ul>
                    <p class="mobile-warning-note">
                        {"These apps can sync with the same CalDAV server you're using here."}
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="continue-anyway-button" onclick={
                        let on_close = props.on_close.clone();
                        Callback::from(move |_: MouseEvent| on_close.emit(()))
                    }>
                        {"Continue Anyway"}
                    </button>
                </div>
            </div>
        </div>
    }
}

// Helper function to detect mobile devices
pub fn is_mobile_device() -> bool {
    if let Some(window) = window() {
        let navigator = window.navigator();
        let user_agent = navigator.user_agent().unwrap_or_default();
        let user_agent = user_agent.to_lowercase();
        
        // Check for mobile device indicators
        user_agent.contains("mobile")
            || user_agent.contains("android")
            || user_agent.contains("iphone")
            || user_agent.contains("ipad")
            || user_agent.contains("ipod")
            || user_agent.contains("blackberry")
            || user_agent.contains("webos")
            || user_agent.contains("opera mini")
            || user_agent.contains("windows phone")
    } else {
        false
    }
}