// SPDX-License-Identifier: Apache-2.0
//! Me — account, data, preferences, accessibility, security, about.
//!
//! RFC 006: section names + one-sentence descriptions only.
//! Each section expands in-place (accordion) to reveal its controls.

use leptos::prelude::*;

use crate::components::confirm::ConfirmDialog;
use crate::i18n::Lang;
use crate::state::{AppState, ToastKind};

#[component]
pub fn MePage() -> impl IntoView {
    let st = AppState::get();
    let lang = st.lang;
    let high_contrast = st.high_contrast;
    let large_text = st.large_text;
    let reduced_motion = st.reduced_motion;
    let confirm_delete = RwSignal::new(false);

    view! {
        <ul class="settings-list" role="list">

            <MeSection title="Account" hint="Email, plan, password, sign out">
                <div class="settings-rows">
                    <div class="settings-row">
                        <span class="settings-row__label">"Email"</span>
                        <span class="settings-row__value">"sam@example.org"</span>
                        <button class="btn btn--ghost btn--sm">"Change"</button>
                    </div>
                    <div class="settings-row">
                        <span class="settings-row__label">"Plan"</span>
                        <span class="settings-row__value">"Standard · 6.3 / 50 GB"</span>
                        <button class="btn btn--ghost btn--sm">"Upgrade"</button>
                    </div>
                    <div class="settings-row">
                        <span class="settings-row__label">"Password"</span>
                        <span class="settings-row__value text-mute">"Changed 47 days ago"</span>
                        <button class="btn btn--ghost btn--sm">"Change"</button>
                    </div>
                    <div class="settings-row settings-row--action">
                        <button class="btn--text"
                            on:click=move |_| st.toast("Signed out.", ToastKind::Neutral)>
                            "Sign out"
                        </button>
                    </div>
                </div>
            </MeSection>

            <MeSection title="Your data" hint="Export, storage usage, delete account">
                <div class="settings-rows">
                    <div class="settings-row">
                        <div>
                            <div class="settings-row__label">"Export all data"</div>
                            <div class="settings-row__hint">"Photos + album structure. Standard formats."</div>
                        </div>
                        <button class="btn btn--sage btn--sm"
                            on:click=move |_| st.toast("Export started.", ToastKind::Success)>
                            "Export"
                        </button>
                    </div>
                    <div class="settings-row">
                        <div>
                            <div class="settings-row__label" style="color:var(--coral)">"Delete account"</div>
                            <div class="settings-row__hint">"14-day grace period. Permanent after that."</div>
                        </div>
                        <button class="btn btn--danger btn--sm"
                            on:click=move |_| confirm_delete.set(true)>
                            "Delete"
                        </button>
                    </div>
                </div>
            </MeSection>

            <MeSection title="Preferences" hint="Language, default privacy level">
                <div class="settings-rows">
                    <div class="settings-row">
                        <span class="settings-row__label">"Language"</span>
                        <div class="row" style="gap:0.5rem;">
                            <button
                                class=move || if lang.get()==Lang::En {"btn btn--sage btn--sm"} else {"btn btn--ghost btn--sm"}
                                on:click=move |_| { lang.set(Lang::En); st.toast("English.", ToastKind::Neutral); }
                            >"EN"</button>
                            <button
                                class=move || if lang.get()==Lang::Ja {"btn btn--sage btn--sm"} else {"btn btn--ghost btn--sm"}
                                on:click=move |_| { lang.set(Lang::Ja); st.toast("日本語.", ToastKind::Neutral); }
                            >"日本語"</button>
                        </div>
                    </div>
                </div>
            </MeSection>

            <MeSection title="Accessibility" hint="Contrast, text size, motion">
                <div class="settings-rows">
                    <SettingsToggle label="High contrast"    signal=high_contrast  on_change=move |_| { high_contrast.update(|v| *v=!*v);  st.toast("Saved.", ToastKind::Neutral); } />
                    <SettingsToggle label="Larger text"      signal=large_text     on_change=move |_| { large_text.update(|v| *v=!*v);      st.toast("Saved.", ToastKind::Neutral); } />
                    <SettingsToggle label="Reduce motion"    signal=reduced_motion on_change=move |_| { reduced_motion.update(|v| *v=!*v);  st.toast("Saved.", ToastKind::Neutral); } />
                </div>
            </MeSection>

            <MeSection title="Security" hint="Two-factor, active sessions">
                <div class="settings-rows">
                    <div class="settings-row">
                        <div>
                            <div class="settings-row__label">"Two-factor authentication"</div>
                            <div class="settings-row__hint">"Authenticator app or hardware key."</div>
                        </div>
                        <button class="btn btn--ghost btn--sm">"Set up"</button>
                    </div>
                    <div class="settings-row">
                        <div>
                            <div class="settings-row__label">"Active sessions"</div>
                            <div class="settings-row__hint">"This device and 2 others."</div>
                        </div>
                        <button class="btn btn--ghost btn--sm">"Review"</button>
                    </div>
                </div>
            </MeSection>

            <MeSection title="About hejpics" hint="Privacy principles, version">
                <div class="about-list">
                    <p class="about-item">"Private by default — nothing is shared until you say so."</p>
                    <p class="about-item">"No AI training on your photos. Ever."</p>
                    <p class="about-item">"Metadata (location, device ID) removed on your device before upload."</p>
                    <p class="about-item">"Export everything at any time. Delete at any time."</p>
                    <p class="about-item text-mute">"hejpics · v0.5.0 · Apache-2.0"</p>
                </div>
            </MeSection>

        </ul>

        <ConfirmDialog
            open=confirm_delete
            title="Delete your account?"
            body="All photos and albums will be removed. 14-day grace period — cancel within that window. After that, deletion is final."
            confirm_label="Start deletion"
            cancel_label="Keep my account"
            destructive=true
            on_confirm=Callback::new(move |_| st.toast("Deletion scheduled.", ToastKind::Neutral))
        />
    }
}

// ── Section accordion ─────────────────────────────────────────────────────────

#[component]
fn MeSection(title: &'static str, hint: &'static str, children: ChildrenFn) -> impl IntoView {
    let open = RwSignal::new(false);
    view! {
        <li class="settings-section">
            <button
                class="settings-section__header"
                on:click=move |_| open.update(|v| *v = !*v)
                aria-expanded=move || open.get().to_string()
            >
                <div class="settings-section__text">
                    <span class="settings-section__title">{title}</span>
                    <span class="settings-section__hint">{hint}</span>
                </div>
                <span class="settings-section__arrow" aria-hidden="true">
                    {move || if open.get() { "▾" } else { "▸" }}
                </span>
            </button>
            <Show when=move || open.get()>
                <div class="settings-section__body">{children()}</div>
            </Show>
        </li>
    }
}

// ── Toggle row ────────────────────────────────────────────────────────────────

#[component]
fn SettingsToggle<F>(label: &'static str, signal: RwSignal<bool>, on_change: F) -> impl IntoView
where
    F: Fn(leptos::ev::Event) + Send + Sync + 'static,
{
    view! {
        <div class="settings-row">
            <span class="settings-row__label">{label}</span>
            <input
                type="checkbox"
                class="toggle"
                prop:checked=move || signal.get()
                on:change=on_change
            />
        </div>
    }
}
