// SPDX-License-Identifier: Apache-2.0
//! Library — album grid only.
//!
//! RFC 006: default state shows the grid and one primary action.
//! No activity strip, no page H1 (the nav tab already says "Library"),
//! no count or date on album cards.

use leptos::prelude::*;
use leptos_router::hooks::use_navigate;

use crate::components::icons::IconPlus;
use crate::mock::{Album, Visibility};
use crate::state::AppState;

#[component]
pub fn LibraryPage() -> impl IntoView {
    let st = AppState::get();
    let navigate = use_navigate();
    let albums = st.albums;

    let owned = Memo::new(move |_| {
        albums.with(|v| {
            v.iter()
                .filter(|a| !a.is_received)
                .cloned()
                .collect::<Vec<_>>()
        })
    });
    let received_count =
        Memo::new(move |_| albums.with(|v| v.iter().filter(|a| a.is_received).count()));

    let nav_upload = {
        let nav = navigate.clone();
        move |_| nav("/upload", Default::default())
    };
    let nav_new = {
        let nav = navigate.clone();
        move |_| nav("/albums/new", Default::default())
    };

    view! {
        // One primary action + quiet secondary text link
        <div class="lib-header">
            <button class="btn btn--sage" on:click=nav_upload>
                <IconPlus size=16 />
                "Add photos"
            </button>
            <button class="btn--text" on:click=nav_new>"New album"</button>

            // Quiet nudge — not a card, not a count badge
            <Show when=move || received_count.get() != 0>
                <a class="lib-header__nudge" href="/shared">
                    "Shared with you →"
                </a>
            </Show>
        </div>

        // Album grid
        <Show
            when=move || owned.with(|v| !v.is_empty())
            fallback=|| view! { <LibraryEmpty /> }
        >
            <ul class="album-grid" role="list">
                <For
                    each=move || owned.get()
                    key=|a| a.id.clone()
                    children=|a| view! { <AlbumTile album=a /> }
                />
            </ul>
        </Show>
    }
}

// ── Album tile: cover + title + dot ──────────────────────────────────────────
// RFC 006: cover IS the content; title + one visibility dot below.
// Count, date, and sharing links live one tap away on Album Detail.

#[component]
fn AlbumTile(album: Album) -> impl IntoView {
    let href = format!("/albums/{}", album.id);
    let bg = format!(
        "background:linear-gradient(135deg,{} 0%,{} 100%);",
        album.cover_palette.0, album.cover_palette.1
    );
    let shared = album.visibility != Visibility::OwnerOnly;
    // Dot colour mirrors visibility state; no text label needed.
    let dot_mod = if shared {
        album.visibility.modifier().replace("badge--", "dot--")
    } else {
        "dot--private".to_string()
    };
    let aria = format!("{}, {}", album.title, album.visibility.label());

    view! {
        <li class="album-tile">
            <a href=href class="album-tile__link" aria-label=aria>
                <div class="album-tile__cover" style=bg></div>
                <div class="album-tile__foot">
                    <span class="album-tile__title">{album.title}</span>
                    <span class=format!("album-tile__dot {dot_mod}") aria-hidden="true"></span>
                </div>
            </a>
        </li>
    }
}

// ── Empty state ───────────────────────────────────────────────────────────────

#[component]
fn LibraryEmpty() -> impl IntoView {
    view! {
        <div class="empty">
            <p class="empty__body">"Add your first photos to get started."</p>
            <a class="btn btn--sage" href="/upload">
                <IconPlus size=14 />
                "Add photos"
            </a>
        </div>
    }
}
