use dioxus::prelude::*;

#[component]
pub fn Login(
  on_login: EventHandler<(String, String)>,
  #[props(default)] error: Option<String>,
  #[props(default = false)] loading: bool,
) -> Element {
  let mut username = use_signal(String::new);
  let mut password = use_signal(String::new);

  let on_submit = {
    move |_| {
      let u = username.read().clone();
      let p = password.read().clone();
      if !u.is_empty() && !p.is_empty() {
        on_login.call((u, p));
      }
    }
  };

  let on_key = move |e: KeyboardEvent| {
    if e.key() == Key::Enter {
      let u = username.read().clone();
      let p = password.read().clone();
      if !u.is_empty() && !p.is_empty() {
        on_login.call((u, p));
      }
    }
  };

  rsx! {
      div { class: "login-container",
          div { class: "login-card",
              h2 { class: "login-title", "Pinakes" }
              p { class: "login-subtitle", "Sign in to continue" }

              if let Some(ref err) = error {
                  div { class: "login-error", "{err}" }
              }

              div { class: "login-form",
                  div { class: "form-group",
                      label { class: "form-label", "Username" }
                      input {
                          r#type: "text",
                          placeholder: "Enter username",
                          value: "{username}",
                          disabled: loading,
                          oninput: move |e: Event<FormData>| username.set(e.value()),
                          onkeypress: on_key,
                      }
                  }
                  div { class: "form-group",
                      label { class: "form-label", "Password" }
                      input {
                          r#type: "password",
                          placeholder: "Enter password",
                          value: "{password}",
                          disabled: loading,
                          oninput: move |e: Event<FormData>| password.set(e.value()),
                          onkeypress: on_key,
                      }
                  }
                  button {
                      class: "btn btn-primary login-btn",
                      disabled: loading,
                      onclick: on_submit,
                      if loading {
                          "Signing in..."
                      } else {
                          "Sign In"
                      }
                  }
              }
          }
      }
  }
}