yggdrasil/components/

ui.rs

//! 通用 UI 原子组件与类名常量。
//!
//! 提供跨页面共享的样式常量（卡片、按钮、徽章外层等）与可复用组件
//! （分页导航、状态徽章、空状态）。样式常量用于消除散落在各页面的重复
//! Tailwind 类字符串；组件用于封装结构固定的 UI 单元。
//!
//! 与 `forms.rs`（表单控件）并列，本模块聚焦通用展示类原子。

use dioxus::prelude::*;
use dioxus::router::components::Link;

use crate::components::forms::FormInput;

// ===========================================================================
// 样式常量
// ===========================================================================

/// Admin 卡片容器：内容档圆角（16px），作为主面板内的内容卡片，与外壳 32px 形成层次。
///
/// 用裸 `transition`（Tailwind v4 默认列表含 colors/transform/box-shadow/opacity）而非
/// `transition-colors`：编译产物中 `.transition-colors` 排在 `.transition-all` 之后，
/// 同层同优先级会覆盖组件追加的 `transition-all`，导致 hover 位移/阴影瞬时跳变。
pub const ADMIN_CARD_CLASS: &str = "bg-[var(--color-paper-entry)] rounded-2xl shadow-sm border border-transparent hover:border-[var(--color-paper-border)] transition";

/// Admin 表格容器：内容档圆角（16px），与卡片一致。
pub const ADMIN_TABLE_CLASS: &str = "bg-[var(--color-paper-entry)] rounded-2xl shadow-sm border border-transparent hover:border-[var(--color-paper-border)] transition overflow-hidden";

/// 行内加载 spinner：环形渐变 + 自旋动画，用 currentColor 继承文字色。
///
/// 内联 SVG（含 `@keyframes`），通过 `dangerous_inner_html` 注入；尺寸由外层
/// Tailwind 类（如 `w-3.5 h-3.5`）控制。源文件 `public/icons/90-ring-with-gradient.svg`。
pub const SPINNER_SVG: &str = r#"<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="yggSpinnerGrad"><stop offset="0%" stop-color="currentColor" stop-opacity="1"/><stop offset="100%" stop-color="currentColor" stop-opacity="0.25"/></linearGradient></defs><style>@keyframes yggSpin { to { transform: rotate(360deg); } } .ygg-spinner-circle { transform-origin: 50% 50%; stroke: url(#yggSpinnerGrad); fill: none; animation: yggSpin .5s infinite linear; }</style><circle cx="10" cy="10" r="8" class="ygg-spinner-circle" stroke-width="2"/></svg>"#;

#[allow(dead_code)]
pub const BADGE_BASE: &str =
    "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap";
pub const MEDIA_BADGE_BASE: &str =
    "inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-mono font-medium whitespace-nowrap";

// --- 实心小按钮（批量操作栏：通过 / 垃圾 / 删除） ---

/// 绿色实心小按钮（批量通过、批量恢复）。
pub const BTN_SOLID_GREEN: &str =
    "px-4 py-1.5 text-sm font-medium bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors cursor-pointer";
/// 琥珀色实心小按钮（批量标为垃圾）。
pub const BTN_SOLID_AMBER: &str =
    "px-4 py-1.5 text-sm font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400 rounded-full hover:bg-amber-500/20 transition-colors cursor-pointer";
/// 红色实心小按钮（批量删除、批量彻底删除）。
pub const BTN_SOLID_RED: &str =
    "px-4 py-1.5 text-sm font-medium bg-red-500/10 text-red-600 dark:text-red-400 rounded-full hover:bg-red-500/20 transition-colors cursor-pointer";

// --- 文字小按钮（表格行内操作：通过 / 垃圾 / 删除 / 恢复） ---

#[allow(dead_code)]
pub const BTN_TEXT_AMBER: &str = "text-xs text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 transition-colors cursor-pointer";
#[allow(dead_code)]
pub const BTN_TEXT_RED: &str =
    "text-xs text-red-500 hover:text-red-700 dark:hover:text-red-300 transition-colors cursor-pointer";

/// 弱化文字按钮（弹窗「取消」等次要取消操作）：无描边、无填充，悬浮转主色。
pub const BTN_GHOST: &str =
    "px-3 py-1.5 text-xs text-paper-secondary hover:text-paper-primary transition-colors cursor-pointer";

// --- 次要按钮（Teal 第二色，ghost 描边风格，从属于主色 Green） ---

/// 次要按钮：极简风次要操作。
pub const BTN_SECONDARY: &str =
    "px-6 py-2.5 rounded-full text-sm font-medium text-center text-[var(--color-paper-secondary)] bg-[var(--color-paper-entry)] hover:bg-[var(--color-paper-border)] hover:text-[var(--color-paper-primary)] active:scale-[0.98] transition-all cursor-pointer";

// --- 主操作按钮（主题绿实心胶囊，全站统一 CTA） ---

/// 主操作按钮：主题绿实心胶囊（用于 `<Link>`、无 loading 态的静态按钮）。
pub const BTN_PRIMARY: &str =
    "inline-flex items-center justify-center px-5 py-2 text-sm font-medium text-[var(--color-paper-theme)] bg-[var(--color-paper-accent)] rounded-full shadow-sm hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer";

/// 小号主操作按钮：工具栏场景（刷新 / 导出 / 创建备份）。
pub const BTN_PRIMARY_SM: &str =
    "inline-flex items-center justify-center px-4 py-1.5 text-sm font-medium text-[var(--color-paper-theme)] bg-[var(--color-paper-accent)] rounded-full hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer";

// --- 描边按钮 ---

/// 描边次要按钮（posts 重建、system 刷新列表）：`relative` 以承载 spinner 叠加层。
pub const BTN_OUTLINE: &str =
    "relative px-4 py-2 rounded-full text-sm font-medium text-paper-primary border border-paper-border hover:border-paper-accent hover:text-paper-accent transition-all cursor-pointer";

/// 红色描边危险按钮（trash 清空回收站）。
pub const BTN_DANGER_OUTLINE: &str =
    "px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-900/50 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer";

// --- 图标按钮 ---

/// 关闭图标按钮（× 关闭提示条）。
pub const BTN_CLOSE_ICON: &str =
    "shrink-0 text-red-400 hover:text-red-600 cursor-pointer text-lg leading-none";

/// 方形图标按钮（trash 步进 −/+）。
pub const BTN_ICON: &str =
    "w-9 h-9 flex items-center justify-center text-sm text-paper-secondary hover:text-paper-primary hover:bg-paper-theme cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-paper-accent/40";

// ===========================================================================
// 组件
// ===========================================================================

/// 分页导航组件。
///
/// 统一了后台与前台的分页 UI，通过 `variant` 切换配色与展示细节：
/// - `"admin"`：描边胶囊按钮（与 `BTN_OUTLINE` 同族），显示页码计数
///   （`{当前} / {总} 页 (共 {total} {unit})`），首尾页渲染禁用态。
/// - `"frontend"`：描边胶囊按钮与居中页码，首尾页不渲染越界按钮。
///
/// Props：
/// - `variant`：`"admin"` 或 `"frontend"`
/// - `current_page`：当前页码（从 1 开始）
/// - `total`：数据总条数
/// - `per_page`：每页条数，用于计算总页数
/// - `prev_route`：点击上一页跳转的目标路由（路由式翻页用；回调式翻页可不传，默认 `None`）
/// - `next_route`：点击下一页跳转的目标路由（路由式翻页用；回调式翻页可不传，默认 `None`）
/// - `unit`：计数单位（"篇" / "条"），仅 admin 显示计数时使用
/// - `on_prev` / `on_next`：可选回调。传入时渲染 `<button onclick>` 走客户端
///   signal 翻页（与路由式 `prev_route`/`next_route` 互斥，回调优先）；不传则保持
///   原路由式 `<Link>`。后台客户端分页列表（如「全部文章」）用回调翻页，
///   前台/其他分页页面仍走路由，零影响。
/// - `on_jump`：可选跳页回调。传入且总页数 > 1 时，admin 变体的当前页码渲染为
///   可编辑输入框——聚焦编辑、回车跳转（自动夹取到 `[1, total_pages]`，非法输入
///   还原为当前页）、失焦回显。仅回调式翻页可用——路由式翻页无法由任意页码反推
///   `Route`，故路由式调用方不传此 prop，页码保持纯文本。
/// - `compact`：admin 变体是否去掉默认外边距，供弹窗等固定底栏嵌入使用。
#[component]
pub fn Pagination<R: Routable + Clone + PartialEq + 'static>(
    variant: &'static str,
    current_page: i32,
    total: i64,
    per_page: i32,
    #[props(default)] prev_route: Option<R>,
    #[props(default)] next_route: Option<R>,
    unit: &'static str,
    #[props(default)] on_prev: Option<EventHandler<()>>,
    #[props(default)] on_next: Option<EventHandler<()>>,
    #[props(default)] on_jump: Option<EventHandler<i32>>,
    #[props(default)] compact: bool,
) -> Element {
    let has_prev = current_page > 1;
    let total_pages = ((total + per_page as i64 - 1) / per_page as i64).max(1) as i32;
    let has_next = current_page < total_pages;

    // admin 与 frontend 的配色差异。admin 上一页/下一页用描边胶囊，与本页其它
    // 操作按钮（BTN_OUTLINE）同族，避免出现方角实心按钮破坏整体圆角语言。
    let is_admin = variant == "admin";
    let nav_class = if is_admin {
        if compact {
            "flex justify-between"
        } else {
            "flex mt-6 justify-between"
        }
    } else {
        "frontend-pagination"
    };
    let (link_class, link_extra_next): (String, &'static str) = if is_admin {
        (
            format!("{BTN_OUTLINE} inline-flex items-center active:scale-[0.98]"),
            "",
        )
    } else {
        (
            format!("{BTN_OUTLINE} inline-flex items-center justify-center whitespace-nowrap focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-paper-primary"),
            "col-start-3 row-start-1 justify-self-end",
        )
    };
    let disabled_class =
        "inline-flex items-center px-4 py-2 text-sm font-medium text-paper-secondary border border-paper-border rounded-full cursor-not-allowed";

    // admin 首尾页渲染禁用态；frontend 首尾页直接不渲染。
    // on_prev/on_next 存在时走回调式 button（客户端 signal 翻页），否则走路由式 Link。
    let prev_inner = rsx! {
        span { class: "mr-1", "«" }
        "上一页"
    };
    let next_inner = rsx! {
        "下一页"
        span { class: "ml-1", "»" }
    };

    // 跳页状态：当前页码本身渲染为可编辑输入框（仅回调式翻页且多页时）。
    // `jump_editing` = 输入框聚焦态——聚焦期间显示草稿，失焦回显 current_page，
    // 与父组件翻页天然同步，无需 effect 桥接；`jump_draft` = 用户输入草稿。
    // 两者皆为独立 UI 状态（非派生镜像），合法 use_signal。
    let mut jump_editing: Signal<bool> = use_signal(|| false);
    let mut jump_draft: Signal<String> = use_signal(String::new);
    rsx! {
        nav { class: nav_class, aria_label: "分页导航",
            if has_prev {
                if let Some(on_prev) = on_prev {
                    button {
                        class: "{link_class}",
                        onclick: move |_| on_prev.call(()),
                        {prev_inner}
                    }
                } else if let Some(pr) = prev_route.clone() {
                    Link { class: "{link_class}", to: pr, {prev_inner} }
                }
            } else if is_admin {
                span { class: "{disabled_class}",
                    span { class: "mr-1", "«" }
                    "上一页"
                }
            }

            // admin 显示页码计数；回调式翻页且多页时，当前页码可直接编辑跳页。
            if is_admin {
                span { class: "flex items-center gap-1.5 self-center text-sm text-paper-secondary",
                    if total_pages > 1 && on_jump.is_some() {
                        FormInput {
                            r#type: "text",
                            placeholder: "",
                            value: if jump_editing() { jump_draft() } else { current_page.to_string() },
                            class: Some(
                                "w-11 px-1 py-0.5 text-sm text-center bg-transparent text-paper-primary border border-paper-border rounded-full hover:border-paper-accent/60 focus:outline-none focus:border-paper-accent transition-colors",
                            ),
                            inputmode: Some("numeric"),
                            title: Some("输入页码，回车跳转"),
                            oninput: move |v: String| jump_draft.set(v),
                            onfocus: move |_| {
                                jump_draft.set(current_page.to_string());
                                jump_editing.set(true);
                            },
                            onblur: move |_| jump_editing.set(false),
                            onkeydown: move |e: KeyboardEvent| {
                                if e.key() == Key::Enter {
                                    if let Some(on_jump) = on_jump {
                                        // 合法页码：夹取到 [1, total_pages] 后回调并回显；
                                        // 非法输入（空串/非数字）：还原为当前页。
                                        if let Ok(p) = jump_draft().trim().parse::<i32>() {
                                            let p = p.clamp(1, total_pages);
                                            on_jump.call(p);
                                            jump_draft.set(p.to_string());
                                        } else {
                                            jump_draft.set(current_page.to_string());
                                        }
                                    }
                                }
                            },
                        }
                    } else {
                        "{current_page}"
                    }
                    " / {total_pages} 页 (共 {total} {unit})"
                }
            } else {
                span {
                    class: "col-start-2 row-start-1 text-xs text-paper-secondary whitespace-nowrap tabular-nums",
                    aria_label: "第 {current_page} 页，共 {total_pages} 页",
                    aria_current: "page",
                    "{current_page} / {total_pages}"
                }
            }

            if has_next {
                if let Some(on_next) = on_next {
                    button {
                        class: "{link_class} {link_extra_next}",
                        onclick: move |_| on_next.call(()),
                        {next_inner}
                    }
                } else if let Some(nr) = next_route.clone() {
                    Link {
                        class: "{link_class} {link_extra_next}",
                        to: nr,
                        {next_inner}
                    }
                }
            } else if is_admin {
                span { class: "{disabled_class}",
                    "下一页"
                    span { class: "ml-1", "»" }
                }
            }
        }
    }
}

/// 状态徽章组件。
///
/// 外层固定 `BADGE_BASE`，颜色类由调用方传入。之所以用 `color_class` prop
/// 而非枚举变体，是因为部分场景（如回收站剩余天数）的颜色由动态逻辑决定
/// （>7 天中性 / ≤7 天主题绿 / ≤0 琥珀），硬编码 variant 反而不够灵活。
///
/// Props：
/// - `color_class`：背景与文字颜色类（如 `post.status.badge_class()` 的返回值）
/// - `label`：徽章文本
#[component]
pub fn StatusBadge(color_class: &'static str, label: String) -> Element {
    rsx! {
        span { class: "{BADGE_BASE} {color_class}", "{label}" }
    }
}

/// 首页封面与头像共用的树芽占位图。
#[component]
pub fn SproutPlaceholder(class: &'static str) -> Element {
    rsx! {
        svg { class, view_box: "0 0 32 32", fill: "none", "aria-hidden": "true",
            path { d: "M16 27V15M16 21C7 21 4 15 5 8C12 8 17 12 16 21ZM16 16C16 7 21 4 28 5C28 12 23 17 16 16M10 27H22", stroke: "currentColor", stroke_width: "1.2", stroke_linecap: "round", stroke_linejoin: "round" }
        }
    }
}

/// 用户头像：加载失败显示树芽，无图回退展示名首字符（accent 软底）。
///
/// 头像三态（图片 / 树芽 / 首字符）的统一实现，调用方经 `class` 控制尺寸与形状
/// （须含 `w-* h-* rounded-full` 与字号如 `text-xs`）。使用处：后台侧栏
/// 用户卡片（28px）、个人信息页身份卡（96px，外层按钮带 hover 遮罩）、
/// 前台评论表单身份行（24px）与评论列表（32px）。
///
/// Props：
/// - `name`：展示名（用于首字符兜底与 alt 文本）
/// - `avatar_url`：头像 URL；`None` 或空白串时渲染首字符兜底
/// - `class`：尺寸与形状类；组件内补 `object-cover`（图片）/ flex 居中（首字符）
#[component]
pub fn UserAvatar(name: String, avatar_url: Option<String>, class: &'static str) -> Element {
    // 按 URL 记录失败，更换头像后仍可重新加载。
    let mut failed_url = use_signal(|| None::<String>);
    let initial = name
        .chars()
        .next()
        .map(|c| c.to_uppercase().collect::<String>())
        .unwrap_or_else(|| "?".to_string());
    match avatar_url.filter(|u| !u.trim().is_empty()) {
        Some(url) if failed_url.read().as_ref() == Some(&url) => rsx! {
            span {
                class: "{class} flex items-center justify-center bg-paper-entry text-paper-tertiary",
                role: "img",
                aria_label: "{name} 的头像",
                SproutPlaceholder { class: "w-2/3 h-2/3" }
            }
        },
        Some(url) => {
            #[cfg(target_arch = "wasm32")]
            let url_for_mount = url.clone();
            rsx! {
                img {
                    class: "{class} object-cover",
                    src: "{url}",
                    alt: "{name} 的头像",
                    loading: "lazy",
                    decoding: "async",
                    onerror: move |_| failed_url.set(Some(url.clone())),
                    // SSR 图片可能在 hydration 前已失败，挂载时补查完成状态。
                    onmounted: move |_event| {
                        #[cfg(target_arch = "wasm32")]
                        {
                            use wasm_bindgen::JsCast;
                            if let Some(img) = _event.data().downcast::<web_sys::Element>()
                                .and_then(|element| element.dyn_ref::<web_sys::HtmlImageElement>())
                            {
                                if img.complete() && img.natural_width() == 0 {
                                    failed_url.set(Some(url_for_mount.clone()));
                                }
                            }
                        }
                    },
                }
            }
        }
        None => rsx! {
            span { class: "{class} flex items-center justify-center bg-[var(--color-paper-accent-soft)] text-[var(--color-paper-accent)] font-bold select-none",
                "{initial}"
            }
        },
    }
}

/// Tooltip 基础样式（胶囊：黑底白字，hover 显现）。水平定位由调用方经 `align` 选择，
/// 不在此处写死居中——触发器贴容器边缘时居中会让 tooltip 溢出被 `overflow-hidden` 裁掉。
const TOOLTIP_STYLE: &str =
    "pointer-events-none absolute px-3 py-1.5 text-xs font-medium whitespace-nowrap rounded-lg opacity-0 group-hover/tooltip:opacity-100 transition-opacity duration-200 bg-paper-primary text-paper-theme shadow-lg z-50";

/// Tooltip 包裹组件。
///
/// 将任意触发器（按钮等）包裹后，鼠标 hover 时在上方或下方弹出提示。
/// 用 CSS `group/tooltip` + `group-hover/tooltip:opacity-100` 实现，无 JS 状态，`pointer-events-none`
/// 保证不拦截点击。
///
/// Props：
/// - `tip`：提示文案
/// - `children`：触发器元素（按钮 / 链接等）
/// - `placement`：垂直方向，`"top"`（默认，弹出在触发器上方）或 `"bottom"`（下方）
/// - `align`：水平对齐，`"center"`（默认，居中）/ `"start"`（左对齐，向右延伸）/
///   `"end"`（右对齐，向左延伸）
///
/// 注意：父容器若有 `overflow-hidden`（如 `ADMIN_TABLE_CLASS`），`position:absolute`
/// 的 tooltip 会被裁掉。此时除选朝外的 `placement` 外，还须用 `align` 让 tooltip
/// 朝容器内侧延伸——否则居中的宽 tooltip 越过容器边缘即被裁（见 issue #14：
/// 表格最右列按钮的 tooltip 右半段被裁、左半段压住相邻内容）。
#[component]
pub fn Tooltip(
    tip: String,
    children: Element,
    #[props(default = "top")] placement: &'static str,
    #[props(default = "center")] align: &'static str,
) -> Element {
    // 朝上：tooltip 在触发器上方（bottom-full + mb-2）；朝下：在下方（top-full + mt-2）。
    let position_class = if placement == "bottom" {
        "top-full mt-2"
    } else {
        "bottom-full mb-2"
    };
    // 水平对齐：center 居中 / start 左对齐向右 / end 右对齐向左。
    let align_class = match align {
        "start" => "left-0",
        "end" => "right-0",
        _ => "left-1/2 -translate-x-1/2",
    };
    rsx! {
        div { class: "group/tooltip relative inline-flex",
            {children}
            div { class: "{TOOLTIP_STYLE} {position_class} {align_class}", "{tip}" }
        }
    }
}
/// 可折叠卡片外壳，默认使用后台设置样式，前台可通过 `class` 定制外观。
///
/// 复用回收站与系统设置的同一套交互：状态指示灯、摘要标题、旋转箭头，以及
/// `grid-template-rows` 的 0fr↔1fr 平滑展开。调用方通过 `children` 提供面板内容，
/// 通过 `on_toggle` 在展开状态变化时清理本地反馈等附加状态。
///
/// Props：
/// - `title`：卡片标题
/// - `summary`：标题下的当前状态摘要
/// - `enabled`：状态指示灯是否使用主题色
/// - `children`：折叠面板内容（调用方负责内容内边距与分隔线）
/// - `on_toggle`：可选的展开/收起回调
/// - `default_open`：首次挂载时是否展开
/// - `class` / `panel_id`：可选的外观类名与面板 ID（连接 aria-controls）
#[component]
pub fn CollapsibleSettingsCard(
    title: String,
    summary: String,
    enabled: bool,
    children: Element,
    #[props(default)] on_toggle: Option<EventHandler<()>>,
    #[props(default)] default_open: bool,
    #[props(default)] class: String,
    #[props(default)] panel_id: Option<String>,
) -> Element {
    let mut open = use_signal(|| default_open);
    let chevron_rotate = if open() { "rotate-180" } else { "" };
    let dot_class = if enabled {
        "w-2 h-2 rounded-full bg-paper-accent shadow-[0_0_0_3px_rgba(64,160,43,0.15)]"
    } else {
        "w-2 h-2 rounded-full bg-paper-tertiary"
    };

    rsx! {
        div {
            class: "collapsible-card rounded-2xl border border-paper-border overflow-hidden bg-paper-entry {class}",
            "data-open": "{open()}",
            button {
                r#type: "button",
                class: "collapsible-trigger w-full flex items-center gap-3 px-5 py-4 text-left cursor-pointer hover:bg-paper-theme focus:outline-none focus-visible:ring-2 focus-visible:ring-paper-accent/40",
                aria_expanded: "{open()}",
                aria_controls: panel_id.clone(),
                onclick: move |_| {
                    open.set(!open());
                    if let Some(on_toggle) = on_toggle {
                        on_toggle.call(());
                    }
                },
                div { class: "collapsible-indicator w-2 flex-shrink-0 flex items-center justify-center", aria_hidden: "true",
                    div { class: "{dot_class}" }
                }
                div { class: "collapsible-heading flex-1 min-w-0",
                    div { class: "collapsible-title text-sm font-medium text-paper-primary", "{title}" }
                    div { class: "collapsible-summary text-xs text-paper-secondary mt-0.5 truncate", "{summary}" }
                }
                svg {
                    class: "collapsible-chevron w-4 h-4 text-paper-secondary transition-transform duration-200 flex-shrink-0 {chevron_rotate}",
                    "aria-hidden": "true",
                    view_box: "0 0 24 24",
                    fill: "none",
                    stroke: "currentColor",
                    stroke_width: "2",
                    path {
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        d: "M19 9l-7 7-7-7",
                    }
                }
            }
            div {
                id: panel_id,
                class: "collapsible-panel",
                // 常驻 DOM 保留双向动画；收起时立即移出键盘与辅助技术的交互范围。
                inert: if open() { None } else { Some("") },
                div { class: "overflow-hidden min-h-0", {children} }
            }
        }
    }
}

/// Popover 遮罩与面板的层级(z-40 遮罩 < z-50 面板),与 Tooltip/lightbox 同 z-50。
const POPOVER_OVERLAY_CLASS: &str = "fixed inset-0 z-40";
/// Popover 面板:卡片化大圆角 + 阴影 + 淡入缩放动画。
/// 居中变体:animate-popover-enter 的关键帧烘了 translateX(-50%),与居中的
/// 静态 transform 一致;端点对齐(start/end)变体静态 transform 为空,必须换用
/// 无位移的 animate-popover-enter-edge,否则 both fill 期面板水平错位半宽。
const POPOVER_PANEL_CLASS: &str =
    "fixed z-50 bg-[var(--color-paper-entry)] rounded-2xl shadow-lg border border-[var(--color-paper-border)] p-4 animate-popover-enter";
const POPOVER_PANEL_EDGE_CLASS: &str =
    "fixed z-50 bg-[var(--color-paper-entry)] rounded-2xl shadow-lg border border-[var(--color-paper-border)] p-4 animate-popover-enter-edge";

/// 受控式通用 Popover(浮层)组件。
///
/// 与 [`Tooltip`] 对称——但 Tooltip 是纯 CSS hover、无状态;Popover 是点击触发、
/// 受控开关,用于承载确认框、轻量表单等交互内容。
///
/// ## 定位策略
///
/// 父容器常有 `overflow-hidden`(如 `ADMIN_TABLE_CLASS`),`position:absolute` 子节点
/// 会被裁掉,故面板用 **`position:fixed`**,以触发点击的**视口坐标**(`MouseEvent::
/// client_coordinates()`)作为锚点(参照 `theme.rs` 圆形展开动画的坐标用法)。无需
/// `getBoundingClientRect`/`node_ref`。
///
/// - `placement: "top"`(默认):面板底边贴点击点上方(`bottom: 100vh - y + gap`)。
/// - `placement: "bottom"`:面板顶边贴点击点下方(`top: y + gap`)。
/// - 水平由 `align` 决定:`"center"`(默认)面板中心对齐点击点(`left: x` +
///   `-translate-x-1/2`);`"start"` 面板左缘贴点向右延伸(`left: x`);
///   `"end"` 面板右缘贴点向左延伸(`right: 100vw - x`)。
///
/// 触发器贴近视口边缘时(如表格最右列的按钮),居中的宽面板会越出视口——
/// 此时用 `align` 让面板朝视口内侧延伸(与 Tooltip 的 align 同款约定,
/// 见 issue #14)。`end` 用 `right` 锚定右缘,与面板内容宽度无关,天然不越右缘。
///
/// ## 关闭路径(三条)
///
/// 1. 点遮罩(透明,仅作点击兜底)→ `on_close`。
/// 2. Escape 键 → `on_close`(组件内 `use_effect` 注册全局 keydown 监听,`use_drop` 清理)。
/// 3. 面板内确认/取消按钮调用 `on_close`。
///
/// ## Props
///
/// - `open`:受控开关;`false` 时组件不渲染任何内容(SSR 安全)。
/// - `anchor_x` / `anchor_y`:触发点击的视口坐标。
/// - `placement`:`"top"`(默认)/ `"bottom"`。
/// - `align`:`"center"`(默认)/ `"start"` / `"end"`(水平对齐,见上)。
/// - `children`:面板内容(确认框等)。
/// - `on_close`:任一关闭路径触发。
#[component]
#[cfg_attr(not(target_arch = "wasm32"), allow(unused_variables))]
pub fn Popover(
    open: bool,
    anchor_x: i32,
    anchor_y: i32,
    children: Element,
    on_close: EventHandler<()>,
    #[props(default = "top")] placement: &'static str,
    #[props(default = "center")] align: &'static str,
) -> Element {
    // Escape 关闭:组件 open 时注册全局 keydown 监听,关闭/卸载时移除。
    // 手写最小 listener 而非复用 use_event_listener——后者 handler 无参,拿不到
    // KeyboardEvent 的 key()。用 use_hook 持有 Closure,use_effect 注册,use_drop 清理。
    #[cfg(target_arch = "wasm32")]
    {
        use dioxus::prelude::{use_drop, use_effect, use_hook};
        use std::cell::RefCell;
        use std::rc::Rc;
        type EscState =
            Rc<RefCell<Option<wasm_bindgen::prelude::Closure<dyn FnMut(web_sys::KeyboardEvent)>>>>;
        let state: EscState = use_hook(|| Rc::new(RefCell::new(None)));
        let state_for_drop = state.clone();
        let open_for_effect = open;
        let on_close_for_esc = on_close;
        use_effect(move || {
            if !open_for_effect {
                return;
            }
            let Some(window) = web_sys::window() else {
                return;
            };
            let on_close_for_esc = on_close_for_esc;
            // Closure 带 KeyboardEvent 参数:浏览器调用 handler 时传入事件对象,
            // 无需依赖已废弃的 window.event()。as_ref + unchecked_ref 转成 JS Function。
            let closure =
                wasm_bindgen::prelude::Closure::wrap(Box::new(move |ev: web_sys::KeyboardEvent| {
                    if ev.key() == "Escape" {
                        on_close_for_esc.call(());
                    }
                })
                    as Box<dyn FnMut(web_sys::KeyboardEvent)>);
            let _ = window.add_event_listener_with_callback(
                "keydown",
                wasm_bindgen::JsCast::unchecked_ref(closure.as_ref()),
            );
            *state.borrow_mut() = Some(closure);
        });
        use_drop(move || {
            if let Some(closure) = state_for_drop.borrow_mut().take() {
                if let Some(window) = web_sys::window() {
                    let _ = window.remove_event_listener_with_callback(
                        "keydown",
                        wasm_bindgen::JsCast::unchecked_ref(closure.as_ref()),
                    );
                }
            }
        });
    }

    if !open {
        return rsx! {};
    }

    // 面板定位:placement 决定垂直方向;align 决定水平。end 用 right 锚定
    // (右缘 = 点击点),无需 translate,故与面板宽度解耦;start/end 的入场动画
    // 必须是无位移变体(关键帧 fill 值须等于静态 transform,见常量注释)。
    let horizontal = match align {
        "start" => format!("left: {x}px;", x = anchor_x),
        "end" => format!("right: calc(100vw - {x}px);", x = anchor_x),
        _ => format!("left: {x}px; transform: translateX(-50%);", x = anchor_x),
    };
    let style = if placement == "bottom" {
        format!("top: {y}px; {horizontal}", y = anchor_y + 8)
    } else {
        // top:面板在点击点上方——用 bottom 锚定 viewport 底,差值即视口高度 - y + 间隙。
        // 视口高度用 100vh,纯 CSS 无需 JS 读取 scrollHeight。
        format!(
            "bottom: calc(100vh - {y}px + 8px); {horizontal}",
            y = anchor_y
        )
    };
    let panel_class = if align == "center" {
        POPOVER_PANEL_CLASS
    } else {
        POPOVER_PANEL_EDGE_CLASS
    };

    rsx! {
        // 透明遮罩:拦截外部点击(点遮罩即关)。z-40 < 面板 z-50。
        div {
            class: "{POPOVER_OVERLAY_CLASS}",
            onclick: move |_| on_close.call(()),
        }
        // 面板:fixed 定位逃出 overflow-hidden 容器。
        div { class: "{panel_class}", style: "{style}", {children} }
    }
}

/// 弹窗关闭/元素退出动画统一时长（ms），与 input.css 里 `.modal-panel` / `.animate-row-leave`
/// 等退出过渡动画时长一一对应；调用方需要在动画播放完毕后再真正卸载/摘除元素时复用本常量。
pub const EXIT_ANIM_MS: u32 = 200;

/// 弹窗遮罩基础类（不含内边距——不同弹窗尺寸的响应式内边距不同，经 `overlay_padding` 传入）。
const MODAL_OVERLAY_BASE: &str = "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm modal-overlay animate-modal-overlay-enter";
/// 弹窗面板基础类（不含宽度——不同弹窗尺寸不同，经 `panel_class` 传入追加）。
const MODAL_PANEL_BASE: &str = "flex flex-col max-h-[80vh] rounded-[2rem] border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)] shadow-xl overflow-hidden modal-panel animate-modal-panel-enter";

/// 通用弹窗外壳：遮罩 + 面板容器 + 开合动画状态机（`opened` / `closing` / 退出计时）。
///
/// 收敛 `AssetUploadModal` / `AssetPickerModal` 曾各自照抄的一份遮罩 + 面板 + 开合动画
/// 状态机，顺带补齐两者曾意外分叉的 `role="dialog"` / `aria-modal` / `aria-label`
/// （此前只有 `AssetPickerModal` 有）。调用方仍各自负责标题栏、内容区等具体内容
/// （经 `children` 传入），以及自身域相关的开关副作用（如重置搜索词/选中集）。
///
/// ## 关闭路径与同帧动画
///
/// 本组件自身处理遮罩点击关闭。调用方若在 `children` 内还有别的关闭入口
/// （标题栏 × 按钮、选中即关闭等），必须用与本组件相同的写法**同步**先置
/// `closing.set(true)` 再置 `visible.set(false)`——同一帧内让存活元素换上
/// `.is-closing` 类，过渡动画才能从可见态播放（只翻 `visible`、等下一帧的
/// `use_effect` 兜底补置 `closing` 为时已晚，元素已被提前卸载，动画会变成
/// 瞬间消失而非淡出）。因此 `visible` / `closing` 是与调用方共享的 `Signal`，
/// 而非本组件内部私有状态；`opened`（mount 守卫）才是本组件私有的。
///
/// ## Props
///
/// - `visible` / `closing`：与调用方共享的显隐 / 关闭动画信号。
/// - `title`：面板的 `aria-label`（不渲染可见标题——各调用方的标题栏自行渲染）。
/// - `overlay_padding`：遮罩内边距（响应式内边距因弹窗尺寸而异，默认 `"p-6"`）。
/// - `panel_class`：在共享面板底座上追加的宽度等布局类（默认 `"w-full max-w-lg"`）。
/// - `children`：面板内容（含调用方自己的标题栏、× 按钮等）。
#[component]
pub fn ModalShell(
    mut visible: Signal<bool>,
    mut closing: Signal<bool>,
    title: &'static str,
    #[props(default = "p-6")] overlay_padding: &'static str,
    #[props(default = "w-full max-w-lg")] panel_class: &'static str,
    children: Element,
) -> Element {
    // 是否曾开过弹窗：mount 时 visible=false 也会跑一次 use_effect，不加此守卫会
    // 在页面加载后 EXIT_ANIM_MS 内渲染一层透明遮罩（opacity:0 仍拦截点击）吞掉首次点击。
    let mut opened = use_signal(|| false);

    // visible 翻转驱动关闭动画：关闭入口（× / 遮罩 / Esc）会同步先置 closing 再翻
    // visible（见本组件 doc）；这里只负责重开复位与 EXIT_ANIM_MS 后的复位卸载。
    // 闭包只订阅 visible，closing/opened 全用 peek 防自触发循环。
    use_effect(move || {
        if visible() {
            opened.set(true);
            closing.set(false);
        } else if *opened.peek() {
            // 非交互路径的 visible 翻转（理论上不存在）兜底补置 closing。
            if !*closing.peek() {
                closing.set(true);
            }
            spawn(async move {
                crate::utils::time::sleep_ms(EXIT_ANIM_MS).await;
                closing.set(false);
            });
        }
    });

    // closing() 的订阅读是必需的——closing.set 靠这个订阅触发重渲染，peek 不会重绘。
    let is_closing = closing();
    if !visible() && !is_closing {
        return rsx! {};
    }

    rsx! {
        // 遮罩：点击关闭。
        div {
            class: "{MODAL_OVERLAY_BASE} {overlay_padding}",
            class: if is_closing { "is-closing" } else { "" },
            onclick: move |_| {
                closing.set(true);
                visible.set(false);
            },
            // 面板：阻止点击穿透到遮罩。
            div {
                class: "{MODAL_PANEL_BASE} {panel_class}",
                role: "dialog",
                aria_modal: "true",
                aria_label: "{title}",
                onclick: move |evt| evt.stop_propagation(),
                {children}
            }
        }
    }
}

static TAB_GROUP_ID: std::sync::atomic::AtomicUsize = std::sync::atomic::AtomicUsize::new(0);

/// 筛选选项卡组件。
///
/// 用于切换不同的视图或筛选条件（例如：全部、待审核、已通过等）。
/// 具备高级的平滑滑动底部指示器动画。
///
/// Props：
/// - `items`：选项卡列表，每一项为 `(value, label)`
/// - `active_value`：当前选中的值
/// - `on_change`：选项卡切换时的回调
#[component]
pub fn FilterTabs(
    items: Vec<(&'static str, &'static str)>,
    active_value: String,
    on_change: EventHandler<String>,
) -> Element {
    #[allow(unused_mut)]
    let mut indicator_style = use_signal(|| "left: 0px; width: 0px; opacity: 0;".to_string());
    let id_prefix = use_hook(|| TAB_GROUP_ID.fetch_add(1, std::sync::atomic::Ordering::SeqCst));

    #[cfg_attr(not(target_arch = "wasm32"), allow(unused_variables))]
    let update_indicator = move |active: String| {
        spawn(async move {
            #[cfg(target_arch = "wasm32")]
            {
                use wasm_bindgen::JsCast;

                // 等待 DOM 节点更新
                crate::utils::time::sleep_ms(50).await;

                if let Some(window) = web_sys::window() {
                    if let Some(doc) = window.document() {
                        let element_id = format!("tab-{}-{}", id_prefix, active);
                        if let Some(el) = doc.get_element_by_id(&element_id) {
                            if let Ok(html_el) = el.dyn_into::<web_sys::HtmlElement>() {
                                let left = html_el.offset_left();
                                let width = html_el.offset_width();
                                indicator_style.set(format!(
                                    "left: {}px; width: {}px; opacity: 1;",
                                    left, width
                                ));
                            }
                        }
                    }
                }
            }
        });
    };

    use_effect({
        let active_value = active_value.clone();
        move || {
            update_indicator(active_value.clone());
        }
    });

    rsx! {
        div { class: "relative flex gap-4 border-b border-paper-border mb-6",
            for (value, label) in items {
                button {
                    id: "tab-{id_prefix}-{value}",
                    key: "{value}",
                    class: if active_value == *value { "cursor-pointer px-2 py-3 text-xs font-mono tracking-widest uppercase text-paper-primary transition-colors" } else { "cursor-pointer px-2 py-3 text-xs font-mono tracking-widest uppercase text-paper-secondary hover:text-paper-primary transition-colors" },
                    onclick: {
                        let v = value.to_string();
                        move |_| {
                            on_change.call(v.clone());
                            update_indicator(v.clone());
                        }
                    },
                    "{label}"
                }
            }
            // 绝对定位的滑动颜色条
            div {
                class: "absolute bottom-[-1px] h-[2px] bg-paper-primary transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] pointer-events-none",
                style: "{indicator_style}",
            }
        }
    }
}

/// 主操作按钮，内置 loading spinner 叠加（统一三态）。
///
/// 用于全站所有主题绿 CTA（执行 / 刷新 / 创建备份 / 发布 / 保存设置）。
/// 三态：
/// - `loading=true`：主题绿底 + 文字隐藏（`opacity-0`）+ spinner 绝对居中
///   （按钮宽度不变，避免加载时布局抖动）
/// - `disabled=true`（且未 loading）：灰色底（`bg-paper-tertiary`）+
///   `cursor-not-allowed`
/// - 正常：主题绿底 + `hover:brightness-110` + `active:scale-[0.98]`
///
/// Props：
/// - `label`：正常态显示的文案（loading 时隐藏，由 spinner 占位）
/// - `loading`：是否处于加载态
/// - `disabled`：是否禁用（loading 优先级更高）
/// - `variant`：`"primary"`（默认，`px-5 py-2`）或 `"sm"`（`px-4 py-1.5`）
/// - `onclick`：点击回调
#[component]
pub fn LoadingButton(
    label: String,
    loading: bool,
    #[props(default = false)] disabled: bool,
    #[props(default = "primary")] variant: &'static str,
    onclick: EventHandler<()>,
) -> Element {
    let base = if variant == "sm" {
        BTN_PRIMARY_SM
    } else {
        BTN_PRIMARY
    };
    // 尺寸随 base 常量而定；禁用态需要独立灰色配色（BTN_PRIMARY/_SM 未建模禁用态），
    // 故仅在此分支手写尺寸 + 灰色板，正常态直接复用常量，避免两套配色定义分叉。
    let class = if disabled && !loading {
        let size = if variant == "sm" {
            "px-4 py-1.5"
        } else {
            "px-5 py-2"
        };
        format!(
            "relative inline-flex items-center justify-center {size} rounded-full text-sm font-medium transition-all bg-[var(--color-paper-tertiary)] text-[var(--color-paper-secondary)] cursor-not-allowed"
        )
    } else {
        format!("relative {base}")
    };

    rsx! {
        button {
            class: "{class}",
            disabled: loading || disabled,
            onclick: move |_| onclick.call(()),
            span { class: if loading { "opacity-0" } else { "" }, "{label}" }
            if loading {
                span {
                    class: "absolute inset-0 flex items-center justify-center",
                    dangerous_inner_html: SPINNER_SVG,
                }
            }
        }
    }
}

/// 标签芯片组件：统一归档索引、软底标签、卡片胶囊与文字链接的展示。
///
/// 收敛原本散落在标签云与文章卡片（`post_card.rs` 描边胶囊）
/// 的两套手写 `Link` 样式——两者都是跳转到 [`Route::TagDetail`] 的可点击标签，
/// 仅视觉变体不同，故合并为一个组件 + `variant` prop。
///
/// Props：
/// - `label`：标签名
/// - `to`：跳转目标路由（泛型，调用方传入具体 `Route` 变体，原子层不绑定 app 路由类型）
/// - `variant`：`"archive"`（归档标签索引）/ `"solid"`（软底）/ `"outline"`（卡片胶囊）/ `"text"`（紧凑文章流）
/// - `count`：可选的文章计数，归档变体使用独立计数徽标，其余使用 `<sup>`
/// - `stop_propagation`：是否阻止点击冒泡（卡片内覆盖层链接场景需要，见 `PostCard`）
#[component]
pub fn TagChip<R: Routable + Clone + PartialEq + 'static>(
    label: String,
    to: R,
    #[props(default = "outline")] variant: &'static str,
    #[props(default)] count: Option<i64>,
    #[props(default)] stop_propagation: bool,
) -> Element {
    let class = match variant {
        "archive" => "archive-tag-chip",
        "solid" => "inline-flex items-center px-3 py-1.5 text-base font-medium bg-paper-accent-soft text-paper-accent rounded-lg hover:bg-paper-accent hover:text-white transition-all duration-200",
        "text" => "inline-flex items-center py-1 text-paper-secondary hover:text-paper-primary underline decoration-paper-border underline-offset-4 hover:decoration-paper-accent transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-paper-accent",
        _ => "inline-flex items-center px-3 py-1 rounded-full border border-paper-border hover:bg-paper-accent hover:border-paper-accent hover:text-white transition-all duration-200",
    };
    rsx! {
        Link {
            class: "{class}",
            to,
            onclick: move |evt: dioxus::events::MouseEvent| {
                if stop_propagation {
                    evt.stop_propagation();
                }
            },
            if variant == "archive" {
                span { class: "archive-tag-mark", aria_hidden: "true", "#" }
                span { class: "archive-tag-name", "{label}" }
            } else {
                "{label}"
            }
            if let Some(c) = count {
                if variant == "archive" {
                    span { class: "archive-tag-count", aria_label: "{c} 篇文章", "{c}" }
                } else {
                    sup { class: "ml-1 text-sm text-paper-secondary", "{c}" }
                }
            }
        }
    }
}

/// 带勾画动画的复选框：对勾 SVG 用 stroke-dashoffset 描边绘制 + scale 弹入。
///
/// 原生 `<input type="checkbox">` 是替换元素，吃不到 `::after`/`::before`，
/// 无法做 transform 描边动画。本组件用透明 input 做命中/无障碍层，同级 SVG
/// path 做对勾视觉层；勾选时 path 的 stroke-dashoffset 归零「画出」对勾，
/// 同时 SVG scale 从 0.6 弹入（弹跳曲线）——双层动画带来盖戳质感。
///
/// 与旧的 `.ygg-checkbox`（纯 background-size 缩放）相比，描边动画更像手写勾画，
/// 且 SVG 是矢量合成层，比光栅 background-image 缩放更锐利。
///
/// Props：
/// - `checked`：受控勾选态
/// - `onchange`：状态变化回调，返回新的 bool
/// - `danger`：危险态（红色语义，SQL 控制台「我了解后果」），缺省 `false`
#[component]
pub fn Checkbox(
    checked: bool,
    onchange: EventHandler<bool>,
    #[props(default)] danger: bool,
) -> Element {
    let wrap = if danger {
        "ygg-cb ygg-cb-danger"
    } else {
        "ygg-cb"
    };
    rsx! {
        span { class: "{wrap}",
            input {
                r#type: "checkbox",
                checked,
                onchange: move |e: Event<FormData>| onchange.call(e.checked()),
            }
            svg { class: "ygg-cb-mark", view_box: "0 0 16 16",
                path { class: "ygg-cb-check", d: "M3.5 8.5l3 3 6-6.5" }
            }
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn tooltip_uses_named_group_to_prevent_ancestor_trigger() {
        assert!(
            TOOLTIP_STYLE.contains("group-hover/tooltip:opacity-100"),
            "Tooltip 必须使用专属命名空间 group-hover/tooltip:opacity-100，避免被外层祖先 group 误触"
        );
    }
}