//! The signed-in shell: left sidebar (folders + manage tabs) and the topbar.

use leptos::prelude::*;
use wasm_bindgen_futures::spawn_local;

use crate::api::{self, Me};
use crate::components::icon::Icon;
use crate::components::logo::Logo;
use crate::components::toast::{ToastView, provide_toast};
use crate::icons::IconName;
use crate::router::{Location, Section, navigate};
use crate::views::admin::{SettingsView, UsersView};
use crate::views::browser::{Browser, effective_root};
use crate::views::shares::SharesView;

/// Whether the signed-in user has admin rights.
fn is_admin_of(me: &Option<Me>) -> bool {
    me.as_ref()
        .and_then(|m| m.user.as_ref())
        .is_some_and(|u| u.is_admin)
}

#[component]
pub fn ShellView(
    me: ReadSignal<Option<Me>>,
    set_me: WriteSignal<Option<Me>>,
    set_phase: WriteSignal<crate::app::AuthPhase>,
    loc: ReadSignal<Location>,
    theme: ReadSignal<crate::theme::Theme>,
    set_theme: WriteSignal<crate::theme::Theme>,
) -> impl IntoView {
    let toast = provide_toast();
    // True while the off-canvas sidebar is open (narrow screens only).
    let (nav_open, set_nav_open) = signal(false);

    // A non-admin cannot open the admin sections. If the URL points at one
    // (deep link, hand-typed, or left over from a demotion), redirect to the
    // files view so the URL, the content fallback, and the sidebar highlight
    // all agree.
    {
        let me2 = me;
        let loc2 = loc;
        Effect::new(move |_| {
            let Some(m) = me2.get() else {
                return;
            };
            let admin = m.user.as_ref().is_some_and(|u| u.is_admin);
            if admin {
                return;
            }
            let section = loc2.get().section;
            if section == Section::Users || section == Section::Settings {
                navigate(&Location::root());
            }
        });
    }

    let on_logout = move |_| {
        spawn_local(async move {
            let _ = api::logout().await;
            set_me.set(None);
            set_phase.set(crate::app::AuthPhase::Login);
        });
    };

    // Navigate to a manage section (each has its own URL) and, on narrow
    // screens, close the off-canvas sidebar.
    let open_section = move |section: Section| {
        set_nav_open.set(false);
        navigate(&Location {
            root_id: None,
            path: Vec::new(),
            share_token: None,
            section,
        });
    };

    view! {
        <div class="layout">
            <header class="topbar">
                <div class="topbar-left">
                    <button
                        class="icon-btn nav-toggle"
                        title="Menu"
                        aria-label="Open menu"
                        on:click=move |_| set_nav_open.update(|v| *v = !*v)
                    >
                        <Icon name=IconName::Menu class="ic-btn".to_string()/>
                    </button>
                    <div class="brand">
                        <Logo/>
                        <span class="brand-name">"filebrowser-ng"</span>
                    </div>
                </div>
            </header>
            {move || {
                if nav_open.get() {
                    view! {
                        <div class="nav-backdrop" on:click=move |_| set_nav_open.set(false)></div>
                    }
                    .into_view()
                    .into_any()
                } else {
                    view! {}.into_any()
                }
            }}
            <div class="body-row">
                <aside
                    class=move || {
                        if nav_open.get() {
                            "sidebar open".to_string()
                        } else {
                            "sidebar".to_string()
                        }
                    }
                >
                    <nav class="nav">
                    {move || {
                        let Some(u) = me.get().and_then(|m| m.user) else {
                            return {
                                view! {}.into_any()
                            };
                        };
                        view! {
                            <div class="sidebar-user">{u.name.clone()}</div>
                        }
                        .into_view()
                        .into_any()
                    }}
                    <div class="nav-section">
                        <div class="nav-section-label">"Files"</div>
                        {move || {
                            let Some(m) = me.get() else {
                                return {
                                    view! {}.into_any()
                                };
                            };
                            let cur_root = effective_root(&m.roots, &loc.get()).map(|r| r.id);
                            m.roots
                                .iter()
                                .map(|r| {
                                    let id = r.id;
                                    let name = r.name.clone();
                                    let path = r.path.clone();
                                    let ro = !r.mode.is_writable();
                                    view! {
                                        <button
                                            class="nav-tab"
                                            class:active=move || {
                                                loc.get().section == Section::Files
                                                    && cur_root == Some(id)
                                            }
                                            title=move || {
                                                if path == "." {
                                                    "/".to_string()
                                                } else {
                                                    path.clone()
                                                }
                                            }
                                            on:click=move |_| {
                                                set_nav_open.set(false);
                                                navigate(&Location {
                                                    root_id: Some(id),
                                                    path: vec![],
                                                    share_token: None,
                                                    section: Section::Files,
                                                });
                                            }
                                        >
                                            <Icon name=IconName::Folder class="ic-tab".to_string()/>
                                            <span class="nav-tab-name">{name}</span>
                                            {move || {
                                                if ro {
                                                    view! { <span class="nav-tab-note">"ro"</span> }
                                                        .into_view()
                                                        .into_any()
                                                } else {
                                                    view! {}.into_any()
                                                }
                                            }}
                                        </button>
                                    }
                                })
                                .collect::<Vec<_>>()
                                .into_view()
                                .into_any()
                        }}
                    </div>
                    <div class="nav-section">
                        <div class="nav-section-label">"Manage"</div>
                        <button
                            class="nav-tab"
                            class:active=move || loc.get().section == Section::Shares
                            on:click=move |_| open_section(Section::Shares)
                        >
                            <Icon name=IconName::Share class="ic-tab".to_string()/>
                            <span class="nav-tab-name">"Shares"</span>
                        </button>
                        <Show when=move || is_admin_of(&me.get())>
                            <button
                                class="nav-tab"
                                class:active=move || loc.get().section == Section::Users
                                on:click=move |_| open_section(Section::Users)
                            >
                                <Icon name=IconName::User class="ic-tab".to_string()/>
                                <span class="nav-tab-name">"Users"</span>
                            </button>
                            <button
                                class="nav-tab"
                                class:active=move || loc.get().section == Section::Settings
                                on:click=move |_| open_section(Section::Settings)
                            >
                                <Icon name=IconName::Settings class="ic-tab".to_string()/>
                                <span class="nav-tab-name">"Settings"</span>
                            </button>
                        </Show>
                    </div>
                    </nav>
                    <div class="sidebar-footer">
                        <button
                            class="nav-tab sidebar-action"
                            title=move || format!("Theme: {} (click to switch)", theme.get().label())
                            on:click=move |_| {
                                let next = theme.get().next();
                                set_theme.set(next);
                                next.store();
                                next.apply();
                            }
                        >
                            {move || {
                                view! {
                                    <Icon name=theme.get().icon() class="ic-tab".to_string()/>
                                }
                            }}
                            <span class="nav-tab-name">{move || theme.get().name().to_string()}</span>
                        </button>
                        <button
                            class="nav-tab sidebar-action logout"
                            title="Log out"
                            on:click=move |_| on_logout(())
                        >
                            <Icon name=IconName::Logout class="ic-tab".to_string()/>
                            <span class="nav-tab-name">"Log out"</span>
                        </button>
                        <div class="sidebar-version">
                            {format!("filebrowser-ng v{}", env!("CARGO_PKG_VERSION"))}
                        </div>
                    </div>
                </aside>
                <main class="content">
                    {move || {
                        let admin = is_admin_of(&me.get());
                        match loc.get().section {
                            Section::Files => view! { <Browser me=me loc=loc/> }
                                .into_view()
                                .into_any(),
                            Section::Shares => view! { <SharesView/> }
                                .into_view()
                                .into_any(),
                            Section::Users if admin => {
                                view! { <UsersView me=me/> }.into_view().into_any()
                            }
                            Section::Settings if admin => {
                                view! { <SettingsView set_me=set_me/> }.into_view().into_any()
                            }
                            // Not an admin anymore (e.g. permissions changed):
                            // fall back to the files view.
                            _ => view! { <Browser me=me loc=loc/> }
                                .into_view()
                                .into_any(),
                        }
                    }}
                </main>
            </div>
            <ToastView toast=toast/>
        </div>
    }
}