import Foundation
import HTML

/// The base page layout used to render the different sections of the website.
///
/// - Parameters:
///   - conocicalURL: The url for the page.
///   - section: The section of the page.
///   - title: The page title.
///   - rssLink: A prefix for generating an rss feed for the page (generally only used for articles).
///   - extraHeader: Any extra items to be placed in the `head` of the html.
func baseLayout(
  canocicalURL: String,
  section: Section,
  title pageTitle: String,
  rssLink: String = "",
  extraHeader: NodeConvertible = Node.fragment([]),
  @NodeBuilder children: () -> NodeConvertible
) -> Node {
  return [
    .documentType("html"),
    html(lang: "en-US") {
      generateHeader(pageTitle, extraHeader)
      body(class: "text-white text-lg pb-5 font-avenir \(section.rawValue)") {
        siteHeader(section)

        div(class: "container mb-auto") {
          children()
        }

        footer(rssLink)
      }
    }
  ]
}

private func siteHeader(_ section: Section) -> Node {
  header(class: "header") {
    div(class: "header__inner") {
      div(class: "header__logo") {
        a(href: "/") {
          div(class: "logo") {
            img(src: "/static/favicon-32x32.png")
            span(class: "pl-2") { "docs.housh.dev" }
          }
        }
      }
    }
    nav(class: "menu flex justify-between") {
      div(class: "pt-6") {
        ul(class: "flex flex-wrap gap-x-2 lg:gap-x-5") {
          li {
            a(class: section == .articles ? "active" : "", href: "/articles/") { "Articles" }
          }
          li {
            a(href: "https://uptime.housh.dev/status/housh-dev", rel: "nofollow", target: "_blank") { "Server-Monitor" }
          }
          li {
            a(class: section == .about ? "active" : "", href: "/about.html") { "About" }
          }
        }
      }

      div(class: "font-avenir w-2/3", id: "search") {}
    }
  }
}

private func footer(_ rssLink: String) -> Node {
  div(class: "text-slate-400 border-t border-light text-center pt-2 text-sm") {
    div {
      "Copyright © Michael Housh \(Date().description.prefix(4))."
    }
    p(class: "mb-2") {
      "Built in Swift using"
      a(
        class: "text-orange-400 [&:hover]:border-b border-green-400",
        href: "https://github.com/loopwerk/Saga",
        rel: "nofollow",
        target: "_blank"
      ) { "Saga" }
      "("
      %a(
        class: "[&:hover]:border-b border-green-400",
        href: "https://github.com/m-housh/mhoush.com",
        rel: "nofollow",
        target: "_blank"
      ) { "source" }
      %")."
    }
    script(src: "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js")
    script(src: "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/keep-markup/prism-keep-markup.min.js")
    script(src: "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js")
  }
}

private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible) -> Node {
  head {
    meta(charset: "utf-8")
    meta(content: "#0e1112", name: "theme-color", customAttributes: ["media": "(prefers-color-scheme: dark)"])
    meta(content: "#566B78", name: "theme-color", customAttributes: ["media": "(prefers-color-scheme: light)"])
    meta(content: "Michael Housh", name: "author")
    meta(content: "HHE-Docs", name: "apple-mobile-web-app-title")
    meta(content: "initial-scale=1.0, width=device-width", name: "viewport")
    meta(content: "telephone=no", name: "format-detection")
    meta(content: "True", name: "HandheldFriendly")
    meta(content: "320", name: "MobileOptimized")
    meta(content: "HHE-Docs", name: "og:site_name")
    meta(content: "hvac, developer, swift, home-performance, design", name: "keywords")
    title { SiteMetadata.name + ": \(pageTitle)" }
    Node.raw("""
    <link rel="apple-touch-icon" sizes="57x57" href="/static/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/static/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/static/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/static/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <link rel="manifest" href="/static/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/static/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    """)
    link(href: "/static/output.css", rel: "stylesheet")
    link(href: "/articles/feed.xml", rel: "alternate", title: SiteMetadata.name, type: "application/rss+xml")
    extraHeader
    // script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
    //
    Node.raw("""
    <script src="/pagefind/pagefind-ui.js"></script>
    <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            new PagefindUI({ element: "#search", showSubResults: true });
        });
    </script>
    """)
    link(href: "/static/style.css", rel: "stylesheet")
  }
}