use maud::{DOCTYPE, Markup, html};

pub fn page_shell(title: &str, active_tab: &str, content: &Markup) -> Markup {
    html! {
        (DOCTYPE)
        html lang="en" {
            head {
                meta charset="utf-8";
                meta name="viewport" content="width=device-width, initial-scale=1.0";
                title { (title) }
                link rel="stylesheet" href="/assets/daisyui.css";
                link rel="stylesheet" href="/assets/app.css";
                script src="/assets/h.js" {}
                script src="/assets/hx-ws.js" {}
            }
            body {
                header class="cottage-navbar" {
                    a href="/" class="brand-badge" hx-get="/pokedex" hx-target="#main-content" hx-push-url="/" {
                        div class="brand-icon" { "🌿" }
                        div {
                            h1 class="brand-title" { "Pokédex" }
                            p class="brand-subtitle" { "FireRed & LeafGreen Edition" }
                        }
                    }

                    nav class="nav-tabs-group" {
                        a
                            href="/"
                            class={"cottage-tab " (if active_tab == "pokedex" { "active" } else { "" })}
                            hx-get="/pokedex"
                            hx-target="#main-content"
                            hx-push-url="/" {
                            "📖 Pokédex"
                        }
                        a
                            href="/battler"
                            class={"cottage-tab " (if active_tab == "battler" { "active" } else { "" })}
                            hx-get="/battler"
                            hx-target="#main-content"
                            hx-push-url="/battler" {
                            "⚔️ Battler"
                        }
                        a
                            href="/debug"
                            class={"cottage-tab " (if active_tab == "debug" { "active" } else { "" })}
                            hx-get="/debug"
                            hx-target="#main-content"
                            hx-push-url="/debug" {
                            "🛠️ Debug"
                        }
                    }
                }

                main id="main-content" class="min-h-screen" {
                    (content)
                }

                // Modal placeholder container
                div id="detail-modal-container" {}
            }
        }
    }
}