use maud::{Markup, html};

pub fn guard_view(error: Option<&str>) -> Markup {
    html! {
        div class="hero min-h-screen" {
            div class="hero-content w-full justify-center p-4" {
                div class="card card-border w-full max-w-sm bg-base-200" {
                    div class="card-body p-6 items-center text-center" {
                        h1 class="card-title text-2xl font-bold justify-center text-center mb-2" {
                            "Notify"
                        }
                        p class="text-sm opacity-70 mb-4" {
                            "Enter the 6-digit PIN to access notifications"
                        }

                        @if let Some(err) = error {
                            div id="status" class="w-full mb-3" {
                                div role="alert" class="alert alert-error flex items-center" {
                                    span { (err) }
                                }
                            }
                        } @else {
                            div id="status" class="w-full" {}
                        }

                        form hx-post="/pin" hx-target="#main" hx-swap="innerHTML" class="flex flex-col items-center gap-4 w-full" {
                            label class="otp" {
                                span {}
                                span {}
                                span {}
                                span {}
                                span {}
                                span {}
                                input type="text"
                                      name="pin"
                                      autocomplete="one-time-code"
                                      inputmode="numeric"
                                      maxlength="6"
                                      pattern="[0-9]{6}"
                                      required
                                      autofocus
                                      oninput="if(this.value.length === 6) this.form.requestSubmit();";
                            }

                            button type="submit" class="btn btn-primary btn-lg btn-block" {
                                "Unlock"
                            }
                        }
                    }
                }
            }
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_guard_view_contains_otp_component() {
        let html_str = guard_view(None).into_string();
        assert!(html_str.contains("class=\"otp\""));
        assert!(html_str.contains("maxlength=\"6\""));
        assert!(html_str.contains("pattern=\"[0-9]{6}\""));
        assert!(html_str.contains(
            "<span></span><span></span><span></span><span></span><span></span><span></span>"
        ));
        assert!(html_str.contains("hx-post=\"/pin\""));
    }

    #[test]
    fn test_guard_view_with_error() {
        let html_str = guard_view(Some("Invalid PIN")).into_string();
        assert!(html_str.contains("alert-error"));
        assert!(html_str.contains("Invalid PIN"));
    }
}