import Dependencies
import Elementary
import Foundation
import SharedModels

struct UserDetail: HTML, Sendable {
  @Dependency(\.dateFormatter) var dateFormatter

  let user: User?

  var content: some HTML {
    Float(shouldDisplay: user != nil, resetURL: "/users") {
      if let user {
        form(
          .hx.post(route: .users(.id(user.id))),
          .hx.swap(.outerHTML),
          .hx.target(.user(.row(id: user.id))),
          .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
        ) {
          div(.class("row")) {
            makeLabel(for: "username", value: "Username:")
            input(.class("col-4"), .type(.text), .id("username"), .name("username"), .value(user.username), .required)
            makeLabel(for: "email", value: "Email:")
            input(.class("col-4"), .type(.email), .id("email"), .name("email"), .value(user.email), .required)
          }
          div(.class("row")) {
            span(.class("label col-2")) { "Created:" }
            span(.class("date col-4")) { dateFormatter.formattedDate(user.createdAt) }
            span(.class("label col-2")) { "Updated:" }
            span(.class("date col-4")) { dateFormatter.formattedDate(user.updatedAt) }
          }
          div(.class("btn-row user-buttons")) {
            button(
              .type(.submit),
              .class("btn-secondary")
            ) { "Update" }
            Button.danger { "Delete" }
              .attributes(
                .hx.delete(route: .users(.id(user.id))),
                .hx.trigger(.event(.click)),
                .hx.swap(.outerHTML),
                .hx.target(.user(.row(id: user.id))),
                .hx.confirm("Are you sure you want to delete this user?"),
                .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
              )
          }
        }
      }
    }
  }

  func makeLabel(
    for name: String,
    value: String
  ) -> some HTML {
    label(.for(name), .class("col-2")) { span(.class("label")) { value } }
  }

  func row(_ label: String, _ value: String) -> some HTML<HTMLTag.tr> {
    tr {
      td(.class("label")) { h3 { label } }
      td { h3 { value } }
    }
  }
}

extension DateFormatter {

  func formattedDate(_ date: Date?) -> String {
    guard let date else { return "" }
    return string(from: date)
  }
}