import Elementary
import ElementaryHTMX
import Routes
import Styleguide

struct DehumidifierSizeForm: HTML {
  var content: some HTML {
    FormHeader(label: "Dehumidifier Sizing Calculator", svg: .droplets)
    form(
      // Using index to get the correct path, but really uses the `submit` end-point.
      .hx.post(route: .dehumidifierSize(.index)),
      .hx.target("#result")
    ) {
      div(.class("space-y-6")) {
        LabeledContent(label: "Latent Load (BTU/h)") {
          Input(id: "latentLoad", placeholder: "Latent load from Manual-J")
            .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus, .required)
        }

        LabeledContent(label: "Indoor Temperature (°F)") {
          Input(id: "temperature", placeholder: "Indoor dry bulb temperature")
            .attributes(.type(.number), .step("0.1"), .min("0.1"), .required)
        }

        LabeledContent(label: "Indoor Humdity (%)") {
          Input(id: "humidity", placeholder: "Relative humidity")
            .attributes(.type(.number), .step("0.1"), .min("0.1"), .required)
        }

        div {
          SubmitButton(label: "Calculate Dehumidifier Size")
        }
      }
    }
    div(.id("result")) {}
  }
}

struct DehumidifierSizeResult: HTML {
  let response: DehumidifierSize.Response

  var content: some HTML {
    ResultContainer(reset: .dehumidifierSize(.index)) {
      div(.class("""
        p-2 rounded-lg shadow-lg bg-blue-500
        """
      )) {
        p { "Recommended Size: \(response.recommendedSize)" }
      }

      // Display warnings, if applicable
      if response.warnings.count > 0 {
        div(.class("w-full mt-8 p-4 rounded-lg shadow-lg text-amber-500 bg-amber-200 border border-amber-500")) {
          span(.class("font-semibold mb-4 border-b")) { "Warning\(response.warnings.count > 1 ? "s:" : ":")" }
          ul(.class("list-disc mx-10")) {
            for warning in response.warnings {
              li { warning }
            }
          }
        }
      }

      Note {
        """
        Sizing is based on continuous operation at rated conditions. Actual performance will vary based on
        operating conditions. Consider Energy Star rated units for better efficiency. For whole-house
        applications, ensure proper air distribution and drainage.
        """
      }
    }
  }
}

// <div className = "p-4 bg-white rounded-lg shadow-sm">
// <p className = Recommended < "text-sm text-gray-600 mb-2" Size: </p>
// <a
// href = { result.recommendedSize.url }
// target = "_blank"
// rel = "noopener noreferrer"
// className = "block p-4 bg-blue-100 rounded-lg hover:bg-blue-200 transition-colors group"
// >
// <div className = "flex items-center justify-between">
// <div>
//   <span className = "text-2xl font-bold text-blue-700">
//   { result.recommendedSize.size } PPD
//   </span>
//   <p className = "text-sm text-blue-600 mt-1">
//   Click to view available models →
//   </p>
//   </div>
//   <div className = "w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center group-hover:bg-blue-300 transition-colors">
//   <Droplets className = "w-6 h-6 text-blue-700" />
//   </div>
//   </div>
//   </a>
//   </div >