#![allow(unused)]
#![warn(unused_must_use)]

use leptos::hydration::{AutoReload, HydrationScripts};
use leptos::prelude::*;
use leptos_meta::{Link, MetaTags, Stylesheet, Title, provide_meta_context};
use leptos_router::components::{A, FlatRoutes, Route, Router, Routes, RoutingProgress};
use leptos_router::{ParamSegment, StaticSegment, path};
use std::time::Duration;

use contact::Contact;
use posts::{Posts, plot_demo::PlotDemo};
use projects::Projects;
use theme_switcher::SiteHeader;

mod command_line;
mod contact;
mod plot;
mod posts;
mod projects;
mod sigil;
mod theme_switcher;
mod version;

pub fn shell(options: LeptosOptions) -> impl IntoView {
    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />

                <AutoReload options=options.clone() />
                <HydrationScripts options />
                <MetaTags />
            </head>
            <body>
                <App />
            </body>
        </html>
    }
}

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Stylesheet href="/css/styles.css" />
        <Link rel="icon" href="/icon_2.png" />
        <Link
            rel="preload"
            href="/fonts/space_grotesk_variable.woff2"
            as_="font"
            type_="font/woff2"
            crossorigin="anonymous"
        />
        <Link
            rel="preload"
            href="/fonts/ibm_plex_sans_variable.ttf"
            as_="font"
            type_="font/ttf"
            crossorigin="anonymous"
        />
        <Link
            rel="preload"
            href="/fonts/zed_mono_variable.woff2"
            as_="font"
            type_="font/woff2"
            crossorigin="anonymous"
        />
        <Title text="mascully.com" />
        <Root>
            <SiteHeader />
            <div class="content-wrapper">
                <div class="main-content">
                    <Router>
                        <aside class="sidebar">
                            <nav class="main-nav">
                                <ul>
                                    <li>
                                        <A href="/">"Home"</A>
                                    </li>
                                    // <li>
                                    //     <A href="/posts">"Posts"</A>
                                    // </li>
                                    <li>
                                        <A href="/projects">"Projects"</A>
                                    </li>
                                    <li>
                                        <hr />
                                    </li>
                                    <li>
                                        <a href="https://git.mascully.com/mascully?tab=repositories">
                                            "Git"
                                        </a>
                                    </li>
                                    <li>
                                        <A href="/contact">"Contact"</A>
                                    </li>
                                    <li>
                                        <A href="/hire_me">"Hire me"</A>
                                    </li>
                                </ul>
                            </nav>
                        </aside>
                        <main>
                            <Routes fallback=NotFound>
                                <Route path=path!("/") view=HomePage />
                                <Route path=path!("/posts") view=Posts />
                                <Route path=path!("/posts/plot_demo") view=PlotDemo />
                                <Route path=path!("/projects") view=Projects />
                                <Route path=path!("/contact") view=Contact />
                                <Route path=path!("/hire_me") view=HireMe />
                            </Routes>
                        </main>
                    </Router>
                </div>
            </div>
        </Root>
    }
}

#[component]
fn Root(children: Children) -> impl IntoView {
    view! { <div id="root">{children()}</div> }
    // view! { {children()} }
}

#[component]
fn NotFound() -> impl IntoView {
    view! { <h1>404</h1> }
}

#[component]
fn HomePage() -> impl IntoView {
    view! {
        <p>"Hi. I'm Markus. I'm a software engineer currently doing mostly full stack development with Rust and Nix."</p>
        <p>
            "You can check out some of my projects "<A href="/projects">"here"</A>" or on my "
            <A href="https://git.mascully.com/mascully?tab=repositories">"Git forge"</A>
            ", including the "
            <A href="https://git.mascully.com/mascully/mascully_website">
                "source code for this website"
            </A>"."
        </p>
    }
}

#[component]
fn HireMe() -> impl IntoView {
    view! {
        <p>"I am available for freelancing work (remote, European time zone)."</p>
        <p>"I can work comfortably with most tech stacks in most domains."</p>
        <p>"Email me at "<a href="mailto:contact@mascully.com">"contact@mascully.com"</a>.</p>
    }
}
