// SPDX-License-Identifier: Apache-2.0
//! Upload Privacy Review — select cleansing level and see before/after.

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

use crate::state::{AppState, CleaningLevel};

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

    let current_level = Memo::new(move |_| upload.with(|u| u.level));

    let set_level = move |level: CleaningLevel| {
        upload.update(|u| u.level = level);
    };

    let go_processing = move |_| navigate("/upload/processing", Default::default());

    view! {
        <header class="screen-head">
            <a class="btn--text" href="/upload" style="margin-bottom: 0.5rem;">"← Choose photos"</a>
            <div class="screen-head__eyebrow">"Step 2 of 3"</div>
            <h1 class="screen-head__title">"Privacy check."</h1>
            <p class="screen-head__lead">
                "Choose what stays with your photos. Whichever you pick, this runs
                on your device before anything leaves it."
            </p>
        </header>

        <div role="radiogroup" aria-label="Cleansing level" class="radio-cards">
            <CleansingOption
                level=CleaningLevel::Privacy
                title="Privacy first"
                summary="Remove date, location, and device details. Use this if you're sharing widely or with caution."
                kept="Photo, only."
                removed="Captured date · Location · Device · Original filename"
                current=current_level
                on_select=set_level.clone()
            />
            <CleansingOption
                level=CleaningLevel::Standard
                title="Standard"
                summary="Keep the photo date. Remove location and device details. The everyday choice."
                kept="Photo · Captured date"
                removed="Location · Device · Original filename"
                current=current_level
                on_select=set_level.clone()
            />
            <CleansingOption
                level=CleaningLevel::Detailed
                title="Detailed record"
                summary="Keep date and location. Useful for travel and activity logs. Device identifiers are still removed."
                kept="Photo · Captured date · Location"
                removed="Device · Original filename"
                current=current_level
                on_select=set_level.clone()
                warn=true
            />
        </div>

        // Album target
        <div class="card" style="margin-top: 0.5rem;">
            <div class="card__title">"Save to album"</div>
            <div class="field">
                <label class="field__label" for="alb">"Existing album"</label>
                <select id="alb" class="field__select">
                    <option>"Summer at home"</option>
                    <option>"Mira's first birthday"</option>
                    <option>"Morning walks"</option>
                    <option>"— Create a new album —"</option>
                </select>
                <p class="field__help">
                    "These photos remain visible only to you unless you share the album later."
                </p>
            </div>
        </div>

        <div class="action-bar">
            <a class="btn btn--ghost" href="/upload">"Back"</a>
            <button class="btn btn--sage" on:click=go_processing>
                "Start processing"
            </button>
        </div>
    }
}

#[component]
fn CleansingOption<F>(
    level: CleaningLevel,
    title: &'static str,
    summary: &'static str,
    kept: &'static str,
    removed: &'static str,
    current: Memo<CleaningLevel>,
    on_select: F,
    #[prop(default = false)] warn: bool,
) -> impl IntoView
where
    F: Fn(CleaningLevel) + Clone + 'static,
{
    let is_checked = move || current.get() == level;
    let on_select_cloned = on_select.clone();

    view! {
        <label
            class="radio-card"
            role="radio"
            tabindex="0"
            aria-checked=move || is_checked().to_string()
            on:click=move |_| on_select_cloned(level)
        >
            <span class="radio-card__indicator" aria-hidden="true"></span>
            <div>
                <div class="radio-card__title">{title}</div>
                <p class="radio-card__summary">{summary}</p>
                <div class="radio-card__chips">
                    <span class="badge badge--sage">
                        <span class="badge__dot"></span>
                        {format!("Kept: {kept}")}
                    </span>
                    <span class="badge badge--slate">
                        <span class="badge__dot"></span>
                        {format!("Removed: {removed}")}
                    </span>
                    <Show when=move || warn fallback=|| ()>
                        <span class="badge badge--amber">
                            <span class="badge__dot"></span>
                            "Keeps location — share thoughtfully"
                        </span>
                    </Show>
                </div>
            </div>
        </label>
    }
}
