telegram_page!("/", fn index() {
    // render page
});

telegram_app!(fn main() -> Result<(), wasm_bindgen::JsValue> {
    telegram_router!();
    Ok(())
});

telegram_page!("/", pub fn index() {});

// Uses the default Router
telegram_router!();

struct CustomRouter;
impl CustomRouter {
    fn new() -> Self { CustomRouter }
    fn register(self, _path: &str, _handler: fn()) -> Self { self }
    fn start(self) {}
}

telegram_router!(CustomRouter);

use telegram_webapp_sdk::{
    core::init::init_sdk,
    webapp::TelegramWebApp,
    dom::{Document, ElementExt},
};
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn main() -> Result<(), JsValue> {
    init_sdk()?;
    TelegramWebApp::instance()
        .ok_or_else(|| JsValue::from_str("Telegram not available"))?
        .ready()?;

    let doc = Document;

    let root = doc.create_element("div")?;
    root.set_class("container");

    let btn = doc.create_element("button")?;
    btn.set_text("Click me");
    btn.set_class("btn-primary");
    btn.on("click", |_| {
        web_sys::console::log_1(&"Clicked!".into());
    })?;
    root.append(&btn)?;

    doc.body()?.append(&root)?;

    Ok(())
}

use telegram_webapp_sdk::dom::{Document, ElementExt};

// Get element by ID or selector
let el = Document.get_element_by_id("my-id");
let first = Document.query_selector(".item")?;

// Element manipulation
element.set_class("active");
element.set_id("unique-id");
element.set_text("Hello!");
element.set_html("<strong>Bold</strong>")?;
element.set_attr("data-value", "123")?;
element.remove_attr("data-value")?;

// Class manipulation
element.add_class("highlighted")?;
element.remove_class("hidden")?;
element.toggle_class("expanded")?;
let is_active = element.has_class("active");

// Event handling
element.on("click", |event| { /* handle click */ })?;
element.on("input", |event| { /* handle input */ })?;

// Tree manipulation
element.append(&child)?;
element.prepend(&header)?;
element.remove()?;        // detach self from parent
element.clear();          // remove all children

use telegram_webapp_sdk::yew::use_telegram_context;
use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let ctx = use_telegram_context().expect("context");
    if let Some(query_id) = ctx.init_data.query_id.as_deref() {
        // Handle inline query response with `answerWebAppQuery`.
        let _ = query_id;
    }
    html! { <span>{ ctx.init_data.auth_date }</span> }
}

use telegram_webapp_sdk::yew::{BackButton, BottomButton, SettingsButton};
use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let on_main = Callback::from(|_| {});
    let on_back = Callback::from(|_| {});
    let on_settings = Callback::from(|_| {});
    html! {
        <>
            <BottomButton text="Send" color="#000" text_color="#fff" on_click={on_main} />
            <BackButton visible={true} on_click={on_back} />
            <SettingsButton visible={true} on_click={on_settings} />
        </>
    }
}

use leptos::prelude::*;
use telegram_webapp_sdk::leptos::provide_telegram_context;

#[component]
fn App() -> impl IntoView {
    provide_telegram_context().expect("context");
    let ctx = use_context::<telegram_webapp_sdk::core::context::TelegramContext>()
        .expect("context");
    if let Some(query_id) = ctx.init_data.query_id.as_deref() {
        // Handle inline query response with `answerWebAppQuery`.
        let _ = query_id;
    }
    view! { <span>{ ctx.init_data.auth_date }</span> }
}

use leptos::prelude::*;
use telegram_webapp_sdk::leptos::{
    provide_telegram_context, BackButton, BottomButton, SettingsButton
};
use telegram_webapp_sdk::webapp::BottomButton as Btn;

#[component]
fn App() -> impl IntoView {
    provide_telegram_context().expect("context");
    let (text, _set_text) = signal("Send".to_owned());
    let back_visible = RwSignal::new(true);
    view! {
        <BottomButton button=Btn::Main text />
        <BackButton visible=back_visible on_click=move || { /* navigate back */ } />
        <SettingsButton visible=back_visible on_click=move || { /* open settings */ } />
    }
}

use telegram_webapp_sdk::webapp::TelegramWebApp;

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;

let confirmed: bool = app.show_confirm("Send the order?").await?;
let scanned: String = app.show_scan_qr_popup("Scan a QR code").await?;
let granted: bool = app.request_write_access().await?;
let _ = (confirmed, scanned, granted);
# Ok(())
# }

// Leptos
use leptos::prelude::*;
use telegram_webapp_sdk::leptos::{use_safe_area, use_theme, use_viewport};

#[component]
fn Status() -> impl IntoView {
    let viewport = use_viewport();
    let theme = use_theme();
    let safe = use_safe_area();
    view! {
        <div>
            { move || viewport.get().height }
            { move || theme.get().color_scheme.unwrap_or_default() }
            { move || safe.get().area.map(|i| i.top).unwrap_or(0.0) }
        </div>
    }
}

// Yew
use telegram_webapp_sdk::yew::{use_safe_area, use_theme, use_viewport};
use yew::prelude::*;

#[function_component(Status)]
fn status() -> Html {
    let viewport = use_viewport();
    let theme = use_theme();
    let safe = use_safe_area();
    html! {
        <div>
            { viewport.height }
            { theme.color_scheme.clone().unwrap_or_default() }
            { safe.area.map(|i| i.top).unwrap_or(0.0) }
        </div>
    }
}

use telegram_webapp_sdk::mock::{config::MockTelegramConfig, init::mock_telegram_webapp};

let config = MockTelegramConfig::default();
mock_telegram_webapp(config)?;

use telegram_webapp_sdk::api::user::request_contact;
use telegram_webapp_sdk::webapp::TelegramWebApp;

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
request_contact()?;

let app = TelegramWebApp::try_instance()?;
let granted: bool = app.request_write_access().await?;
let sent: bool = app.request_chat(42).await?;
let _ = (granted, sent);
# Ok(())
# }

use telegram_webapp_sdk::webapp::{BottomButton, BottomButtonParams, TelegramWebApp};
# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;

// Hide the native keyboard
app.hide_keyboard()?;

// Control the main bottom button
app.set_main_button_text("Send")?;
app.set_main_button_color("#2481cc")?;
app.set_main_button_text_color("#ffffff")?;
app.enable_main_button()?;
app.show_main_button()?;

// Set custom emoji icon on the button (Bot API 9.5+)
app.set_main_button_icon_custom_emoji_id("123456789")?;

// Or use setParams for atomic updates
let params = BottomButtonParams {
    text: Some("Submit"),
    color: Some("#ff0000"),
    text_color: Some("#ffffff"),
    is_active: Some(true),
    is_visible: Some(true),
    icon_custom_emoji_id: Some("987654321"), // Bot API 9.5+
    ..Default::default()
};
app.set_main_button_params(&params)?;

// Secondary button (also supports icon_custom_emoji_id)
app.set_secondary_button_text("Cancel")?;
app.set_secondary_button_icon_custom_emoji_id("111222333")?;
app.show_secondary_button()?;
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;
# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
app.enable_closing_confirmation()?;
assert!(app.is_closing_confirmation_enabled());
// later
app.disable_closing_confirmation()?;
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
let handle = app.on_invoice_closed(|status| {
    let _ = status;
})?;
let status: String = app.open_invoice("https://invoice").await?;
let _ = status;
app.off_event(handle)?;
# Ok(())
# }

use js_sys::Object;
use telegram_webapp_sdk::webapp::TelegramWebApp;

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
app.share_url("https://example.com", Some("Check this out"))?;
let sent: bool = app.share_message("msg-id").await?;
let _ = sent;
let params = Object::new();
app.share_to_story("https://example.com/image.png", Some(&params.into()))?;
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;

# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
app.show_settings_button()?;

let handle = app.set_settings_button_callback(|| {
    // user opened the settings menu
})?;

// when no longer needed:
app.remove_settings_button_callback(handle)?;
app.hide_settings_button()?;
# Ok(())
# }

use js_sys::Reflect;
use telegram_webapp_sdk::api::cloud_storage::{get_items, set_item};
use wasm_bindgen_futures::JsFuture;

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
JsFuture::from(set_item("counter", "1")?).await?;
let obj = JsFuture::from(get_items(&["counter"])?).await?;
let value = Reflect::get(&obj, &"counter".into())?.as_string();
assert_eq!(value, Some("1".into()));
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;
# async fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
let _shown = app.add_to_home_screen()?;
let status: String = app.check_home_screen_status().await?;
let _ = status;
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;
# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
let handle = app.on_event("my_event", |value| {
    let _ = value;
})?;
app.off_event(handle)?;
# Ok(())
# }

use telegram_webapp_sdk::webapp::{BackgroundEvent, TelegramWebApp};

# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
let handle = app.on_background_event(BackgroundEvent::MainButtonClicked, |_| {})?;
app.off_event(handle)?;
# Ok(())
# }

use telegram_webapp_sdk::api::theme::get_theme_params;
use telegram_webapp_sdk::webapp::TelegramWebApp;

# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
app.set_header_color("#0a0a0a")?;
app.set_background_color("#ffffff")?;
app.set_bottom_bar_color("#2481cc")?;

let params = get_theme_params()?;
let _ = params.bg_color;

let theme_handle = app.on_theme_changed(|| {
    let _ = get_theme_params();
})?;
let safe_handle = app.on_safe_area_changed(|| {})?;
let content_handle = app.on_content_safe_area_changed(|| {})?;

app.off_event(theme_handle)?;
app.off_event(safe_handle)?;
app.off_event(content_handle)?;
# Ok(())
# }

use telegram_webapp_sdk::api::viewport::{
    expand_viewport, get_viewport_height, on_viewport_changed,
};
use wasm_bindgen::closure::Closure;

# fn run() -> Result<(), wasm_bindgen::JsValue> {
let _ = get_viewport_height();
let callback = Closure::wrap(Box::new(|| {
    let _ = get_viewport_height();
}) as Box<dyn Fn()>);
on_viewport_changed(&callback);
expand_viewport()?;
callback.forget();
# Ok(())
# }

use telegram_webapp_sdk::webapp::TelegramWebApp;
# fn run() -> Result<(), wasm_bindgen::JsValue> {
let app = TelegramWebApp::try_instance()?;
if !app.is_fullscreen() {
    app.request_fullscreen()?;
}
app.lock_orientation("portrait")?;
app.unlock_orientation()?;
app.exit_fullscreen()?;
# Ok(())
# }

use telegram_webapp_sdk::api::haptic::{
    impact_occurred, notification_occurred, selection_changed,
    HapticImpactStyle, HapticNotificationType,
};

impact_occurred(HapticImpactStyle::Light)?;
notification_occurred(HapticNotificationType::Success)?;
selection_changed()?;
# Ok::<(), wasm_bindgen::JsValue>(())

use telegram_webapp_sdk::api::device_storage::{set, get};

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
set("theme", "dark").await?;
let value = get("theme").await?;
# Ok(())
# }

use telegram_webapp_sdk::api::secure_storage::{set, restore};

# async fn run() -> Result<(), wasm_bindgen::JsValue> {
set("token", "secret").await?;
let _ = restore("token").await?;
# Ok(())
# }

use telegram_webapp_sdk::api::biometric::{
    authenticate, init, is_biometric_available, request_access,
};

# fn run() -> Result<(), wasm_bindgen::JsValue> {
init()?;
if is_biometric_available()? {
    request_access("auth-key", Some("Unlock the vault"), None)?;
    authenticate("auth-key", None, None)?;
}
# Ok(())
# }

use telegram_webapp_sdk::api::location_manager::{
    init, get_location, open_settings, on_location_requested,
};
use wasm_bindgen::closure::Closure;

init()?;
let _ = get_location();
open_settings()?;

let cb = Closure::wrap(Box::new(|| {}) as Box<dyn Fn()>);
on_location_requested(&cb)?;
cb.forget();
# Ok::<(), wasm_bindgen::JsValue>(())

use telegram_webapp_sdk::api::accelerometer::{start, get_acceleration, stop};

start()?;
let reading = get_acceleration();
stop()?;
# Ok::<(), wasm_bindgen::JsValue>(())

use telegram_webapp_sdk::TelegramWebApp;

# fn run() -> Result<(), Box<dyn std::error::Error>> {
// Get raw initData for backend validation
let raw_init_data = TelegramWebApp::get_raw_init_data()?;

// Send to your backend for signature verification
// POST /auth with body: { "init_data": raw_init_data }
# Ok(())
# }

// On your backend server
use init_data_rs::{validate, InitData};

async fn authenticate(init_data_str: &str, bot_token: &str) -> Result<InitData, Box<dyn std::error::Error>> {
    // Validate with optional expiration time (in seconds)
    let init_data: InitData = validate(init_data_str, bot_token, Some(3600))?;
    Ok(init_data)
}