// SPDX-License-Identifier: Apache-2.0
//! Shared Album Entry — what a non-account recipient sees when they
//! open a private link. The page is intentionally minimal: identify
//! the owner, explain the boundary, accept a password if required.

use leptos::ev::Event;
use leptos::prelude::*;
use leptos_router::hooks::{use_navigate, use_params_map};
use wasm_bindgen::JsCast;

use crate::components::icons::{IconKey, IconLock, IconShield};
use crate::components::trust_header::PublicShellHeader;
use crate::state::{AppState, ToastKind};

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

    let password = RwSignal::new(String::new());
    let attempted = RwSignal::new(false);
    let pw_required = true; // mockup: assume password protection

    let on_password = move |ev: Event| {
        if let Some(target) = ev.target() {
            if let Ok(input) = target.dyn_into::<web_sys::HtmlInputElement>() {
                password.set(input.value());
            }
        }
    };

    let nav_view: Callback<()> = Callback::new(move |_| {
        attempted.set(true);
        if pw_required && password.with(|p| p.trim().is_empty()) {
            st.toast("Please enter the password.", ToastKind::Neutral);
            return;
        }
        let nav = navigate.clone();
        nav(&format!("/share/{}/view", token.get()), Default::default());
    });

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

            <main class="public-main">
                <div class="public-card">
                    <div class="public-card__eyebrow">"A private album from"</div>
                    <h1 class="public-card__owner">"Sam"</h1>
                    <p class="public-card__lead">
                        "You have been given a private link to an album.
                         Only people with the link — and password, if set — can see it.
                         There is no public version of this album."
                    </p>

                    <Show
                        when=move || pw_required
                        fallback=move || view! {
                            <button class="btn btn--lg btn--sage" on:click=move |_| nav_view.run(())>
                                "Enter the album"
                            </button>
                        }
                    >
                        <div class="form-block" style="margin-top: 1.5rem;">
                            <label class="form-block__label" for="share-pw">
                                <IconLock size=14 />
                                " Password"
                            </label>
                            <p class="form-block__hint">
                                "The person who shared the album will have sent you
                                 the password through a different channel."
                            </p>
                            <input
                                id="share-pw"
                                class="form-block__input"
                                type="password"
                                value=move || password.get()
                                on:input=on_password
                                placeholder="Enter the password"
                                autocomplete="off"
                            />
                            <Show when=move || attempted.get() && password.with(|p| p.trim().is_empty())>
                                <p style="color: var(--coral); margin-top: 0.5rem; font-size: 0.92rem;">
                                    "Please enter the password."
                                </p>
                            </Show>
                        </div>

                        <button class="btn btn--lg btn--sage" on:click=move |_| nav_view.run(()) style="margin-top: 1rem;">
                            <IconKey size=16 />
                            "Unlock and enter"
                        </button>
                    </Show>
                </div>

                <div class="public-trust">
                    <div class="public-trust__title">"What this means"</div>
                    <ul class="public-trust__list">
                        <li>
                            <IconShield size=12 />
                            "This page is not findable by search engines."
                        </li>
                        <li>
                            <IconShield size=12 />
                            "Sam can revoke your access at any time."
                        </li>
                        <li>
                            <IconShield size=12 />
                            "You don't need an account to view it."
                        </li>
                        <li>
                            <IconShield size=12 />
                            "Your viewing is not used for ad targeting or AI training."
                        </li>
                    </ul>
                </div>

                <p class="public-foot">
                    "Did not expect to receive this link? You can close this tab safely."
                </p>
            </main>
        </div>
    }
}
