use maud::DOCTYPE;

pub mod auth;
pub mod dashboard;
pub mod session_auth;

const BRAND: &str = "#818cf8"; // A beautiful indigo color

pub fn render_layout(main_content: &maud::Markup, username: Option<&str>) -> maud::Markup {
    maud::html! {
        (DOCTYPE)
        html class="h-100" {
            head {
                meta charset="utf-8";
                meta name="viewport" content="width=device-width, initial-scale=1";
                title { "Later Notes" }
                link rel="icon" type="image/svg+xml" href="/assets/later.svg";
                link rel="stylesheet" href="/assets/t.css";
                script src="/assets/h.js" {}
                script src="/assets/hx-response-targets.js" {}
                style {
                     "body.bg-washed-blue.black { background-color: #0f172a !important; color: #f1f5f9 !important; }"
                     "* { border-radius: 0 !important; }"
                     ".bg-white { background-color: #1e293b !important; color: #f1f5f9 !important; }"
                     ".b--black-10, .b--black-20, .b--black-30 { border-color: #334155 !important; }"
                     "nav { border-bottom: 1px solid #334155 !important; }"
                     ".bg-brand { background-color: #0f172a !important; }"
                     ".brand { color: " (BRAND) " !important; }"
                     "input, textarea, select { background-color: #0f172a !important; color: #f8fafc !important; border: 1px solid #334155 !important; transition: border-color 0.2s, box-shadow 0.2s; }"
                     "input:focus, textarea:focus, select:focus { border-color: #818cf8 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important; }"
                     ".black-70 { color: #94a3b8 !important; }"
                     ".black-60 { color: #cbd5e1 !important; }"
                     ".black-30 { color: #475569 !important; }"
                     ".gray { color: #94a3b8 !important; }"
                     ".btn-brand { background: " (BRAND) " !important; color: white !important; border: none !important; cursor: pointer !important; padding: 10px 20px !important; font-weight: 600 !important; box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2) !important; transition: all 0.2s ease !important; display: inline-block; text-align: center; }"
                     ".btn-brand:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(129, 140, 248, 0.35) !important; opacity: 1 !important; }"
                     ".btn-brand:active { transform: translateY(1px) !important; }"
                     ".btn-outline { background-color: transparent !important; color: " (BRAND) " !important; border: 1px solid " (BRAND) " !important; cursor: pointer !important; padding: 10px 20px !important; transition: all 0.2s ease !important; }"
                     ".btn-outline:hover { background-color: #1e1b4b !important; color: white !important; }"
                     ".b--brand { border-color: " (BRAND) " !important; }"
                     ".hover-bg-brand-light:hover { background-color: #1e293b !important; }"
                     ".note-card { background-color: #1e293b !important; border: 1px solid #334155 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }"
                     ".note-card:hover { border-color: " (BRAND) " !important; transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; }"
                     ".selection-card { background-color: #1e293b !important; border: 1px solid #334155 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }"
                     ".selection-card:hover { border-color: " (BRAND) " !important; }"
                     ".selected-note { border: 2px solid " (BRAND) " !important; background-color: #1e1b4b !important; }"
                     ".bg-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 197, 253, 0.15)) !important; color: #60a5fa !important; }"
                     ".bg-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(110, 231, 183, 0.15)) !important; color: #34d399 !important; }"
                     ".bg-light-blue { background-color: #1e1b4b !important; color: #a5b4fc !important; }"
                     ".bg-light-gray { background-color: #334155 !important; color: #cbd5e1 !important; }"
                     "input::placeholder, textarea::placeholder { color: #475569 !important; }"
                     "::-webkit-scrollbar { width: 8px; height: 8px; }"
                     "::-webkit-scrollbar-track { background: #0f172a; }"
                     "::-webkit-scrollbar-thumb { background: #334155; }"
                     "::-webkit-scrollbar-thumb:hover { background: #475569; }"
                }
            }
            body hx-ext="response-targets" class="w-100 sans-serif ma0 bg-washed-blue black flex flex-column" style="min-height: 100vh;" {
                nav class="dt w-100 bg-brand bb" style="border-bottom: 2px solid #172554;" {
                    div class="dtc v-mid pa3" {
                        a href="/" class="link white hover-white no-underline fw6 f3 flex items-center" {
                            img src="/assets/later.svg" alt="Later logo" style="width: 28px; height: 28px; margin-right: 0.5rem;";
                            "Later Notes"
                        }
                    }
                    div class="dtc v-mid tr pa3" {
                        @match username {
                            Some(name) => {
                                span class="white-80 f6 mr3" { "Logged in as " b { (name) } }
                                form method="POST" action="/auth/logout" class="dib ma0" {
                                    button
                                        type="submit"
                                        class="link white hover-white no-underline f6 bg-transparent bn pointer pa0 underline"
                                    {
                                        "Logout"
                                    }
                                }
                            }
                            None => {
                                a href="/auth/login" class="link white hover-white no-underline f6" {
                                    "Login"
                                }
                            }
                        }
                    }
                }
                main id="feature" class="flex-auto flex flex-column" style="padding: 1.5rem 1rem;" {
                    (main_content)
                }
                footer class="tc pa4 black-40 f6 mt-auto" {}
            }
        }
    }
}

pub fn render_error(message: &str) -> maud::Markup {
    maud::html! {
        div class="ba br2 pa3 mv3" style="background-color: rgba(239, 68, 68, 0.1); border-color: #ef4444;" {
            p class="f6 ma0" style="color: #f87171;" { (message) }
        }
    }
}

pub fn render_success(message: &str) -> maud::Markup {
    maud::html! {
        div class="ba br2 pa3 mv3" style="background-color: rgba(16, 185, 129, 0.1); border-color: #10b981;" {
            p class="f6 ma0" style="color: #34d399;" { (message) }
        }
    }
}