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

use crate::api::{self, Me};
use crate::app::AuthPhase;

#[component]
pub fn ShellView(
    me: ReadSignal<Option<Me>>,
    set_me: WriteSignal<Option<Me>>,
    set_phase: WriteSignal<AuthPhase>,
) -> impl IntoView {
    let on_logout = move |_| {
        spawn_local(async move {
            let _ = api::logout().await;
            set_me.set(None);
            set_phase.set(AuthPhase::Login);
        });
    };

    view! {
        <div class="layout">
            <header class="topbar">
                <div class="brand">"📂 filebrowser-ng"</div>
                <div class="topbar-right">
                    {move || {
                        let Some(m) = me.get() else {
                            return None;
                        };
                        let u = m.user?;
                        let is_admin = u.is_admin;
                        Some(
                            view! {
                                <span class="user-badge">
                                    {u.name}
                                    <Show when=move || is_admin>
                                        <span class="badge">"admin"</span>
                                    </Show>
                                </span>
                            }
                            .into_view()
                            .into_any(),
                        )
                    }}
                    <button class="btn" on:click=on_logout>"Log out"</button>
                </div>
            </header>
            <main class="content">
                <div class="card welcome-card">
                    {move || {
                        let Some(m) = me.get() else {
                            return None;
                        };
                        let u = m.user?;
                        Some(view! { "Welcome, " {u.name} "!" }.into_view().into_any())
                    }}
                    <p class="muted">
                        "You're signed in — auth, sessions and your configured
                        folders are working. The file browser itself arrives in
                        the next milestone."
                    </p>
                    <h2 class="section-title">"Your folders"</h2>
                    {move || {
                        let Some(m) = me.get() else {
                            return None;
                        };
                        Some(
                            view! {
                                <ul class="roots">
                                    {m.roots.iter().map(|r| {
                                        let name = r.name.clone();
                                        let path = r.path.clone();
                                        let mode = r.mode.clone();
                                        view! {
                                            <li>
                                                <span class="root-name">{name}</span>
                                                <span class="muted">{path}</span>
                                                <span class="badge">
                                                    {if mode == "rw" {
                                                        "read-write"
                                                    } else {
                                                        "read-only"
                                                    }}
                                                </span>
                                            </li>
                                        }
                                    }).collect::<Vec<_>>()}
                                </ul>
                            }
                            .into_view()
                            .into_any(),
                        )
                    }}
                </div>
            </main>
        </div>
    }
}