// SPDX-License-Identifier: Apache-2.0
//! Shared Album Viewer — the actual album, as seen by someone who
//! reached it via a private link. Intentionally read-only: no upload,
//! no edit, no comment. The owner's identity stays visible so the
//! recipient always knows whose photos they are looking at.

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

use crate::components::icons::{IconCalendar, IconLock, IconShield};
use crate::components::trust_header::PublicShellHeader;
use crate::mock::seed_photos;

#[component]
pub fn SharedAlbumViewerPage() -> impl IntoView {
    let params = use_params_map();
    let _token = Memo::new(move |_| params.with(|p| p.get("token").unwrap_or_default()));

    // For the mockup we pretend the token resolved to "Mira's first birthday".
    let title = "Mira's first birthday";
    let owner = "Sam";
    let cover = ("#d4a8a3", "#9a5e58");
    let photos = seed_photos()
        .into_iter()
        .filter(|p| p.album_id == "alb_birthday")
        .collect::<Vec<_>>();
    let photo_count = photos.len();

    view! {
        <div class="public-shell">
            <PublicShellHeader />

            <main class="public-main public-main--viewer">
                // Album banner
                <div
                    class="public-banner"
                    style=format!(
                        "background: linear-gradient(135deg, {} 0%, {} 100%);",
                        cover.0, cover.1
                    )
                >
                    <div class="public-banner__inner">
                        <div class="public-banner__owner">
                            "Shared by " <strong>{owner}</strong>
                        </div>
                        <h1 class="public-banner__title">{title}</h1>
                        <div class="public-banner__meta">
                            {photo_count} " photos · " <IconCalendar size=12 /> " May 2024"
                        </div>
                    </div>
                </div>

                // Trust strip (recipient reassurance)
                <div class="public-trust-strip">
                    <span class="badge badge--sage">
                        <IconLock size=12 />
                        "Private — not public"
                    </span>
                    <span class="badge badge--slate">
                        <IconShield size=12 />
                        "View only · download disabled"
                    </span>
                </div>

                // Photo grid
                <div class="photo-grid photo-grid--public">
                    <For
                        each=move || photos.clone()
                        key=|p| p.id.clone()
                        children=move |p| {
                            let bg = format!(
                                "background: linear-gradient(135deg, {} 0%, {} 100%);",
                                p.palette.0, p.palette.1
                            );
                            view! {
                                <figure class="photo-tile" tabindex="0">
                                    <div class="photo-tile__art" style=bg></div>
                                </figure>
                            }
                        }
                    />
                </div>

                // Footer note
                <div class="public-foot-card">
                    <h2 class="public-foot-card__title">
                        "Want to save these photos?"
                    </h2>
                    <p class="public-foot-card__body">
                        {owner} " can enable downloads for this album if you ask. "
                        "By default, downloads are off — even from a private link — so
                         the owner stays in control of where the photos travel."
                    </p>
                </div>

                <div class="public-trust">
                    <div class="public-trust__title">"How this works"</div>
                    <ul class="public-trust__list">
                        <li>
                            <IconShield size=12 />
                            "This album cannot be discovered without the link."
                        </li>
                        <li>
                            <IconShield size=12 />
                            {owner} " can revoke your access at any time."
                        </li>
                        <li>
                            <IconShield size=12 />
                            "Your viewing is not tracked for advertising or AI."
                        </li>
                    </ul>
                </div>
            </main>
        </div>
    }
}
