//! Modal dialogs: text prompts (new folder / rename), confirmations (delete),
//! overwrite conflict warnings, and the move/copy destination picker.

use leptos::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::MouseEvent;

use crate::api::{self, Entry, RootInfo};
use crate::components::icon::{Icon, IconName};

/// Which mutating operation the destination picker is for.
#[derive(Clone, Copy, PartialEq)]
pub enum Op {
    Move,
    Copy,
}

impl Op {
    pub fn verb(self) -> &'static str {
        match self {
            Op::Move => "Move",
            Op::Copy => "Copy",
        }
    }
}

/// The single active dialog. The browser renders whichever is `Some`.
#[derive(Clone)]
pub enum Dialog {
    /// Text input (new folder, rename).
    Prompt {
        title: String,
        label: String,
        initial: String,
        submit: String,
        on_submit: Callback<String>,
    },
    /// Simple confirmation (delete).
    Confirm {
        title: String,
        message: String,
        submit: String,
        danger: bool,
        on_submit: Callback<()>,
    },
    /// Overwrite warning listing the conflicting files.
    Conflict {
        title: String,
        files: Vec<String>,
        on_submit: Callback<()>,
    },
    /// Move/copy destination picker.
    Picker {
        op: Op,
        entry: Entry,
        roots: Vec<RootInfo>,
        source_root: i64,
        source_dir: String,
        on_pick: Callback<(i64, String)>,
    },
}

/// Split a "/"-separated directory path into its non-empty segments.
fn dir_segs(dir: &str) -> Vec<String> {
    dir.split('/')
        .filter(|s| !s.is_empty())
        .map(|s| s.to_string())
        .collect()
}

#[component]
pub fn DialogView(
    dialog: ReadSignal<Option<Dialog>>,
    set_dialog: WriteSignal<Option<Dialog>>,
) -> impl IntoView {
    view! {
        {move || {
            let Some(d) = dialog.get() else {
                return view! {}.into_any();
            };
            let close = Callback::new(move |_| set_dialog.set(None));
            match &d {
                Dialog::Prompt {
                    title,
                    label,
                    initial,
                    submit,
                    on_submit,
                } => {
                    let (title, label, initial, submit, on_submit, close) = (
                        title.clone(),
                        label.clone(),
                        initial.clone(),
                        submit.clone(),
                        on_submit.clone(),
                        close.clone(),
                    );
                    view! {
                        <PromptDialog
                            title=title
                            label=label
                            initial=initial
                            submit=submit
                            on_submit=on_submit
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
                Dialog::Confirm {
                    title,
                    message,
                    submit,
                    danger,
                    on_submit,
                } => {
                    let (title, message, submit, danger, on_submit, close) = (
                        title.clone(),
                        message.clone(),
                        submit.clone(),
                        *danger,
                        on_submit.clone(),
                        close.clone(),
                    );
                    view! {
                        <ConfirmDialog
                            title=title
                            message=message
                            submit=submit
                            danger=danger
                            on_submit=on_submit
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
                Dialog::Conflict {
                    title,
                    files,
                    on_submit,
                } => {
                    let (title, files, on_submit, close) = (
                        title.clone(),
                        files.clone(),
                        on_submit.clone(),
                        close.clone(),
                    );
                    view! {
                        <ConflictDialog
                            title=title
                            files=files
                            on_submit=on_submit
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
                Dialog::Picker {
                    op,
                    entry,
                    roots,
                    source_root,
                    source_dir,
                    on_pick,
                } => {
                    let (op, entry, roots, source_root, source_dir, on_pick, close) = (
                        *op,
                        entry.clone(),
                        roots.clone(),
                        *source_root,
                        source_dir.clone(),
                        on_pick.clone(),
                        close.clone(),
                    );
                    view! {
                        <PickerDialog
                            op=op
                            entry=entry
                            roots=roots
                            source_root=source_root
                            source_dir=source_dir
                            on_pick=on_pick
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
            }
        }}
    }
}

// ---------------------------------------------------------------------------
// Prompt (text input)
// ---------------------------------------------------------------------------

#[component]
fn PromptDialog(
    title: String,
    label: String,
    initial: String,
    submit: String,
    on_submit: Callback<String>,
    on_close: Callback<()>,
) -> impl IntoView {
    let input_id = "fbng-prompt-input";
    let id = input_id.to_string();
    let id2 = id.clone();
    let submit_cb = on_submit;
    view! {
        <div class="modal-overlay" on:click=move |_| on_close.run(())>
            <div class="modal card" on:click=move |e: MouseEvent| e.stop_propagation()>
                <h2 class="modal-title">{title}</h2>
                <label class="modal-label" for=input_id>{label}</label>
                <input
                    id=input_id
                    class="input"
                    value=initial
                    on:keydown=move |e: web_sys::KeyboardEvent| {
                        if e.key() == "Enter" {
                            e.prevent_default();
                            submit_cb.run(api::input_value(&id));
                        }
                    }
                />
                <div class="modal-actions">
                    <button class="btn" on:click=move |_| on_close.run(())>
                        "Cancel"
                    </button>
                    <button
                        class="btn btn-primary"
                        on:click=move |_| submit_cb.run(api::input_value(&id2))
                    >
                        {submit}
                    </button>
                </div>
            </div>
        </div>
    }
}

// ---------------------------------------------------------------------------
// Confirm
// ---------------------------------------------------------------------------

#[component]
fn ConfirmDialog(
    title: String,
    message: String,
    submit: String,
    danger: bool,
    on_submit: Callback<()>,
    on_close: Callback<()>,
) -> impl IntoView {
    view! {
        <div class="modal-overlay" on:click=move |_| on_close.run(())>
            <div class="modal card" on:click=move |e: MouseEvent| e.stop_propagation()>
                <h2 class="modal-title">{title}</h2>
                <p class="modal-message">{message}</p>
                <div class="modal-actions">
                    <button class="btn" on:click=move |_| on_close.run(())>
                        "Cancel"
                    </button>
                    <button
                        class=move || {
                            if danger {
                                "btn btn-danger".to_string()
                            } else {
                                "btn btn-primary".to_string()
                            }
                        }
                        on:click=move |_| {
                            on_submit.run(());
                            on_close.run(());
                        }
                    >
                        {submit}
                    </button>
                </div>
            </div>
        </div>
    }
}

// ---------------------------------------------------------------------------
// Conflict (overwrite warning)
// ---------------------------------------------------------------------------

#[component]
fn ConflictDialog(
    title: String,
    files: Vec<String>,
    on_submit: Callback<()>,
    on_close: Callback<()>,
) -> impl IntoView {
    let shown: Vec<String> = files.iter().take(20).cloned().collect();
    let extra = files.len().saturating_sub(shown.len());
    view! {
        <div class="modal-overlay" on:click=move |_| on_close.run(())>
            <div class="modal card" on:click=move |e: MouseEvent| e.stop_propagation()>
                <h2 class="modal-title">{title}</h2>
                <p class="modal-message">
                    "The following files already exist. Overwrite them?"
                </p>
                <ul class="conflict-list">
                    {shown.iter().map(|f| {
                        let f = f.clone();
                        view! { <li>{f}</li> }
                    }).collect::<Vec<_>>()}
                    {move || {
                        if extra > 0 {
                            view! { <li class="muted">format!("…and {extra} more") </li> }
                                .into_view()
                                .into_any()
                        } else {
                            view! {}.into_any()
                        }
                    }}
                </ul>
                <div class="modal-actions">
                    <button class="btn" on:click=move |_| on_close.run(())>
                        "Cancel"
                    </button>
                    <button
                        class="btn btn-danger"
                        on:click=move |_| {
                            on_submit.run(());
                            on_close.run(());
                        }
                    >
                        "Overwrite"
                    </button>
                </div>
            </div>
        </div>
    }
}

// ---------------------------------------------------------------------------
// Picker (move / copy destination)
// ---------------------------------------------------------------------------

#[component]
fn PickerDialog(
    op: Op,
    entry: Entry,
    roots: Vec<RootInfo>,
    source_root: i64,
    source_dir: String,
    on_pick: Callback<(i64, String)>,
    on_close: Callback<()>,
) -> impl IntoView {
    let (sel_root, set_sel_root) = signal(source_root);
    let (sel_dir, set_sel_dir) = signal(source_dir.clone());
    let (entries, set_entries) = signal(Vec::<Entry>::new());

    // Load the subfolders of the selected directory whenever it changes.
    {
        let root_sig = sel_root;
        let dir_sig = sel_dir;
        let set_ent = set_entries;
        Effect::new(move |_| {
            let rid = root_sig.get();
            let dir = dir_sig.get();
            set_ent.set(Vec::new());
            spawn_local(async move {
                match api::list_files(rid, &dir).await {
                    Ok(r) => set_ent.set(
                        r.entries
                            .into_iter()
                            .filter(|e| e.is_dir)
                            .collect(),
                    ),
                    Err(_) => set_ent.set(Vec::new()),
                }
            });
        });
    }

    let sel_root2 = sel_root;
    let sel_dir2 = sel_dir;
    let set_dir = set_sel_dir;
    let roots_by_id = roots.clone();
    view! {
        <div class="modal-overlay" on:click=move |_| on_close.run(())>
            <div class="modal card picker" on:click=move |e: MouseEvent| e.stop_propagation()>
                <h2 class="modal-title">
                    {move || format!("{} “{}” to…", op.verb(), entry.name)}
                </h2>

                <div class="picker-roots">
                    {roots.iter().map(|r| {
                        let rid = r.id;
                        let ro = r.mode == "ro";
                        let name = if ro {
                            format!("{} (read-only)", r.name)
                        } else {
                            r.name.clone()
                        };
                        view! {
                            <button
                                class=move || {
                                    if rid == sel_root2.get() {
                                        "btn root-opt active".to_string()
                                    } else {
                                        "btn root-opt".to_string()
                                    }
                                }
                                on:click=move |_| {
                                    set_sel_root.set(rid);
                                    set_sel_dir.set(String::new());
                                }
                            >
                                {name}
                            </button>
                        }
                    }).collect::<Vec<_>>()}
                </div>

                <p class="picker-current muted">
                    {move || {
                        let rid = sel_root2.get();
                        let rname = roots_by_id
                            .iter()
                            .find(|r| r.id == rid)
                            .map(|r| r.name.clone())
                            .unwrap_or_default();
                        let dir = sel_dir2.get();
                        if dir.is_empty() {
                            format!("{rname}/")
                        } else {
                            format!("{rname}/{dir}")
                        }
                    }}
                </p>

                // Breadcrumbs within the current directory.
                <div class="crumbs picker-crumbs">
                    <span
                        class="crumb"
                        on:click=move |_| set_dir.set(String::new())
                    >
                        "top"
                    </span>
                    {move || {
                        let segs = dir_segs(&sel_dir2.get());
                        segs
                            .iter()
                            .enumerate()
                            .map(|(i, seg)| {
                                let seg = seg.clone();
                                let prefix: String = segs[..=i].join("/");
                                let is_last = i == segs.len() - 1;
                                view! {
                                    <span class="crumb-sep">"/"</span>
                                    <span
                                        class=move || {
                                            if is_last {
                                                "crumb current".to_string()
                                            } else {
                                                "crumb".to_string()
                                            }
                                        }
                                        on:click=move |_| set_dir.set(prefix.clone())
                                    >
                                        {seg}
                                    </span>
                                }
                            })
                            .collect::<Vec<_>>()
                    }}
                </div>

                <div class="picker-entries">
                    {move || {
                        let es = entries.get();
                        if es.is_empty() {
                            view! {
                                <p class="muted center-note">
                                    "No subfolders — the file will be placed in the current folder."
                                </p>
                            }
                            .into_view()
                            .into_any()
                        } else {
                            es.iter()
                                .map(|e| {
                                    let name = e.name.clone();
                                    let name2 = name.clone();
                                    view! {
                                        <div
                                            class="picker-row"
                                            on:click=move |_| {
                                                let cur = sel_dir2.get();
                                                let newdir = if cur.is_empty() {
                                                    name2.clone()
                                                } else {
                                                    format!("{cur}/{name2}")
                                                };
                                                set_dir.set(newdir);
                                            }
                                        >
                                            <Icon name=IconName::Folder class=Some("row-icon".into())/>
                                            <span class="row-name">{name}</span>
                                        </div>
                                    }
                                })
                                .collect::<Vec<_>>()
                                .into_view()
                                .into_any()
                        }
                    }}
                </div>

                <div class="modal-actions">
                    <button class="btn" on:click=move |_| on_close.run(())>
                        "Cancel"
                    </button>
                    <button
                        class="btn btn-primary"
                        disabled=move || {
                            // Moving/copying into the exact same spot is a no-op.
                            sel_root2.get() == source_root && sel_dir2.get() == source_dir
                        }
                        on:click=move |_| {
                            let rid = sel_root2.get();
                            let dir = sel_dir2.get();
                            on_pick.run((rid, dir));
                            on_close.run(());
                        }
                    >
                        {move || format!("{} here", op.verb())}
                    </button>
                </div>
            </div>
        </div>
    }
}