use maud::{html, PreEscaped};
use peach_lib::sbot::SbotStatus;

use crate::{templates, utils::theme, SERVER_CONFIG};

/// Read the state of the go-sbot process and define status-related
/// elements accordingly.
fn render_status_elements<'a>() -> (&'a str, &'a str, &'a str) {
    // retrieve go-sbot systemd process status
    let sbot_status = SbotStatus::read();

    // conditionally render the center circle class, center circle text and
    // status circle class color based on the go-sbot process state
    if let Ok(status) = sbot_status {
        if status.state == Some("active".to_string()) {
            ("circle-success", "^_^", "border-success")
        } else if status.state == Some("inactive".to_string()) {
            ("circle-warning", "z_z", "border-warning")
        } else {
            ("circle-error", "x_x", "border-danger")
        }
    } else {
        ("circle-error", "x_x", "border-danger")
    }
}

/// Render the URL for the status element (icon / link).
///
/// If the application is running in standalone mode then the element links
/// directly to the Scuttlebutt status page. If not, it links to the device
/// status page.
fn render_status_url<'a>() -> &'a str {
    if SERVER_CONFIG.standalone_mode {
        "/status/scuttlebutt"
    } else {
        "/status"
    }
}

/// Home template builder.
pub fn build_template() -> PreEscaped<String> {
    let (circle_color, center_circle_text, circle_border) = render_status_elements();
    let status_url = render_status_url();

    // render the home template html
    let home_template = html! {
        (PreEscaped("<!-- RADIAL MENU -->"))
        div class="grid" {
            (PreEscaped("<!-- top-left -->"))
            (PreEscaped("<!-- PEERS LINK AND ICON -->"))
            a class="top-left" href="/scuttlebutt/peers" title="Scuttlebutt Peers" {
                div class="circle circle-small border-circle-small border-ssb" {
                    img class="icon-medium" src="/icons/users.svg";
                }
            }
            (PreEscaped("<!-- top-middle -->"))
            (PreEscaped("<!-- CURRENT USER LINK AND ICON -->"))
            a class="top-middle" href="/scuttlebutt/profile" title="Profile" {
                div class="circle circle-small border-circle-small border-ssb" {
                    img class="icon-medium" src="/icons/user.svg";
                }
            }
            (PreEscaped("<!-- top-right -->"))
            (PreEscaped("<!-- MESSAGES LINK AND ICON -->"))
            a class="top-right" href="/scuttlebutt/private" title="Private Messages" {
                div class="circle circle-small border-circle-small border-ssb" {
                    img class="icon-medium" src="/icons/envelope.svg";
                }
            }
            (PreEscaped("<!-- middle -->"))
            a class="middle" {
                div class={ "circle circle-large " (circle_color) } {
                    p style="font-size: 4rem; color: var(--near-black);" {
                        (center_circle_text)
                    }
                }
            }
            (PreEscaped("<!-- bottom-left -->"))
            (PreEscaped("<!-- SYSTEM STATUS LINK AND ICON -->"))
            a class="bottom-left" href=(status_url) title="Status" {
                div class={ "circle circle-small border-circle-small " (circle_border) } {
                    img class="icon-medium" src="/icons/heart-pulse.svg";
                }
            }
            /*
            TODO: render the path of the status circle button based on the mode
            {%- if standalone_mode == true -%}
            <a class="bottom-left" href="/status/scuttlebutt" title="Status">
            {% else -%}
            <a class="bottom-left" href="/status" title="Status">
            {%- endif -%}
                */
            (PreEscaped("<!-- bottom-middle -->"))
            (PreEscaped("<!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->"))
            a class="bottom-middle" href="/guide" title="Guide" {
                div class="circle circle-small border-circle-small border-info" {
                    img class="icon-medium" src="/icons/book.svg";
                }
            }
            (PreEscaped("<!-- bottom-right -->"))
            (PreEscaped("<!-- SYSTEM SETTINGS LINK AND ICON -->"))
            a class="bottom-right" href="/settings" title="Settings" {
                div class="circle circle-small border-circle-small border-settings" {
                    img class="icon-medium" src="/icons/cog.svg";
                }
            }
        }
    };

    // wrap the nav bars around the home template content
    // title is "" and back button link is `None` because this is the homepage
    let body = templates::nav::build_template(home_template, "", None);

    // query the current theme so we can pass it into the base template builder
    let theme = theme::get_theme();

    // render the base template with the provided body
    templates::base::build_template(body, theme)
}