import Elementary

struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
  let title = "HVAC-Toolbox"
  let lang = "en-US"
  let inner: @Sendable () -> Inner

  var head: some HTML {
    meta(.charset(.utf8))
    meta(.name("viewport"), .content("width=device-width, initial-scale=1.0"))
    link(.rel(.stylesheet), .href("/output.css"))
    link(
      .rel(.icon),
      .href("/favicon-32x32.png"),
      .init(name: "type", value: "image/png"),
      .init(name: "sizes", value: "32x32")
    )
    link(
      .rel(.icon),
      .href("/favicon-16x16.png"),
      .init(name: "type", value: "image/png"),
      .init(name: "sizes", value: "16x16")
    )
    link(
      .rel(.init(rawValue: "apple-touch-icon")),
      .href("/apple-touch-icon.png"),
      .init(name: "sizes", value: "180x180")
    )
    link(.rel(.init(rawValue: "mainifest")), .href("/site.webmanifest"))
  }

  var body: some HTML {
    main(.class("bg-white dark:bg-gray-800")) {
      div(.class("min-h-screen")) {
        Header()
        inner()
      }
    }
  }
}

struct Header: HTML {

  var content: some HTML {
    header(.class("bg-blue-500 mb-8 flex flex-row gap-2 border-b border-yellow-300")) {
      a(
        .href(route: .index),
        .class("flex flex-row gap-2 bg-yellow-300 pe-2 rounded-e-lg text-blue-500 [&:hover]:text-blue-600")
      ) {
        img(.src("/images/toolbox.svg"), .width(40), .height(40), .class("py-1"))
        div(.class("flex flex-row mt-2")) {
          h2(.class("text-2xl font-extrabold")) { "HVAC-Toolbox" }
          SVG.wind
        }
      }
      nav(.class("flex flex-row gap-2 p-2 mt-2")) {
        // TODO: Add class active, to button that is the active route.
        ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 text-yellow-300 font-bold")) {
          li {
            a(.href(route: .moldRisk(.index)), .class("[&:hover]:border-b border-yellow-300")) {
              "Mold-Risk"
            }
          }
          li {
            a(.href("#"), .class("[&:hover]:border-b border-yellow-300")) {
              "Dehumidifier-Sizing"
            }
          }
        }
      }
    }
  }
}

protocol SendableHTMLDocument: HTMLDocument, Sendable {}