use actix_web::HttpResponse;
use maud::{html, PreEscaped};

use crate::library::Video;

pub fn loading_spinner() -> PreEscaped<String> {
    html! {
        style {
            ".spinner { display: flex;justify-content: center;align-items: center;height: 100vh;}
            .spinner-border { border: 2px solid #007bff;border-top: 2px solid transparent;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;}
            @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}"
        };
        div class="spinner" {
            div class="spinner-border" {};
        };
    }
}

pub fn search_bar(query: &str) -> PreEscaped<String> {
    html! {
        form hx-get="/search" action="/search" hx-push-url="true" hx-target="#main-view" hx-swap="innerHTML" {
            input style="width: 100%;" value=(query) name="query" type="search" placeholder="Search...";
        };
    }
}

pub fn video_element(video: &mut Video) -> PreEscaped<String> {
    html!(
        @let desc = video.description().unwrap_or_default().to_owned();
        @let video_hash = video.hash();
                article class="container-fluid" style="margin: 50px; cursor: pointer;" {
                    a href=(format!("/watch?v={video_hash}")) style="text-decoration:none !important;" {
                img style="width: 350px;" width="480" src=(format!("/video/thumbnail?v={video_hash}"));
                div style="padding: 10px;" {
                    h2 style="margin: 0; font-size: 18px;" { (video.title().unwrap()) };
                    @if !desc.is_empty() {
                        p style="margin: 0; color: grey; font-size: 14px;margin-top: 10px;" { (desc.chars().take(200).chain("...".to_string().chars()).take(203).collect::<String>()) };
                    };
                };
            };
                };
    )
}

pub fn header(query: &str) -> PreEscaped<String> {
    html!(
        header style="padding: 10px 0; display: flex; justify-content: space-between;" {
            a href="/" style="text-decoration: none; margin-left: 20px;" {
                div style="margin-right: 20px;display:flex;align-items: center" {
                    img src="/icon" width="64" style="margin-top: -25px;margin-right: 15px;border-radius: 20%;";
                    p style="font-size: 42px;" { "WatchDogs" };
                };
            };
            div style="width: 35px;" {};
            div style="flex-grow: 1; text-align: center;" {
            (search_bar(query));
            };
        };
    )
}

pub fn build_site(r: &actix_web::HttpRequest, title: &str, content: &str) -> HttpResponse<String> {
    build_site_fn(r, title, content, None)
}

pub fn build_site_fn(
    r: &actix_web::HttpRequest,
    title: &str,
    content: &str,
    query: Option<String>,
) -> HttpResponse<String> {
    let content = html! {
        body class="container" data-theme="dark" id="main-view" {
            style {
                (r#"
                :root:not([data-theme]) {
                    --background-color: rgb(1, 4, 29);
                    --primary: #e53935;
                }
                "#)
            };
            (header(&query.unwrap_or_default()))
            (PreEscaped(content))
        };
    }
    .into_string();
    web_base::func::build_site_from_body(&web_base::Site::from_request(r), title, &content)
}
