//! 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};
use crate::components::toast::{ToastMsg, show};

/// 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)>,
    },
    /// Folder download — format choice (zip | tar | tar.gz | tar.zst).
    DownloadFormat {
        name: String,
        root_id: i64,
        path: String,
    },
    /// Read-only item info.
    Info {
        entry: Entry,
        root_name: String,
        rel_path: String,
    },
    /// Create a share link for an item.
    Share {
        name: String,
        root_id: i64,
        path: String,
        allow_writable: bool,
    },
}

/// 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 {
    // Escape closes the active dialog.
    {
        let d = dialog;
        let set_d = set_dialog;
        crate::util::owned_window_listener(
            leptos::ev::keydown,
            move |ev: web_sys::KeyboardEvent| {
                if ev.key() == "Escape" && d.get().is_some() {
                    set_d.set(None);
                }
            },
        );
    }
    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,
                        close,
                    );
                    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,
                        close,
                    );
                    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,
                        close,
                    );
                    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,
                        close,
                    );
                    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()
                }
                Dialog::DownloadFormat {
                    name,
                    root_id,
                    path,
                } => {
                    let (name, root_id, path) = (
                        name.clone(),
                        *root_id,
                        path.clone(),
                    );
                    view! {
                        <DownloadFormatDialog
                            name=name
                            root_id=root_id
                            path=path
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
                Dialog::Info {
                    entry,
                    root_name,
                    rel_path,
                } => {
                    let (entry, root_name, rel_path) = (
                        entry.clone(),
                        root_name.clone(),
                        rel_path.clone(),
                    );
                    view! {
                        <InfoDialog
                            entry=entry
                            root_name=root_name
                            rel_path=rel_path
                            on_close=close
                        />
                    }
                    .into_view()
                    .into_any()
                }
                Dialog::Share {
                    name,
                    root_id,
                    path,
                    allow_writable,
                } => {
                    let (name, root_id, path, allow_writable) = (
                        name.clone(),
                        *root_id,
                        path.clone(),
                        *allow_writable,
                    );
                    view! {
                        <crate::views::shares::ShareDialog
                            name=name
                            root_id=root_id
                            path=path
                            allow_writable=allow_writable
                            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
                    autofocus=true
                    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.is_writable();
                        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>
    }
}

// ---------------------------------------------------------------------------
// Download format (folder archive choice)
// ---------------------------------------------------------------------------

#[component]
fn DownloadFormatDialog(
    name: String,
    root_id: i64,
    path: String,
    on_close: Callback<()>,
) -> impl IntoView {
    let toast = use_context::<ToastMsg>().expect("toast context");
    let formats: [(&str, &str, &str); 4] = [
        ("zip", "Zip", ".zip"),
        ("tar", "Tar", ".tar"),
        ("tar.gz", "Tar + gzip", ".tar.gz"),
        ("tar.zst", "Tar + zstd", ".tar.zst"),
    ];
    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">{format!("Download “{name}”")}</h2>
                <p class="modal-message">"Choose an archive format for the folder."</p>
                <div class="dl-formats">
                    {formats.iter().map(|(id, label, ext)| {
                        let (id, label, ext) = (*id, *label, *ext);
                        let path = path.clone();
                        let name = name.clone();
                        view! {
                            <button
                                class="btn btn-primary dl-fmt"
                                on:click=move |_| {
                                    let url = api::download_url(root_id, &path, Some(id));
                                    let fname = format!("{name}{ext}");
                                    api::trigger_download(&url, &fname);
                                    show(toast, "Download started");
                                    on_close.run(());
                                }
                            >
                                {label}
                            </button>
                        }
                    }).collect::<Vec<_>>()}
                </div>
                <div class="modal-actions">
                    <button class="btn" on:click=move |_| on_close.run(())>
                        "Cancel"
                    </button>
                </div>
            </div>
        </div>
    }
}

// ---------------------------------------------------------------------------
// Item info
// ---------------------------------------------------------------------------

#[component]
fn InfoDialog(
    entry: Entry,
    root_name: String,
    rel_path: String,
    on_close: Callback<()>,
) -> impl IntoView {
    // `rel_path` is the item's full path relative to the root (e.g. "docs/a.txt").
    let is_dir = entry.is_dir;
    let size = if is_dir {
        "—".to_string()
    } else {
        crate::util::format_size(entry.size)
    };
    let modified = crate::util::format_date(&entry.mtime);
    let parent = rel_path.rsplit_once('/').map(|(p, _)| p).unwrap_or("");
    let location = if parent.is_empty() {
        format!("{root_name}/")
    } else {
        format!("{root_name}/{parent}")
    };
    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">"File info"</h2>
                <dl class="info-list">
                    <dt>"Name"</dt>
                    <dd>{entry.name.clone()}</dd>
                    <dt>"Type"</dt>
                    <dd>{if is_dir { "Folder".to_string() } else { "File".to_string() }}</dd>
                    <dt>"Size"</dt>
                    <dd>{size}</dd>
                    <dt>"Modified"</dt>
                    <dd>{modified}</dd>
                    <dt>"Location"</dt>
                    <dd>{location}</dd>
                </dl>
                <div class="modal-actions">
                    <button class="btn btn-primary" on:click=move |_| on_close.run(())>
                        "Close"
                    </button>
                </div>
            </div>
        </div>
    }
}