// SPDX-License-Identifier: Apache-2.0
//! Upload Start — select photos. Crucially: this screen MUST NOT start
//! a server upload. Photos stay on-device until the user explicitly
//! confirms in Privacy Review.
//!
//! After three completed uploads the page shows a compact "Quick add"
//! panel above the full educational drop-zone. The full flow remains
//! accessible below; quick-add is a shortcut, not a replacement.

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

use crate::components::icons::{IconCamera, IconShield, IconUpload};
use crate::state::AppState;
use wasm_bindgen::JsCast;

#[component]
pub fn UploadStartPage() -> impl IntoView {
    let st = AppState::get();
    let upload = st.upload;
    let navigate = use_navigate();
    let nav_next = {
        let nav = navigate.clone();
        Callback::new(move |_: leptos::ev::MouseEvent| nav("/upload/privacy", Default::default()))
    };
    // Threshold: show quick-add panel after this many completed uploads.
    let experienced = Memo::new(move |_| st.upload_count.get() >= 3);

    let on_file_change = move |ev: Event| {
        if let Some(target) = ev.target() {
            if let Ok(input) = target.dyn_into::<web_sys::HtmlInputElement>() {
                let n = input.files().map_or(0, |f| f.length()) as usize;
                if n > 0 {
                    upload.update(|d| d.selected_count = n);
                }
            }
        }
    };

    // Quick-add: on file selection, skip privacy review and go straight to processing.
    let on_quick_change: Callback<Event> = {
        let nav = navigate.clone();
        Callback::new(move |ev: Event| {
            if let Some(target) = ev.target() {
                if let Ok(input) = target.dyn_into::<web_sys::HtmlInputElement>() {
                    let n = input.files().map_or(0, |f| f.length()) as usize;
                    if n > 0 {
                        upload.update(|d| d.selected_count = n);
                        nav("/upload/processing", Default::default());
                    }
                }
            }
        })
    };

    view! {
        <header class="screen-head">
            <a class="btn--text" href="/" style="margin-bottom: 0.5rem;">"← Library"</a>
            <Show
                when=move || !experienced.get()
                fallback=|| view! {
                    <h1 class="screen-head__title">"Add photos."</h1>
                }
            >
                <div class="screen-head__eyebrow">"Step 1 of 3"</div>
                <h1 class="screen-head__title">"Add photos."</h1>
                <p class="screen-head__lead">
                    "Photos are checked on your device before anything is uploaded.
                    Nothing leaves until you say so."
                </p>
            </Show>
        </header>

        // ── Quick-add: experienced users see ONLY this path ─────────────────
        <Show when=move || experienced.get()>
            <div class="quick-add-panel">
                <div class="quick-add-panel__label">"Add photos"</div>
                <div class="quick-add-panel__row">
                    <span class="badge badge--slate">"Standard cleaning"</span>
                    <span class="quick-add-panel__change">"(your default)"</span>
                </div>
                <label class="btn btn--sage" for="files-quick">
                    <IconUpload size=14 />
                    "Pick photos"
                    <input
                        id="files-quick"
                        type="file"
                        accept="image/*"
                        multiple
                        style="display: none;"
                        on:change=move |e| on_quick_change.run(e)
                    />
                </label>
                <p class="quick-add-panel__hint">
                    <a class="btn--text" href="/upload/privacy">"Change cleaning level or target album"</a>
                </p>
            </div>
        </Show>

        // ── Full educational flow: new users only ─────────────────────────────
        <Show when=move || !experienced.get()>
        <div class="card">
            <label
                for="files"
                class="empty"
                style="display: grid; place-items: center; cursor: pointer; padding: 3rem 1rem;"
            >
                <IconCamera size=36 />
                <div class="empty__title" style="margin-top: 1rem;">"Choose photos"</div>
                <p class="empty__body">
                    "Tap or drop photos here. JPEG, PNG, HEIC, and WebP are supported.
                    Up to 50 photos at a time."
                </p>
                <span class="btn">
                    <IconUpload size=14 />
                    "Select from device"
                </span>
                <input
                    id="files"
                    type="file"
                    multiple
                    accept="image/*"
                    class="sr-only"
                    on:change=on_file_change
                />
            </label>

            <div class="trust-panel__badges" style="margin-top: 1.5rem;">
                <span class="badge badge--sage">
                    <IconShield size=12 />
                    "Processed on your device"
                </span>
                <span class="badge badge--sage">
                    <span class="badge__dot"></span>
                    "Not used for AI training"
                </span>
                <span class="badge badge--slate">
                    <span class="badge__dot"></span>
                    "Visible only to you by default"
                </span>
            </div>
        </div>

        <Show
            when=move || { upload.with(|u| u.selected_count > 0) }
            fallback=|| view! {
                <p class="text-mute" style="text-align: center; margin-top: 1.5rem;">
                    "No photos selected yet."
                </p>
            }
        >
            <div class="card card--quiet" style="margin-top: 1.5rem;">
                <div class="row-between">
                    <div>
                        <strong>{move || upload.with(|u| u.selected_count)}</strong>
                        " photos selected. They stay on your device until you choose to upload."
                    </div>
                    <button class="btn btn--text" on:click=move |_| upload.update(|u| u.selected_count = 0)>
                        "Clear selection"
                    </button>
                </div>
            </div>
        </Show>

        <div class="action-bar">
            <a class="btn btn--ghost" href="/albums">"Cancel"</a>
            <button
                class="btn"
                disabled=move || upload.with(|u| u.selected_count) == 0
                on:click=move |e| nav_next.run(e)
            >
                "Continue to privacy check"
            </button>
        </div>
        </Show>  // end full educational flow
    }
}
