//! Calendars and address books: the collection list beside each view, the
//! dialog that manages one collection, the client setup help and the import
//! of an `.ics` or `.vcf` file.

use std::collections::HashSet;

use api_types::{CreatePimCollection, CreatePimLink, UpdatePimCollection};
use leptos::prelude::*;
use wasm_bindgen_futures::spawn_local;

use crate::api::{
    self, Me, PimCollectionInfo, PimCollectionKind, PimImportResult, PimLinkInfo, PimShareInfo,
    PimShareMode,
};
use crate::components::icon::{Icon, icon_svg};
use crate::components::modal::Modal;
use crate::components::toast::{ToastMsg, show, show_error};
use crate::i18n::{self, k};
use crate::icons::IconName;
use crate::router::{Location, Section, navigate, server_url};
use crate::util::{copy_to_clipboard, local_date_time, storage_get, storage_set};
use crate::views::calendar::CalendarMain;
use crate::views::contacts::ContactsMain;
use crate::views::dialogs::ConfirmDialog;
use crate::views::shares::expiry_to_rfc3339;

/// Colors offered for a collection; a custom one comes from the color input.
const PALETTE: [&str; 8] = [
    "#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#a855f7", "#14b8a6", "#ec4899", "#64748b",
];

/// The collections the lists do not show, by id.
const HIDDEN_KEY: &str = "dovenest.pim-hidden";

/// Collection ids hidden in the calendar and contact views.
pub fn load_hidden() -> HashSet<i64> {
    storage_get(HIDDEN_KEY)
        .unwrap_or_default()
        .split(',')
        .filter_map(|s| s.parse().ok())
        .collect()
}

fn save_hidden(ids: &HashSet<i64>) {
    let list: Vec<String> = ids.iter().map(i64::to_string).collect();
    storage_set(HIDDEN_KEY, &list.join(","));
}

/// A collection's color for a style attribute. Colors of lent collections
/// come from other clients, so anything but a hex color falls back.
pub fn safe_color(c: Option<&str>) -> String {
    match c.and_then(|c| c.strip_prefix('#')) {
        Some(h) if [3, 6, 8].contains(&h.len()) && h.bytes().all(|b| b.is_ascii_hexdigit()) => {
            format!("#{h}")
        }
        _ => "var(--accent)".to_string(),
    }
}

/// The name to show: generated collections have translated names.
pub fn display_name(c: &PimCollectionInfo) -> String {
    match (c.generated, c.kind) {
        (true, PimCollectionKind::Calendar) => i18n::t(k::PIM_BIRTHDAYS).to_string(),
        (true, PimCollectionKind::Addressbook) => i18n::t(k::PIM_DIRECTORY).to_string(),
        _ => c.name.clone(),
    }
}

/// Whether the signed-in user may add objects to a collection.
pub fn writable(c: &PimCollectionInfo) -> bool {
    !c.generated && c.mode != Some(PimShareMode::Ro)
}

fn mode_label(m: PimShareMode) -> &'static str {
    match m {
        PimShareMode::Ro => i18n::t(k::PIM_MODE_RO),
        PimShareMode::Rw => i18n::t(k::PIM_MODE_RW),
        PimShareMode::RwSchedule => i18n::t(k::PIM_MODE_SCHEDULE),
    }
}

/// The browser's IANA time zone, for dates the server resolves.
pub fn browser_tz() -> String {
    let opts = js_sys::Intl::DateTimeFormat::new(&js_sys::Array::new(), &js_sys::Object::new())
        .resolved_options();
    js_sys::Reflect::get(&opts, &"timeZone".into())
        .ok()
        .and_then(|v| v.as_string())
        .unwrap_or_else(|| "UTC".to_string())
}

/// The calendar or contacts section: the collection list, and the view of
/// what the visible collections hold.
#[component]
pub fn PimView(
    kind: PimCollectionKind,
    me: ReadSignal<Option<Me>>,
    loc: ReadSignal<Location>,
) -> impl IntoView {
    let (collections, set_collections) = signal(Option::<Vec<PimCollectionInfo>>::None);
    let (load_err, set_load_err) = signal(Option::<String>::None);
    let hidden = RwSignal::new(load_hidden());
    let reload = Callback::new(move |_| {
        set_load_err.set(None);
        spawn_local(async move {
            match api::pim_collections().await {
                Ok(v) => set_collections.set(Some(v)),
                Err(e) => set_load_err.set(Some(e.to_string())),
            }
        });
    });
    reload.run(());
    let main = match kind {
        PimCollectionKind::Calendar => {
            view! { <CalendarMain collections=collections hidden=hidden loc=loc/> }.into_any()
        }
        PimCollectionKind::Addressbook => {
            view! { <ContactsMain collections=collections hidden=hidden loc=loc/> }.into_any()
        }
    };
    view! {
        <div class="pim-view">
            <CollectionList
                kind=kind
                collections=collections
                load_err=load_err
                hidden=hidden
                reload=reload
                me=me
            />
            <section class="pim-main">{main}</section>
        </div>
    }
}

#[component]
fn CollectionList(
    kind: PimCollectionKind,
    collections: ReadSignal<Option<Vec<PimCollectionInfo>>>,
    load_err: ReadSignal<Option<String>>,
    hidden: RwSignal<HashSet<i64>>,
    reload: Callback<()>,
    me: ReadSignal<Option<Me>>,
) -> impl IntoView {
    let (managing, set_managing) = signal(Option::<PimCollectionInfo>::None);
    let (creating, set_creating) = signal(false);
    let (connecting, set_connecting) = signal(false);
    let calendars = kind == PimCollectionKind::Calendar;
    let (title, new_label) = match calendars {
        true => (k::PIM_CALENDARS, k::PIM_NEW_CALENDAR),
        false => (k::PIM_ADDRESS_BOOKS, k::PIM_NEW_ADDRESS_BOOK),
    };
    let row = move |c: PimCollectionInfo| {
        let id = c.id;
        let is_hidden = move || hidden.with(|h| h.contains(&id));
        let toggle = move |_| {
            hidden.update(|h| {
                if !h.remove(&id) {
                    h.insert(id);
                }
                save_hidden(h);
            });
        };
        let note = match (c.generated, c.mode) {
            (true, _) => Some(i18n::t(k::PIM_AUTO).to_string()),
            (false, Some(_)) => Some(c.owner.clone()),
            _ => None,
        };
        let name = display_name(&c);
        let color = safe_color(c.color.as_deref());
        let info = c.clone();
        view! {
            <div class="pim-row" class:pim-row-hidden=is_hidden>
                <button
                    class="pim-toggle"
                    title=move || if is_hidden() { i18n::t(k::PIM_SHOW) } else { i18n::t(k::PIM_HIDE) }
                    aria-pressed=move || (!is_hidden()).to_string()
                    on:click=toggle
                >
                    <span class="pim-swatch" style=format!("--swatch: {color}")></span>
                </button>
                <button
                    class="pim-row-main"
                    title=name.clone()
                    on:click=move |_| set_managing.set(Some(info.clone()))
                >
                    <span class="pim-row-name">{name.clone()}</span>
                    {note.map(|n| view! { <span class="pim-row-note">{n}</span> })}
                </button>
            </div>
        }
    };
    view! {
        <aside class="pim-side">
            <div class="pim-side-head">
                <h3 class="admin-section-title">{i18n::tr(title)}</h3>
                <button
                    class="icon-btn icon-btn-sm"
                    title=i18n::tr(k::PIM_CONNECT)
                    aria-label=i18n::tr(k::PIM_CONNECT)
                    on:click=move |_| set_connecting.set(true)
                >
                    <Icon name=IconName::Devices class="ic-btn".to_string()/>
                </button>
                <button
                    class="icon-btn icon-btn-sm"
                    title=i18n::tr(new_label)
                    aria-label=i18n::tr(new_label)
                    on:click=move |_| set_creating.set(true)
                >
                    <Icon name=IconName::Add class="ic-btn".to_string()/>
                </button>
            </div>
            {move || match collections.get() {
                None => match load_err.get() {
                    Some(msg) => view! {
                        <div class="card error-card">
                            <span>{msg}</span>
                            <button class="btn" on:click=move |_| reload.run(())>
                                {i18n::tr(k::RETRY)}
                            </button>
                        </div>
                    }
                    .into_any(),
                    None => view! { <p class="muted">{i18n::tr(k::LOADING)}</p> }.into_any(),
                },
                Some(list) => {
                    let (mine, lent): (Vec<_>, Vec<_>) = list
                        .into_iter()
                        .filter(|c| c.kind == kind)
                        .partition(|c| c.mode.is_none());
                    let lent_block = (!lent.is_empty()).then(|| view! {
                        <div class="pim-group-label">{i18n::tr(k::PIM_SHARED_WITH_ME)}</div>
                        {lent.into_iter().map(row).collect::<Vec<_>>()}
                    });
                    view! {
                        <div class="pim-list">
                            {mine.into_iter().map(row).collect::<Vec<_>>()}
                            {lent_block}
                        </div>
                    }
                    .into_any()
                }
            }}
        </aside>
        {move || managing.get().map(|info| view! {
            <CollectionDialog
                info=info
                on_close=Callback::new(move |_| set_managing.set(None))
                on_changed=reload
            />
        })}
        <Show when=move || creating.get()>
            <NewCollectionDialog
                kind=kind
                on_close=Callback::new(move |_| set_creating.set(false))
                on_created=reload
            />
        </Show>
        <Show when=move || connecting.get()>
            <ConnectDialog
                me=me
                collections=collections
                on_close=Callback::new(move |_| set_connecting.set(false))
            />
        </Show>
    }
}

/// The palette plus a custom color. `None` clears the color.
#[component]
fn ColorPicker(color: RwSignal<Option<String>>) -> impl IntoView {
    view! {
        <div class="pim-colors" role="radiogroup" aria-label=i18n::tr(k::PIM_COLOR)>
            {PALETTE
                .iter()
                .map(|&c| {
                    view! {
                        <button
                            type="button"
                            class="pim-color"
                            class:selected=move || color.with(|v| v.as_deref() == Some(c))
                            role="radio"
                            aria-checked=move || color.with(|v| v.as_deref() == Some(c)).to_string()
                            title=c
                            style=format!("--swatch: {c}")
                            on:click=move |_| color.set(Some(c.to_string()))
                        ></button>
                    }
                })
                .collect::<Vec<_>>()}
            <input
                type="color"
                class="pim-color-input"
                title=i18n::tr(k::PIM_CUSTOM_COLOR)
                aria-label=i18n::tr(k::PIM_CUSTOM_COLOR)
                prop:value=move || {
                    color.with(|v| {
                        v.as_deref()
                            .filter(|c| c.len() >= 7)
                            .map(|c| c[..7].to_string())
                            .unwrap_or_else(|| "#3b82f6".to_string())
                    })
                }
                on:input=move |ev| color.set(Some(event_target_value(&ev)))
            />
        </div>
    }
}

#[component]
fn NewCollectionDialog(
    kind: PimCollectionKind,
    on_close: Callback<()>,
    on_created: Callback<()>,
) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let (name, set_name) = signal(String::new());
    let color = RwSignal::new(Some(PALETTE[0].to_string()));
    let (description, set_description) = signal(String::new());
    let (busy, set_busy) = signal(false);
    let title = match kind {
        PimCollectionKind::Calendar => k::PIM_NEW_CALENDAR,
        PimCollectionKind::Addressbook => k::PIM_NEW_ADDRESS_BOOK,
    };
    let submit = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        let n = name.get().trim().to_string();
        if n.is_empty() || busy.get() {
            return;
        }
        set_busy.set(true);
        let body = CreatePimCollection {
            kind,
            name: n,
            color: color.get(),
            description: Some(description.get()).filter(|d| !d.trim().is_empty()),
            components: Vec::new(),
        };
        spawn_local(async move {
            match api::pim_create_collection(body).await {
                Ok(_) => {
                    show(toast, i18n::t(k::PIM_CREATED));
                    on_created.run(());
                    on_close.run(());
                }
                Err(e) => {
                    show_error(toast, e.to_string());
                    set_busy.set(false);
                }
            }
        });
    };
    view! {
        <Modal class="pim-modal" on_close=on_close>
            <form on:submit=submit>
                <h2 class="modal-title">{i18n::tr(title)}</h2>
                <label class="field">
                    <span class="field-label">{i18n::tr(k::NAME)}</span>
                    <input
                        class="field-input"
                        required=true
                        maxlength="200"
                        autofocus=true
                        prop:value=move || name.get()
                        on:input=move |ev| set_name.set(event_target_value(&ev))
                    />
                </label>
                <div class="field">
                    <span class="field-label">{i18n::tr(k::PIM_COLOR)}</span>
                    <ColorPicker color=color/>
                </div>
                <label class="field">
                    <span class="field-label">{i18n::tr(k::PIM_DESCRIPTION)}</span>
                    <textarea
                        class="field-input"
                        rows="2"
                        prop:value=move || description.get()
                        on:input=move |ev| set_description.set(event_target_value(&ev))
                    ></textarea>
                </label>
                <div class="modal-actions">
                    <button type="button" class="btn" on:click=move |_| on_close.run(())>
                        {i18n::tr(k::CANCEL)}
                    </button>
                    <button type="submit" class="btn btn-primary" disabled=move || busy.get()>
                        {i18n::tr(k::CREATE)}
                    </button>
                </div>
            </form>
        </Modal>
    }
}

/// A read-only URL with a copy button.
fn url_row(url: String, toast: ToastMsg) -> impl IntoView {
    let copy = url.clone();
    view! {
        <div class="share-link-row">
            <input
                class="share-link-input"
                readonly=true
                value=url
                on:click={|ev| event_target::<web_sys::HtmlInputElement>(&ev).select()}
            />
            <button
                type="button"
                class="btn"
                on:click=move |_| copy_to_clipboard(&copy, i18n::t(k::LINK_COPIED), toast)
            >
                {icon_svg(IconName::Copy, "ic-btn")}
                {i18n::t(k::COPY)}
            </button>
        </div>
    }
}

/// Everything about one collection: its settings, who it is lent to, its
/// public links, export and deletion.
#[component]
fn CollectionDialog(
    info: PimCollectionInfo,
    on_close: Callback<()>,
    on_changed: Callback<()>,
) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let own = info.mode.is_none() && !info.generated;
    let url = server_url(&info.url);
    let lent_note = info.mode.map(|m| {
        format!(
            "{} · {}",
            i18n::t_fmt(k::PIM_SHARED_BY, &info.owner),
            mode_label(m)
        )
    });
    let generated_note = info.generated.then(|| i18n::t(k::PIM_GENERATED_HINT));
    view! {
        <Modal class="pim-modal" on_close=on_close>
            <h2 class="modal-title pim-modal-title">
                <span class="pim-swatch" style=format!("--swatch: {}", safe_color(info.color.as_deref()))></span>
                <span>{display_name(&info)}</span>
            </h2>
            {lent_note.map(|n| view! { <p class="muted pim-note">{n}</p> })}
            {generated_note.map(|n| view! { <p class="muted pim-note">{n}</p> })}
            {own.then(|| view! { <GeneralSection info=info.clone() on_changed=on_changed/> })}
            <section class="pim-section">
                <h3 class="pim-section-title">{i18n::tr(k::PIM_ADDRESS)}</h3>
                {url_row(url, toast)}
            </section>
            {own.then(|| view! { <SharingSection info=info.clone()/> })}
            {own.then(|| view! { <LinksSection info=info.clone()/> })}
            {writable(&info).then(|| view! { <ImportSection info=info.clone() on_changed=on_changed/> })}
            <ExportSection info=info.clone()/>
            {(!info.generated).then(|| view! {
                <DeleteSection info=info.clone() on_close=on_close on_changed=on_changed/>
            })}
            <div class="modal-actions">
                <button class="btn" on:click=move |_| on_close.run(())>{i18n::tr(k::CLOSE)}</button>
            </div>
        </Modal>
    }
}

#[component]
fn GeneralSection(info: PimCollectionInfo, on_changed: Callback<()>) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let id = info.id;
    let calendar = info.kind == PimCollectionKind::Calendar;
    let (name, set_name) = signal(info.name.clone());
    let color = RwSignal::new(info.color.clone());
    let (description, set_description) = signal(info.description.clone().unwrap_or_default());
    let (transparent, set_transparent) = signal(info.transparent);
    let (busy, set_busy) = signal(false);
    let save = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        if busy.get() || name.get().trim().is_empty() {
            return;
        }
        set_busy.set(true);
        let body = UpdatePimCollection {
            name: Some(name.get()),
            color: Some(color.get().unwrap_or_default()),
            description: Some(description.get()),
            transparent: calendar.then(|| transparent.get()),
        };
        spawn_local(async move {
            match api::pim_update_collection(id, body).await {
                Ok(_) => {
                    show(toast, i18n::t(k::SAVED));
                    on_changed.run(());
                }
                Err(e) => show_error(toast, i18n::t_fmt(k::PIM_SAVE_ERR, &e.to_string())),
            }
            set_busy.set(false);
        });
    };
    view! {
        <form class="pim-section" on:submit=save>
            <h3 class="pim-section-title">{i18n::tr(k::PIM_GENERAL)}</h3>
            <label class="field">
                <span class="field-label">{i18n::tr(k::NAME)}</span>
                <input
                    class="field-input"
                    required=true
                    maxlength="200"
                    prop:value=move || name.get()
                    on:input=move |ev| set_name.set(event_target_value(&ev))
                />
            </label>
            <div class="field">
                <span class="field-label">{i18n::tr(k::PIM_COLOR)}</span>
                <ColorPicker color=color/>
            </div>
            <label class="field">
                <span class="field-label">{i18n::tr(k::PIM_DESCRIPTION)}</span>
                <textarea
                    class="field-input"
                    rows="2"
                    prop:value=move || description.get()
                    on:input=move |ev| set_description.set(event_target_value(&ev))
                ></textarea>
            </label>
            {calendar.then(|| view! {
                <label class="check-row">
                    <input
                        type="checkbox"
                        prop:checked=move || transparent.get()
                        on:change=move |ev| set_transparent.set(event_target_checked(&ev))
                    />
                    {i18n::tr(k::PIM_TRANSPARENT)}
                </label>
            })}
            <div class="pim-section-actions">
                <button type="submit" class="btn btn-primary btn-sm" disabled=move || busy.get()>
                    {move || if busy.get() { i18n::t(k::SAVING) } else { i18n::t(k::SAVE) }}
                </button>
            </div>
        </form>
    }
}

#[component]
fn SharingSection(info: PimCollectionInfo) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let id = info.id;
    let calendar = info.kind == PimCollectionKind::Calendar;
    let modes: Vec<PimShareMode> = match calendar {
        true => vec![PimShareMode::Ro, PimShareMode::Rw, PimShareMode::RwSchedule],
        false => vec![PimShareMode::Ro, PimShareMode::Rw],
    };
    let (shares, set_shares) = signal(Option::<Vec<PimShareInfo>>::None);
    let (user, set_user) = signal(String::new());
    let (mode, set_mode) = signal(PimShareMode::Ro);
    let load = move || {
        spawn_local(async move {
            match api::pim_shares(id).await {
                Ok(v) => set_shares.set(Some(v)),
                Err(e) => show_error(toast, e.to_string()),
            }
        });
    };
    load();
    let set = move |who: String, m: PimShareMode| {
        spawn_local(async move {
            match api::pim_share(id, &who, m).await {
                Ok(s) => {
                    show(toast, i18n::t_fmt(k::PIM_SHARED_OK, &s.user_name));
                    set_user.set(String::new());
                    load();
                }
                Err(e) => show_error(toast, e.to_string()),
            }
        });
    };
    let add = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        let who = user.get().trim().to_string();
        if !who.is_empty() {
            set(who, mode.get());
        }
    };
    let mode_options = move |current: PimShareMode| {
        modes
            .iter()
            .map(|&m| {
                view! {
                    <option value=m.as_str() selected=m == current>{mode_label(m)}</option>
                }
            })
            .collect::<Vec<_>>()
    };
    let mode_options_add = mode_options.clone();
    view! {
        <section class="pim-section">
            <h3 class="pim-section-title">{i18n::tr(k::PIM_SHARING)}</h3>
            <p class="muted pim-hint">{i18n::tr(k::PIM_SHARING_HINT)}</p>
            {move || match shares.get() {
                None => view! { <p class="muted">{i18n::tr(k::LOADING)}</p> }.into_any(),
                Some(list) if list.is_empty() => {
                    view! { <p class="muted pim-hint">{i18n::tr(k::PIM_NO_SHARES)}</p> }.into_any()
                }
                Some(list) => {
                    let options = mode_options.clone();
                    view! {
                        <div class="pim-items">
                            {list
                                .into_iter()
                                .map(|s| {
                                    let (uid, who) = (s.user_id, s.user_name.clone());
                                    view! {
                                        <div class="pim-item">
                                            <span class="pim-item-name">{s.user_name.clone()}</span>
                                            <select
                                                class="pim-mode"
                                                aria-label=i18n::tr(k::PIM_ACCESS)
                                                on:change=move |ev| {
                                                    if let Some(m) = PimShareMode::from_wire(&event_target_value(&ev)) {
                                                        set(who.clone(), m);
                                                    }
                                                }
                                            >
                                                {options(s.mode)}
                                            </select>
                                            <button
                                                type="button"
                                                class="icon-btn icon-btn-sm"
                                                title=i18n::tr(k::PIM_UNSHARE)
                                                aria-label=i18n::tr(k::PIM_UNSHARE)
                                                on:click=move |_| {
                                                    spawn_local(async move {
                                                        match api::pim_unshare(id, uid).await {
                                                            Ok(_) => {
                                                                show(toast, i18n::t(k::PIM_UNSHARED));
                                                                load();
                                                            }
                                                            Err(e) => show_error(toast, e.to_string()),
                                                        }
                                                    });
                                                }
                                            >
                                                <Icon name=IconName::Close class="ic-btn".to_string()/>
                                            </button>
                                        </div>
                                    }
                                })
                                .collect::<Vec<_>>()}
                        </div>
                    }
                    .into_any()
                }
            }}
            <form class="pim-add" on:submit=add>
                <input
                    class="field-input"
                    required=true
                    placeholder=i18n::tr(k::PIM_USER_NAME)
                    aria-label=i18n::tr(k::PIM_USER_NAME)
                    autocomplete="off"
                    prop:value=move || user.get()
                    on:input=move |ev| set_user.set(event_target_value(&ev))
                />
                <select
                    class="pim-mode"
                    aria-label=i18n::tr(k::PIM_ACCESS)
                    on:change=move |ev| {
                        if let Some(m) = PimShareMode::from_wire(&event_target_value(&ev)) {
                            set_mode.set(m);
                        }
                    }
                >
                    {mode_options_add(PimShareMode::Ro)}
                </select>
                <button type="submit" class="btn btn-sm">{i18n::tr(k::PIM_ADD)}</button>
            </form>
        </section>
    }
}

#[component]
fn LinksSection(info: PimCollectionInfo) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let id = info.id;
    let calendar = info.kind == PimCollectionKind::Calendar;
    let (links, set_links) = signal(Option::<Vec<PimLinkInfo>>::None);
    let (busy_only, set_busy_only) = signal(false);
    let (choice, set_choice) = signal("never".to_string());
    let (custom, set_custom) = signal(String::new());
    let (password, set_password) = signal(String::new());
    let (busy, set_busy) = signal(false);
    let load = move || {
        spawn_local(async move {
            match api::pim_links(id).await {
                Ok(v) => set_links.set(Some(v)),
                Err(e) => show_error(toast, e.to_string()),
            }
        });
    };
    load();
    let create = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        if busy.get() {
            return;
        }
        set_busy.set(true);
        let pw = password.get().trim().to_string();
        let body = CreatePimLink {
            busy_only: busy_only.get(),
            expires_at: expiry_to_rfc3339(&choice.get(), &custom.get()),
            password: (!pw.is_empty()).then_some(pw),
        };
        spawn_local(async move {
            match api::pim_create_link(id, body).await {
                Ok(_) => {
                    set_password.set(String::new());
                    load();
                }
                Err(e) => show_error(toast, e.to_string()),
            }
            set_busy.set(false);
        });
    };
    let link_row = move |l: PimLinkInfo| {
        let full = server_url(&l.path);
        // `webcal://` opens the calendar app; the transport stays HTTP(S).
        let webcal = full
            .strip_prefix("https://")
            .or_else(|| full.strip_prefix("http://"))
            .map(|rest| format!("webcal://{rest}"));
        let mut meta = vec![if l.busy_only {
            i18n::t(k::PIM_LINK_BUSY).to_string()
        } else {
            i18n::t(k::PIM_LINK_FULL).to_string()
        }];
        if let Some(e) = &l.expires_at {
            meta.push(i18n::t_fmt(k::META_EXPIRES, &local_date_time(e)));
        }
        if l.has_password {
            meta.push(i18n::t(k::SHARE_PROTECTED).to_string());
        }
        let link_id = l.id;
        let copy = full.clone();
        view! {
            <div class="pim-link">
                <div class="pim-link-main">
                    <span class="pim-link-url" title=full.clone()>{full.clone()}</span>
                    <span class="muted pim-link-meta">{meta.join(" · ")}</span>
                </div>
                <div class="pim-link-actions">
                    <button
                        type="button"
                        class="btn btn-sm"
                        on:click=move |_| copy_to_clipboard(&copy, i18n::t(k::LINK_COPIED), toast)
                    >
                        {icon_svg(IconName::Copy, "ic-btn")}
                        {i18n::t(k::COPY)}
                    </button>
                    {calendar.then(|| webcal.map(|w| view! {
                        <a class="btn btn-sm" href=w>{i18n::t(k::PIM_SUBSCRIBE)}</a>
                    }))}
                    <button
                        type="button"
                        class="btn btn-sm btn-danger"
                        on:click=move |_| {
                            spawn_local(async move {
                                match api::pim_delete_link(id, link_id).await {
                                    Ok(_) => {
                                        show(toast, i18n::t(k::PIM_LINK_REVOKED));
                                        load();
                                    }
                                    Err(e) => show_error(toast, e.to_string()),
                                }
                            });
                        }
                    >
                        {i18n::t(k::DELETE)}
                    </button>
                </div>
            </div>
        }
    };
    view! {
        <section class="pim-section">
            <h3 class="pim-section-title">{i18n::tr(k::PIM_LINKS)}</h3>
            <p class="muted pim-hint">
                {move || match calendar {
                    true => i18n::t(k::PIM_LINKS_HINT),
                    false => i18n::t(k::PIM_LINKS_HINT_CARDS),
                }}
            </p>
            {move || match links.get() {
                None => view! { <p class="muted">{i18n::tr(k::LOADING)}</p> }.into_any(),
                Some(list) if list.is_empty() => {
                    view! { <p class="muted pim-hint">{i18n::tr(k::PIM_NO_LINKS)}</p> }.into_any()
                }
                Some(list) => view! {
                    <div class="pim-items">{list.into_iter().map(link_row).collect::<Vec<_>>()}</div>
                }
                .into_any(),
            }}
            <form class="pim-link-form" on:submit=create>
                {calendar.then(|| view! {
                    <label class="pim-inline">
                        <span>{i18n::tr(k::PIM_DETAIL)}</span>
                        <select on:change=move |ev| set_busy_only.set(event_target_value(&ev) == "busy")>
                            <option value="full">{i18n::t(k::PIM_DETAIL_FULL)}</option>
                            <option value="busy">{i18n::t(k::PIM_DETAIL_BUSY)}</option>
                        </select>
                    </label>
                })}
                <label class="pim-inline">
                    <span>{i18n::tr(k::EXPIRES)}</span>
                    <select on:change=move |ev| set_choice.set(event_target_value(&ev))>
                        <option value="never">{i18n::t(k::NEVER)}</option>
                        <option value="1d">{i18n::t(k::EXPIRY_1D)}</option>
                        <option value="1w">{i18n::t(k::EXPIRY_1W)}</option>
                        <option value="1mo">{i18n::t(k::EXPIRY_1MO)}</option>
                        <option value="custom">{i18n::t(k::CUSTOM)}</option>
                    </select>
                </label>
                <Show when=move || choice.get() == "custom">
                    <label class="pim-inline">
                        <span>{i18n::tr(k::UNTIL)}</span>
                        <input
                            type="datetime-local"
                            prop:value=move || custom.get()
                            on:change=move |ev| set_custom.set(event_target_value(&ev))
                        />
                    </label>
                </Show>
                <label class="pim-inline">
                    <span>{i18n::tr(k::PASSWORD)}</span>
                    <input
                        type="password"
                        autocomplete="new-password"
                        prop:value=move || password.get()
                        on:input=move |ev| set_password.set(event_target_value(&ev))
                    />
                </label>
                <div class="pim-section-actions">
                    <button type="submit" class="btn btn-sm" disabled=move || busy.get()>
                        {i18n::tr(k::CREATE_LINK)}
                    </button>
                </div>
            </form>
        </section>
    }
}

/// A file name for an export: the collection name without path separators.
fn export_file(info: &PimCollectionInfo) -> String {
    let ext = match info.kind {
        PimCollectionKind::Calendar => "ics",
        PimCollectionKind::Addressbook => "vcf",
    };
    let base: String = display_name(info)
        .chars()
        .map(|c| {
            if matches!(c, '/' | '\\' | ':') {
                '_'
            } else {
                c
            }
        })
        .collect();
    format!("{}.{ext}", base.trim())
}

#[component]
fn ExportSection(info: PimCollectionInfo) -> impl IntoView {
    let id = info.id;
    let file = export_file(&info);
    view! {
        <section class="pim-section">
            <h3 class="pim-section-title">{i18n::tr(k::PIM_EXPORT)}</h3>
            <div class="pim-section-actions pim-left">
                <button
                    type="button"
                    class="btn btn-sm"
                    on:click=move |_| api::trigger_download(&api::pim_export_url(id), &file)
                >
                    {icon_svg(IconName::Download, "ic-btn")}
                    {i18n::t(k::DOWNLOAD)}
                </button>
            </div>
        </section>
    }
}

/// Upload an `.ics` or `.vcf` file into the collection.
#[component]
fn ImportSection(info: PimCollectionInfo, on_changed: Callback<()>) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let id = info.id;
    let input: NodeRef<leptos::html::Input> = NodeRef::new();
    let (busy, set_busy) = signal(false);
    let (result, set_result) = signal(Option::<PimImportResult>::None);
    let picked = move |_| {
        let Some(file) = input
            .get_untracked()
            .and_then(|el| el.files())
            .and_then(|list| list.get(0))
        else {
            return;
        };
        set_busy.set(true);
        set_result.set(None);
        spawn_local(async move {
            match api::pim_import(id, file).await {
                Ok(r) => {
                    set_result.set(Some(r));
                    on_changed.run(());
                }
                Err(e) => show_error(toast, e.to_string()),
            }
            set_busy.set(false);
            // The same file again must fire `change` again.
            if let Some(el) = input.get_untracked() {
                el.set_value("");
            }
        });
    };
    view! {
        <section class="pim-section">
            <h3 class="pim-section-title">{i18n::tr(k::PIM_IMPORT)}</h3>
            <p class="muted pim-hint">{i18n::tr(match info.kind {
                PimCollectionKind::Calendar => k::PIM_IMPORT_HINT_CAL,
                PimCollectionKind::Addressbook => k::PIM_IMPORT_HINT_CARDS,
            })}</p>
            <input
                node_ref=input
                type="file"
                class="pim-file-input"
                accept=".ics,.vcf,text/calendar,text/vcard"
                on:change=picked
            />
            <div class="pim-section-actions pim-left">
                <button
                    type="button"
                    class="btn btn-sm"
                    disabled=move || busy.get()
                    on:click=move |_| {
                        if let Some(el) = input.get_untracked() {
                            el.click();
                        }
                    }
                >
                    {icon_svg(IconName::Upload, "ic-btn")}
                    {move || if busy.get() { i18n::t(k::PIM_IMPORTING) } else { i18n::t(k::PIM_IMPORT_FILE) }}
                </button>
            </div>
            {move || result.get().map(|r| {
                let more = r.skipped_total.saturating_sub(r.skipped.len());
                view! {
                    <p class="pim-hint">
                        {i18n::t_fmt2(k::PIM_IMPORT_DONE, &r.created.to_string(), &r.updated.to_string())}
                    </p>
                    {(r.skipped_total > 0).then(|| view! {
                        <p class="pim-hint">{i18n::t_fmt(k::PIM_IMPORT_SKIPPED, &r.skipped_total.to_string())}</p>
                        <ul class="pim-sample">
                            {r.skipped
                                .into_iter()
                                .map(|s| view! {
                                    <li>{format!("{} · {}", s.uid.unwrap_or_else(|| "—".to_string()), s.reason)}</li>
                                })
                                .collect::<Vec<_>>()}
                            {(more > 0).then(|| view! { <li class="muted">{i18n::t_fmt(k::AND_MORE, &more.to_string())}</li> })}
                        </ul>
                    })}
                }
            })}
        </section>
    }
}

#[component]
fn DeleteSection(
    info: PimCollectionInfo,
    on_close: Callback<()>,
    on_changed: Callback<()>,
) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let (confirm, set_confirm) = signal(false);
    let id = info.id;
    let lent = info.mode.is_some();
    let name = display_name(&info);
    let run = Callback::new(move |_| {
        set_confirm.set(false);
        spawn_local(async move {
            match api::pim_delete_collection(id).await {
                Ok(_) => {
                    show(
                        toast,
                        match lent {
                            true => i18n::t(k::PIM_REMOVED),
                            false => i18n::t(k::DELETED),
                        },
                    );
                    on_changed.run(());
                    on_close.run(());
                }
                Err(e) => show_error(toast, e.to_string()),
            }
        });
    });
    view! {
        <section class="pim-section">
            {match (lent, info.is_default) {
                (_, true) => view! { <p class="muted pim-hint">{i18n::tr(k::PIM_DEFAULT_HINT)}</p> }.into_any(),
                (true, _) => view! {
                    <button type="button" class="btn btn-sm" on:click=move |_| set_confirm.set(true)>
                        {i18n::tr(k::PIM_REMOVE_FROM_LIST)}
                    </button>
                }
                .into_any(),
                (false, _) => view! {
                    <button type="button" class="btn btn-sm btn-danger" on:click=move |_| set_confirm.set(true)>
                        {icon_svg(IconName::Delete, "ic-btn")}
                        {i18n::t(k::DELETE)}
                    </button>
                }
                .into_any(),
            }}
        </section>
        <Show when=move || confirm.get()>
            <ConfirmDialog
                title=i18n::t_fmt(k::PIM_DELETE_TITLE, &name)
                message=match lent {
                    true => i18n::t(k::PIM_REMOVE_MSG).to_string(),
                    false => i18n::t(k::PIM_DELETE_MSG).to_string(),
                }
                submit=match lent {
                    true => i18n::t(k::PIM_REMOVE_FROM_LIST).to_string(),
                    false => i18n::t(k::DELETE).to_string(),
                }
                danger=!lent
                on_submit=run
                on_close=Callback::new(move |_| set_confirm.set(false))
            />
        </Show>
    }
}

/// How to set up a calendar or contacts app against this server.
#[component]
fn ConnectDialog(
    me: ReadSignal<Option<Me>>,
    collections: ReadSignal<Option<Vec<PimCollectionInfo>>>,
    on_close: Callback<()>,
) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let user = me.with_untracked(|m| {
        m.as_ref()
            .and_then(|m| m.user.as_ref())
            .map(|u| u.name.clone())
            .unwrap_or_default()
    });
    let app_passwords = move |_| {
        on_close.run(());
        navigate(&Location {
            section: Section::Settings,
            path: vec!["security".to_string()],
            ..Location::root()
        });
    };
    view! {
        <Modal class="pim-modal" on_close=on_close>
            <h2 class="modal-title">{i18n::tr(k::PIM_CONNECT_TITLE)}</h2>
            <section class="pim-section">
                <h3 class="pim-section-title">{i18n::tr(k::PIM_SERVER_ADDRESS)}</h3>
                {url_row(server_url("/"), toast)}
                <p class="muted pim-hint">{i18n::tr(k::PIM_SERVER_ADDRESS_HINT)}</p>
                {url_row(server_url(&format!("{}/", api_types::PIM)), toast)}
            </section>
            <section class="pim-section">
                <h3 class="pim-section-title">{i18n::tr(k::PIM_USER)}</h3>
                {url_row(user, toast)}
                <p class="muted pim-hint">{i18n::tr(k::PIM_PASSWORD_HINT)}</p>
                <div class="pim-section-actions pim-left">
                    <button type="button" class="btn btn-sm" on:click=app_passwords>
                        {i18n::tr(k::PIM_APP_PASSWORDS)}
                    </button>
                </div>
            </section>
            <section class="pim-section">
                <h3 class="pim-section-title">{i18n::tr(k::PIM_CLIENTS)}</h3>
                <ul class="pim-hints">
                    <li>{i18n::tr(k::PIM_HINT_APPLE)}</li>
                    <li>{i18n::tr(k::PIM_HINT_DAVX5)}</li>
                    <li>{i18n::tr(k::PIM_HINT_THUNDERBIRD)}</li>
                    <li>{i18n::tr(k::PIM_HINT_GNOME)}</li>
                </ul>
            </section>
            <section class="pim-section">
                <h3 class="pim-section-title">{i18n::tr(k::PIM_COLLECTION_URLS)}</h3>
                <div class="pim-items">
                    {move || {
                        collections
                            .get()
                            .unwrap_or_default()
                            .into_iter()
                            .map(|c| {
                                let url = server_url(&c.url);
                                let copy = url.clone();
                                view! {
                                    <div class="pim-item">
                                        <span class="pim-swatch" style=format!("--swatch: {}", safe_color(c.color.as_deref()))></span>
                                        <span class="pim-item-name" title=url.clone()>{display_name(&c)}</span>
                                        <button
                                            type="button"
                                            class="btn btn-sm"
                                            on:click=move |_| copy_to_clipboard(&copy, i18n::t(k::LINK_COPIED), toast)
                                        >
                                            {icon_svg(IconName::Copy, "ic-btn")}
                                            {i18n::t(k::COPY)}
                                        </button>
                                    </div>
                                }
                            })
                            .collect::<Vec<_>>()
                    }}
                </div>
            </section>
            <div class="modal-actions">
                <button class="btn" on:click=move |_| on_close.run(())>{i18n::tr(k::CLOSE)}</button>
            </div>
        </Modal>
    }
}