use crate::{components::*, pages::*};
use dioxus::prelude::*;

/// Application routes.
///
/// Public pages (`LandingPage`, `ImpressumPage`, `PrivacyPage`) live
/// outside the `AppShell` layout. Authenticated pages like `OverviewPage`
/// are wrapped in `AppShell` which renders the sidebar.
#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
pub enum Route {
    #[route("/")]
    LandingPage {},
    #[route("/impressum")]
    ImpressumPage {},
    #[route("/privacy")]
    PrivacyPage {},
    #[layout(AppShell)]
        #[route("/dashboard")]
        OverviewPage {},
    #[end_layout]
    #[route("/login?:redirect_url")]
    Login { redirect_url: String },
}

const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

/// Google Fonts URL for Inter (body) and Space Grotesk (headings).
const GOOGLE_FONTS: &str = "https://fonts.googleapis.com/css2?\
    family=Inter:wght@400;500;600&\
    family=Space+Grotesk:wght@500;600;700&\
    display=swap";

/// Root application component. Loads global assets and mounts the router.
#[component]
pub fn App() -> Element {
    rsx! {
        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
        document::Link {
            rel: "preconnect",
            href: "https://fonts.gstatic.com",
            crossorigin: "anonymous",
        }
        document::Link { rel: "stylesheet", href: GOOGLE_FONTS }
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        div { "data-theme": "certifai-dark", Router::<Route> {} }
    }
}