use leptos::prelude::*;
use crate::backend::data::User;
use crate::components::modal_box::{DialogOpener, ModalBody, ModalDialog};
use crate::components::theme::Theme;
use crate::components::user_menu::{MenuOpener, UserMenu};
use crate::locales::trl;
use crate::pages::change_pwd::ChangePassword;
use crate::pages::profile_edit::ProfileEdit;

#[component]
fn about(opener: DialogOpener) -> impl IntoView {
    view! {
        <ModalDialog opener=opener title="">
            <ModalBody>
                <img src="/rezervovator_l.svg" width="180"/> <br /><br/>
                <div>
                    {trl("Online booking application for sports facilities and service providers.")}<br/>
                    {format!(" v {}", env!("CARGO_PKG_VERSION"))}<br/><br/>
                    <div align="center">
                        <a href="https://www.rust-lang.org" target="_blank"><img src="/rust.png" height="40"/></a>"  "
                        <a href="https://leptos.dev" target="_blank"><img src="/Leptos_logo.png" height="40"/></a> <br/><br/>
                        "(c) 2023 - 2025"
                    </div>
                </div>
            </ModalBody>
        </ModalDialog>
    }
}

#[component]
fn settings_menu(opener: MenuOpener) -> impl IntoView {
    view! {
        <ul
            class=move || {
                if opener.visible() {
                    "dropdown-menu dropdown-menu-end show"
                } else {
                    "dropdown-menu dropdown-menu-end"
                }
            }
            data-bs-popper="none"
            on:mouseleave=move |_| opener.close()
        >
            <li>
                <a class="dropdown-item" href="/admin/settings">
                    <i class="bx bx-cog me-2"></i>
                    <span class="align-middle">{trl("Base settings")}</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="/admin/mail_settings">
                    <i class="bx bx-envelope me-2"></i>
                    <span class="align-middle">{trl("Mail settings")}</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="/admin/appearance">
                    <i class="bx bx-show me-2"></i>
                    <span class="align-middle">{trl("Appearance")}</span>
                </a>
            </li>
        </ul>
    }
}

#[component]
pub fn AdminPortal(children: Children) -> impl IntoView {
    let user_menu = MenuOpener::new();
    let settings_menu = MenuOpener::new();
    let (user, set_user) = signal(User::default());
    let editor = DialogOpener::new();
    let pw_changer = DialogOpener::new();
    let drawer = use_context::<MenuOpener>().expect("No drawer opener");
    let about_dlg = DialogOpener::new();
    let theme = use_context::<Theme>().expect("No theme");

    view! {
        // Dark theme is limited to the admin portal: the stylesheet is loaded only here
        <link rel="stylesheet" href="/css/dark.css" media=move || theme.mode().media()/>
        <div class="layout-wrapper layout-content-navbar">
            <div class="layout-container">
        //<!-- Menu -->

                <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                    <div class="app-brand demo">
                        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"
                            on:click = move |_| drawer.toggle()>
                            <i class="bx bx-chevron-left bx-sm align-middle"></i>
                        </a>
                        <img src="/rezervovator_l.svg" width="180"/>
                    </div>
                    <div class="menu-inner-shadow"></div>

                    <ul class="menu-inner py-1">
                        //<!-- Dashboard -->
                        <li class="menu-item">
                            <a href="/admin" class="menu-link" on:click=move |_| drawer.close()>
                                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                                <div data-i18n="Analytics">{trl("Dashboard")}</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/admin/bookings" class="menu-link" on:click=move |_| drawer.close()>
                                <i class="menu-icon tf-icons bx bx-layer"></i>
                                <div data-i18n="Analytics">{trl("Booking summary")}</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/admin/customers" class="menu-link" on:click=move |_| drawer.close()>
                                <i class="menu-icon tf-icons bx bx-face"></i>
                                <div data-i18n="Analytics">{trl("Customers")}</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link" on:click=move |_| about_dlg.show()>
                                <i class="menu-icon tf-icons bx bx-info-circle"></i>
                                <div data-i18n="Analytics">{trl("About")}</div>
                            </a>
                        </li>
                    </ul>
                </aside>
                //<!-- Layout container -->
                <div class="layout-page">
                    //<!-- Navbar -->

                      <nav
                        class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                        id="layout-navbar">
                        <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                          <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)" on:click={
                                move |_| {drawer.toggle();}
                            }>
                            <i class="bx bx-menu bx-sm"></i>
                          </a>
                        </div>

                        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                          //<!-- Title -->
                          <div class="navbar-nav align-items-center ms-auto mt-auto">
                            <div class="nav-item d-flex align-items-center mt-auto">
                              <h4 class="mt-3"><i class="bx bx-desktop fs-4 lh-0"></i>" Admin portal"</h4>
                            </div>
                          </div>
                          //<!-- /Settings -->

                          <ul class="navbar-nav flex-row align-items-center ms-auto">

                            //<!-- Theme -->
                            <li class="nav-item">
                              <a class="nav-link" href="javascript:void(0)"
                                title=move || trl(theme.mode().label())()
                                on:click=move |_| theme.cycle()>
                                <i class=move || theme.mode().icon()></i>
                              </a>
                            </li>

                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="#" on:click=move |_| settings_menu.toggle()>
                              <i class="bx bx-cog fs-3 lh-0"></i>
                                </a>
                                <SettingsMenu opener=settings_menu/>
                            </li>
                            //<!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="#"
                                on:click=move |_| user_menu.toggle()>
                                //<div class="avatar avatar-online">
                                //  <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                //</div>
                                <i class="bx bx-user fs-3 lh-0"></i>
                              </a>
                              <UserMenu opener=user_menu editor=editor pw_dialog=pw_changer user_profile=set_user/>
                            </li>
                            //<!--/ User -->
                          </ul>
                        </div>
                      </nav>

                //<!-- Content wrapper -->
                <div class="content-wrapper">
                    //<!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">
                    <ProfileEdit user={user} opener=editor/>
                    <ChangePassword user={user} opener=pw_changer/>
                    <About opener=about_dlg/>
                    {children()}
                    </div>
                </div>
                </div>
            </div>
            <div class="layout-overlay layout-menu-toggle"></div>
        </div>
    }
}