lodviz_components 0.3.0

/// Column header row with sort + filter controls, and toolbar.
use std::collections::HashMap;

use leptos::prelude::*;
use lodviz_core::core::table_data::{ColumnType, FilterOp, SortDir, SortKey, TableData};

use super::column_filter::UnifiedFilterMenu;
use super::column_filter_popover::ColumnFilterPopover;

// ═══════════════════════════════════════════════════════════════════════════
// TableHeader
// ═══════════════════════════════════════════════════════════════════════════

#[component]
pub fn TableHeader(
    data: Signal<TableData>,
    sort_state: RwSignal<Vec<SortKey>>,
    col_visibility: RwSignal<Vec<bool>>,
    /// Global filter state (multi-column filters)
    filter_state: RwSignal<HashMap<usize, FilterOp>>,
    /// Whether all rows are selected (drives select-all checkbox state).
    all_selected: Signal<bool>,
    /// Whether some but not all rows are selected (indeterminate state).
    some_selected: Signal<bool>,
    on_select_all: impl Fn(bool) + 'static,
) -> impl IntoView {
    // Which column's filter popover is currently open (if any)
    let active_filter_popover = RwSignal::new(None::<usize>);
    view! {
        <thead class="sticky top-0 z-10" style="background: var(--table-header-bg);">
            <tr>
                // ── Select-all checkbox ──────────────────────────────────
                <th class="w-10 px-3 py-3 border-b" style="border-color: var(--table-border);">
                    <input
                        type="checkbox"
                        class="rounded"
                        style="border-color: var(--table-input-border); accent-color: var(--table-primary);"
                        prop:checked=all_selected
                        prop:indeterminate=some_selected
                        on:change=move |ev| {
                            let checked = event_target_checked(&ev);
                            on_select_all(checked);
                        }
                    />
                </th>

                // ── Column headers ───────────────────────────────────────
                {move || {
                    data.get()
                        .columns
                        .iter()
                        .enumerate()
                        .filter_map(|(ci, col)| {
                            let is_visible = col_visibility.get().get(ci).copied().unwrap_or(true);
                            if !is_visible {
                                return None;
                            }
                            let label = col.label.clone();
                            let label_filter = label.clone();
                            let col_type = col.col_type.clone();
                            let sortable = col.sortable;
                            let filterable = col.filterable;
                            let col_width = col.width;
                            let sort_badge = Signal::derive(move || {
                                sort_state
                                    .get()
                                    .iter()
                                    .enumerate()
                                    .find_map(|(order, k)| {
                                        if k.col_index == ci {
                                            Some((order + 1, k.direction))
                                        } else {
                                            None
                                        }
                                    })
                            });
                            let col_style = col_width
                                .map(|w| format!("width: {w}px; min-width: {w}px;"))
                                .unwrap_or_default();
                            Some(
                                view! {
                                    <th
                                        class="relative px-3 py-3 text-left text-xs font-semibold uppercase tracking-wider border-b whitespace-nowrap"
                                        style=format!(
                                            "color: var(--table-header-text); border-color: var(--table-border); {col_style}",
                                        )
                                    >
                                        <div class="flex items-center gap-1.5">
                                            // Column label + sort button
                                            <button
                                                class="flex items-center gap-1 group"
                                                class:cursor-default=move || !sortable
                                                disabled=move || !sortable
                                                on:click=move |ev| {
                                                    if !sortable {
                                                        return;
                                                    }
                                                    let shift = ev.shift_key();
                                                    sort_state
                                                        .update(|keys| {
                                                            if let Some(pos) = keys
                                                                .iter()
                                                                .position(|k| k.col_index == ci)
                                                            {
                                                                let dir = keys[pos].direction.toggle();
                                                                if keys[pos].direction == SortDir::Desc {
                                                                    keys.remove(pos);
                                                                } else {
                                                                    keys[pos].direction = dir;
                                                                }
                                                            } else if shift {
                                                                keys.push(SortKey {
                                                                    col_index: ci,
                                                                    direction: SortDir::Asc,
                                                                });
                                                            } else {
                                                                keys.clear();
                                                                keys.push(SortKey {
                                                                    col_index: ci,
                                                                    direction: SortDir::Asc,
                                                                });
                                                            }
                                                        });
                                                }
                                            >
                                                <span class="flex flex-col items-start">
                                                    <span>{label}</span>
                                                    // Type badge
                                                    <span class="text-[10px] opacity-50 font-normal normal-case">
                                                        {move || {
                                                            let type_label = match &col_type {
                                                                ColumnType::Text => "Text",
                                                                ColumnType::Number => "Number",
                                                                ColumnType::Boolean => "Boolean",
                                                                ColumnType::Category(_) => "Category",
                                                            };
                                                            format!("({})", type_label)
                                                        }}
                                                    </span>
                                                </span>

                                                // Sort icon (always render, vary opacity)
                                                {move || {
                                                    match sort_badge.get() {
                                                        Some((_, SortDir::Asc)) => {
                                                            view! {
                                                                <svg
                                                                    class="w-3 h-3"
                                                                    style="color: var(--table-primary);"
                                                                    fill="none"
                                                                    viewBox="0 0 24 24"
                                                                    stroke="currentColor"
                                                                >
                                                                    <path
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="2.5"
                                                                        d="M5 15l7-7 7 7"
                                                                    />
                                                                </svg>
                                                            }
                                                                .into_any()
                                                        }
                                                        Some((_, SortDir::Desc)) => {
                                                            view! {
                                                                <svg
                                                                    class="w-3 h-3"
                                                                    style="color: var(--table-primary);"
                                                                    fill="none"
                                                                    viewBox="0 0 24 24"
                                                                    stroke="currentColor"
                                                                >
                                                                    <path
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="2.5"
                                                                        d="M19 9l-7 7-7-7"
                                                                    />
                                                                </svg>
                                                            }
                                                                .into_any()
                                                        }
                                                        None if sortable => {
                                                            view! {
                                                                <svg
                                                                    class="w-3 h-3"
                                                                    style="color: var(--table-muted);"
                                                                    fill="none"
                                                                    viewBox="0 0 24 24"
                                                                    stroke="currentColor"
                                                                >
                                                                    <path
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
                                                                    />
                                                                </svg>
                                                            }
                                                                .into_any()
                                                        }
                                                        _ => view! { <span /> }.into_any(),
                                                    }
                                                }}

                                                // Multi-sort order badge
                                                {move || {
                                                    sort_badge
                                                        .get()
                                                        .and_then(|(order, _)| {
                                                            if order <= 1 {
                                                                return None;
                                                            }
                                                            Some(
                                                                view! {
                                                                    <span
                                                                        class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold"
                                                                        style="background: var(--table-primary); color: #fff;"
                                                                    >
                                                                        {order}
                                                                    </span>
                                                                },
                                                            )
                                                        })
                                                }}
                                            </button>

                                            // ── Filter icon button ──────────────────────
                                            {move || {
                                                if !filterable {
                                                    return view! { <span /> }.into_any();
                                                }
                                                let has_filter = Signal::derive(move || {
                                                    filter_state.get().contains_key(&ci)
                                                });
                                                let is_popover_open = Signal::derive(move || {
                                                    active_filter_popover.get() == Some(ci)
                                                });
                                                view! {
                                                    <div class="relative">
                                                        <button
                                                            class="p-0.5 rounded"
                                                            style=move || {
                                                                if has_filter.get() {
                                                                    "color: var(--table-primary);"
                                                                } else {
                                                                    "color: var(--table-muted);"
                                                                }
                                                            }
                                                            aria-label=format!("Filtra colonna {}", label_filter)
                                                            aria-pressed=is_popover_open
                                                            on:click=move |ev| {
                                                                ev.stop_propagation();
                                                                active_filter_popover
                                                                    .update(|cur| {
                                                                        if *cur == Some(ci) {
                                                                            *cur = None;
                                                                        } else {
                                                                            *cur = Some(ci);
                                                                        }
                                                                    });
                                                            }
                                                        >
                                                            // Filter funnel icon
                                                            <svg
                                                                class="w-3.5 h-3.5"
                                                                fill="none"
                                                                viewBox="0 0 24 24"
                                                                stroke="currentColor"
                                                            >
                                                                <path
                                                                    stroke-linecap="round"
                                                                    stroke-linejoin="round"
                                                                    stroke-width="2"
                                                                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                                                                />
                                                            </svg>

                                                            // Badge dot when filter active
                                                            {move || {
                                                                if has_filter.get() {
                                                                    view! {
                                                                        <span
                                                                            class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
                                                                            style="background: var(--table-primary);"
                                                                        />
                                                                    }
                                                                        .into_any()
                                                                } else {
                                                                    view! { <span /> }.into_any()
                                                                }
                                                            }}
                                                        </button>
                                                    </div>
                                                }
                                                    .into_any()
                                            }}
                                        </div>

                                        // ── Filter Popover (rendered below header) ─────
                                        {move || {
                                            if active_filter_popover.get() == Some(ci) {
                                                let total_cols = data.get().columns.len();
                                                let is_right_side = ci >= total_cols / 2;
                                                let position_class = if is_right_side {
                                                    "absolute right-0 mt-1 z-50"
                                                } else {
                                                    "absolute left-0 mt-1 z-50"
                                                };
                                                view! {
                                                    <div>
                                                        // Backdrop (click to close)
                                                        <div
                                                            class="fixed inset-0 z-40"
                                                            on:click=move |_| active_filter_popover.set(None)
                                                        />

                                                        // Popover with smart positioning
                                                        <div class=position_class>
                                                            <ColumnFilterPopover
                                                                col_index=ci
                                                                filter_state=filter_state
                                                                data=data
                                                                on_close=move || active_filter_popover.set(None)
                                                            />
                                                        </div>
                                                    </div>
                                                }
                                                    .into_any()
                                            } else {
                                                view! { <span /> }.into_any()
                                            }
                                        }}
                                    </th>
                                },
                            )
                        })
                        .collect_view()
                }}
            </tr>
        </thead>
    }
}

// ═══════════════════════════════════════════════════════════════════════════
// TableToolbar
// ═══════════════════════════════════════════════════════════════════════════

/// Toolbar: column visibility toggle + filter menu.
#[component]
pub fn TableToolbar(
    data: Signal<TableData>,
    filter_state: RwSignal<HashMap<usize, FilterOp>>,
    col_visibility: RwSignal<Vec<bool>>,
    selected_count: Signal<usize>,
    show_global_filters: RwSignal<bool>,
) -> impl IntoView {
    let show_col_menu = RwSignal::new(false);

    view! {
        <div
            class="flex items-center gap-3 px-4 py-2.5 border-b flex-wrap"
            style="background: var(--table-header-bg); border-color: var(--table-border);"
        >
            // ── Selection badge ──────────────────────────────────────────────
            <Show when=move || selected_count.get() != 0>
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                    style="background: color-mix(in srgb, var(--table-primary) 15%, transparent); color: var(--table-primary);"
                >
                    {move || format!("{} selected", selected_count.get())}
                </span>
            </Show>

            // ── Toolbar Actions ─────────────────────────────────────────────
            <div class="flex items-center gap-2">

                // ── Global Filter Toggle ───────────────────────────────────────
                <div class="relative">
                    <button
                        class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border rounded-md"
                        style=move || {
                            if show_global_filters.get() {
                                "border-color: var(--table-primary); background: color-mix(in srgb, var(--table-primary) 15%, transparent); color: var(--table-primary);"
                            } else {
                                "border-color: var(--table-border); background: var(--table-bg); color: var(--table-text);"
                            }
                        }
                        on:click=move |_| {
                            show_col_menu.set(false);
                            show_global_filters.update(|v| *v = !*v)
                        }
                    >
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"
                            />
                        </svg>
                        "Filters"
                        <Show when=move || !filter_state.get().is_empty()>
                            <span
                                class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold ml-1"
                                style="background: var(--table-primary); color: #fff;"
                            >
                                {move || filter_state.get().len()}
                            </span>
                        </Show>
                    </button>

                    // ── Global Filter Popover ───────────────────────────────────────
                    <Show when=move || show_global_filters.get()>
                        <div
                            class="fixed inset-0 z-40"
                            on:click=move |_| show_global_filters.set(false)
                        />
                        <div class="absolute right-0 top-full mt-1 z-50">
                            <UnifiedFilterMenu
                                data=data
                                filter_state=filter_state
                                on_close=move || show_global_filters.set(false)
                            />
                        </div>
                    </Show>
                // End of Filters relative wrapper
                </div>

                // ── Column visibility menu ───────────────────────────────────────
                <div class="relative">
                    <button
                        class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border rounded-md"
                        style="border-color: var(--table-border); background: var(--table-bg); color: var(--table-text);"
                        on:click=move |_| show_col_menu.update(|v| *v = !*v)
                    >
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"
                            />
                        </svg>
                        "Columns"
                    </button>

                    <Show when=move || show_col_menu.get()>
                        // Backdrop
                        <div
                            class="fixed inset-0 z-40"
                            on:click=move |_| show_col_menu.set(false)
                        />
                        // Dropdown
                        <div
                            class="absolute right-0 top-full mt-1 z-50 min-w-40 rounded-lg shadow-lg overflow-hidden border"
                            style="background: var(--table-bg); border-color: var(--table-border);"
                        >
                            <div
                                class="px-3 py-2 border-b flex items-center justify-between gap-4"
                                style="border-color: var(--table-border);"
                            >
                                <span
                                    class="text-xs font-semibold uppercase tracking-wide"
                                    style="color: var(--table-muted);"
                                >
                                    "Visible Columns"
                                </span>
                                <button
                                    class="text-xs"
                                    style="color: var(--table-primary);"
                                    on:click=move |_| {
                                        col_visibility
                                            .update(|v| v.iter_mut().for_each(|x| *x = true))
                                    }
                                >
                                    "All"
                                </button>
                            </div>
                            <div class="py-1 max-h-64 overflow-y-auto w-max">
                                {move || {
                                    data.get()
                                        .columns
                                        .iter()
                                        .enumerate()
                                        .map(|(ci, col)| {
                                            let label = col.label.clone();
                                            let is_visible = Signal::derive(move || {
                                                col_visibility.get().get(ci).copied().unwrap_or(true)
                                            });
                                            view! {
                                                <label
                                                    class="flex items-center gap-2.5 px-4 py-1.5 text-sm cursor-pointer whitespace-nowrap"
                                                    style="color: var(--table-text);"
                                                >
                                                    <input
                                                        type="checkbox"
                                                        class="rounded"
                                                        style="border-color: var(--table-input-border); accent-color: var(--table-primary);"
                                                        prop:checked=is_visible
                                                        on:change=move |_| {
                                                            col_visibility
                                                                .update(|v| {
                                                                    if let Some(vis) = v.get_mut(ci) {
                                                                        *vis = !*vis;
                                                                    }
                                                                });
                                                        }
                                                    />
                                                    {label}
                                                </label>
                                            }
                                        })
                                        .collect_view()
                                }}
                            </div>
                        </div>
                    </Show>
                // End of Columns relative wrapper
                </div>

            // End of flex container
            </div>
        </div>
    }
}