// SPDX-License-Identifier: Apache-2.0
//! Upload Complete — reassurance + next action.

use leptos::prelude::*;

use crate::components::icons::{IconCheck, IconShare, IconShield, IconUpload};
use crate::state::AppState;

#[component]
pub fn UploadCompletePage() -> impl IntoView {
    let st = AppState::get();
    let total = st.upload.with(|u| u.selected_count.max(1));

    // Count this as a completed upload so the start page can offer
    // quick-add after the user has been through the full flow enough times.
    Effect::new(move |_| {
        st.upload_count.update(|n| *n += 1);
    });

    view! {
        <header class="screen-head">
            <div class="row" style="gap: 0.5rem; align-items: center; margin-bottom: 1rem;">
                <span
                    style="width: 44px; height: 44px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-2); display: grid; place-items: center;"
                    aria-hidden="true"
                >
                    <IconCheck size=22 />
                </span>
                <div class="screen-head__eyebrow" style="margin-bottom: 0;">"Saved"</div>
            </div>
            <h1 class="screen-head__title">
                {format!("{total} photos saved.")}
            </h1>
            <p class="screen-head__lead">
                "These photos are visible only to you unless you share the album."
            </p>
        </header>

        <div class="card" style="margin-bottom: 1.5rem;">
            <div class="row" style="gap: 1.5rem; flex-wrap: wrap;">
                <div>
                    <div class="text-mono text-xs text-mute" style="text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;">"Album"</div>
                    <div style="font-family: var(--display); font-size: 1.1rem; font-weight: 500;">"Summer at home"</div>
                </div>
                <div>
                    <div class="text-mono text-xs text-mute" style="text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;">"Visibility"</div>
                    <span class="badge badge--slate">
                        <span class="badge__dot"></span>
                        "Only you"
                    </span>
                </div>
                <div>
                    <div class="text-mono text-xs text-mute" style="text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;">"Cleaning level"</div>
                    <div>"Standard"</div>
                </div>
                <div>
                    <div class="text-mono text-xs text-mute" style="text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;">"AI training"</div>
                    <span class="badge badge--sage">
                        <IconShield size=12 />
                        "Not used"
                    </span>
                </div>
            </div>
        </div>

        <div class="row" style="gap: 0.75rem; flex-wrap: wrap;">
            <a class="btn" href="/albums/alb_summer">"Open album"</a>
            <a class="btn btn--ghost" href="/albums/alb_summer/share">
                <IconShare size=14 />
                "Share with someone"
            </a>
            <a class="btn btn--ghost" href="/upload">
                <IconUpload size=14 />
                "Add more"
            </a>
        </div>
    }
}
