use axum::{http::header, response::IntoResponse, Extension};
use maud::{html, PreEscaped, DOCTYPE};

use crate::{config::Config, web::head_html};

const BASE_COMMIT_URL: &str = "https://github.com/mat-1/metasearch2/commit/";
const VERSION: &str = std::env!("CARGO_PKG_VERSION");
const COMMIT_HASH: &str = std::env!("GIT_HASH");
const COMMIT_HASH_SHORT: &str = std::env!("GIT_HASH_SHORT");

pub async fn get(Extension(config): Extension<Config>) -> impl IntoResponse {
    let html = html! {
        (PreEscaped("<!-- source code: https://github.com/mat-1/metasearch2 -->\n"))
        (DOCTYPE)
        html lang="en" {
            {(head_html(None, &config))}
            body {
                @if config.ui.show_settings_link {
                    a.settings-link href="/settings" { "Settings" }
                }
                // div.main-container.index-page {
                //     h1 { {(config.ui.site_name)} }
                //     form.search-form action="/search" method="get" {
                //         input type="text" name="q" placeholder="Search" id="search-input" autofocus onfocus="this.select()" autocomplete="off";
                //         input type="submit" value="Search";
                //     }
                // }

                div.fixed.w-full.text-center.z-50.flex.flex-col {
                    h1.z-50.w-full.text-center.m-0.mt-3.text-2xl.font-semibold { "Dashboard" }
                    div class="z-50 w-11/12 md:w-1/2  text-center self-center m-0 mt-20 text-2xl font-semibold" {
                        form.search-form action="/search" method="get" {
                            div.relative {
                                div.absolute.inset-y-0.left-0.flex.items-center.pl-3.pointer-events-none {
                                    svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {
                                        path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z";
                                    }
                                }
                                input type="text" name="q" placeholder="Search" id="search-input" class="block w-full p-4 pl-10 text-sm border-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 outline-none shadow-lg focus:shadow-2xl" autofocus onfocus="this.select()" autocomplete="off";
                                input type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="Search";
                            }
                        }
                    }
                }

                div class="h-svh w-screen grid grid-cols-1 grid-rows-1 place-items-end md:place-items-center" {
                    div class="max-w-3xl max-h-[65%] overflow-y-scroll md:overflow-y-visible flex h-fit w-full md:w-fit flex-col md:flex-row" {
                        div onclick="appLink('http://rotanclan.com:8080')" class="rounded-lg shadow-lg md:p-2 bg-white m-2 md:m-3 w-11/12 h-20 md:w-40 md:h-40 flex self-center flex-col cursor-pointer hover:shadow-2xl" {
                            div class="h-full flex items-left md:items-center content-left md:content-center justify-left md:justify-center md:m-2" {
                                img src="http://nas.local/assets/omv.png" class="md:h-auto md:w-2/3 rounded-md m-2 mr-0 md:mr-2";
                                h1 class="text-center font-semibold mt-auto h-full content-center p-4 md:hidden" { "OpenMediaVault" }
                            }
                            h1 class="text-center font-semibold mt-auto hidden md:block" { "OpenMediaVault" }
                        }

                        div onclick="appLink('http://rotanclan.com:2283')" class="rounded-lg shadow-lg md:p-2 bg-white m-2 md:m-3 w-11/12 h-20 md:w-40 md:h-40 flex self-center flex-col cursor-pointer hover:shadow-2xl" {
                            div class="h-full flex items-left md:items-center content-left md:content-center justify-left md:justify-center md:m-2" {
                                img src="http://nas.local/assets/immich.png" class="md:h-auto md:w-2/3 rounded-md m-2 mr-0 md:mr-2";
                                h1 class="text-center font-semibold mt-auto h-full content-center p-4 md:hidden" { "Immich" }
                            }
                            h1 class="text-center font-semibold mt-auto hidden md:block" { "Immich" }
                        }

                        div onclick="appLink('http://rotanclan.com:9000')" class="rounded-lg shadow-lg md:p-2 bg-white m-2 md:m-3 w-11/12 h-20 md:w-40 md:h-40 flex self-center flex-col cursor-pointer hover:shadow-2xl" {
                            div class="h-full flex items-left md:items-center content-left md:content-center justify-left md:justify-center md:m-2" {
                                img src="http://nas.local/assets/portainer.png" class="md:h-auto md:w-2/3 rounded-md m-2 mr-0 md:mr-2";
                                h1 class="text-center font-semibold mt-auto h-full content-center p-4 md:hidden" { "Portainer" }
                            }
                            h1 class="text-center font-semibold mt-auto hidden md:block" { "Portainer" }
                        }

                        div onclick="appLink('http://nas.local:631')" class="rounded-lg shadow-lg md:p-2 bg-white m-2 md:m-3 w-11/12 h-20 md:w-40 md:h-40 flex self-center flex-col cursor-pointer hover:shadow-2xl" {
                            div class="h-full flex items-left md:items-center content-left md:content-center justify-left md:justify-center md:m-2" {
                                img src="http://nas.local/assets/cups.png" class="md:h-auto md:w-2/3 rounded-md m-2 mr-0 md:mr-2";
                                h1 class="text-center font-semibold mt-auto h-full content-center p-4 md:hidden" { "Print Server" }
                            }
                            h1 class="text-center font-semibold mt-auto hidden md:block" { "Print Server" }
                        }

                    }
                }





                @if config.ui.show_version_info {
                    span.version-info {
                        @if COMMIT_HASH == "unknown" || COMMIT_HASH_SHORT == "unknown" {
                            "Version "
                            (VERSION)
                        } else {
                            "Version "
                            (VERSION)
                            " ("
                            a href=(format!("{BASE_COMMIT_URL}{COMMIT_HASH}")) { (COMMIT_HASH_SHORT) }
                            ")"
                        }
                    }
                }
            }

        }
    }
    .into_string();

    ([(header::CONTENT_TYPE, "text/html; charset=utf-8")], html)
}