//! File previews (milestone 4): browser-native media (image/PDF/video/audio)
//! and read-only CodeMirror for text/code.

use std::sync::{Arc, Mutex};

use api_types::FileKind;
use leptos::prelude::*;
use wasm_bindgen::JsValue;
use wasm_bindgen_futures::spawn_local;
use web_sys::MouseEvent;

use crate::api;
use crate::cm;

/// What kind of preview a file gets.
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum PreviewKind {
    Image,
    Pdf,
    Video,
    Audio,
    Text,
}

/// Which viewer opens this entry, from the server's sniffed [`FileKind`].
/// `None` = nothing we can show in the browser (download only).
pub fn preview_kind(kind: FileKind) -> Option<PreviewKind> {
    match kind {
        FileKind::Image => Some(PreviewKind::Image),
        FileKind::Pdf => Some(PreviewKind::Pdf),
        FileKind::Video => Some(PreviewKind::Video),
        FileKind::Audio => Some(PreviewKind::Audio),
        FileKind::Text => Some(PreviewKind::Text),
        FileKind::Dir | FileKind::Archive | FileKind::Binary => None,
    }
}

/// A file the user wants to preview.
#[derive(Clone)]
pub struct PreviewTarget {
    pub root_id: i64,
    /// Path relative to the root (e.g. "docs/a.txt").
    pub path: String,
    /// Display name (used for the title + language detection).
    pub name: String,
    #[allow(dead_code)]
    pub size: u64,
}

/// The preview overlay.
#[component]
pub fn PreviewModal(
    target: PreviewTarget,
    kind: PreviewKind,
    close: Callback<()>,
) -> impl IntoView {
    let t = target;
    let url = match kind {
        PreviewKind::Text => String::new(),
        _ => api::preview_url(t.root_id, &t.path),
    };
    let name = t.name.clone();
    // Escape closes the preview.
    {
        let c = close;
        crate::util::owned_window_listener(
            leptos::ev::keydown,
            move |ev: web_sys::KeyboardEvent| {
                if ev.key() == "Escape" {
                    c.run(());
                }
            },
        );
    }
    view! {
        <div class="modal-overlay preview-overlay" on:click=move |_| close.run(())>
            <div class="modal preview-modal" on:click=move |e: MouseEvent| e.stop_propagation()>
                <div class="preview-head">
                    <span class="preview-title">{name}</span>
                    <button class="preview-close" on:click=move |_| close.run(())>
                        "×"
                    </button>
                </div>
                <div class="preview-body">
                    {move || match kind {
                        PreviewKind::Image => {
                            view! { <img class="preview-img" src=url.clone() alt=t.name.clone()/> }
                                .into_view()
                                .into_any()
                        }
                        PreviewKind::Pdf => {
                            view! { <iframe class="preview-pdf" src=url.clone() title=t.name.clone()/> }
                                .into_view()
                                .into_any()
                        }
                        PreviewKind::Video => {
                            view! { <video class="preview-video" src=url.clone() controls=true/> }
                                .into_view()
                                .into_any()
                        }
                        PreviewKind::Audio => {
                            view! {
                                <div class="preview-audio">
                                    <audio src=url.clone() controls=true/>
                                </div>
                            }
                            .into_view()
                            .into_any()
                        }
                        PreviewKind::Text => view! {
                            <TextPreview target=t.clone()/>
                        }
                        .into_view()
                        .into_any()
                    }}
                </div>
            </div>
        </div>
    }
}

// ---------------------------------------------------------------------------
// Text preview (read-only CodeMirror)
// ---------------------------------------------------------------------------

#[component]
fn TextPreview(target: PreviewTarget) -> impl IntoView {
    let node = NodeRef::<leptos::html::Div>::new();
    // Some(err) when the file couldn't be loaded.
    let (status, set_status) = signal(Option::<String>::None);
    // Holds the live CodeMirror view so we can destroy it on close.
    let holder: Arc<Mutex<Option<JsValue>>> = Arc::new(Mutex::new(None));

    {
        let t = target.clone();
        let st = set_status;
        let h = holder.clone();
        node.on_load(move |el: web_sys::HtmlDivElement| {
            let t = t.clone();
            let st = st;
            let h = h.clone();
            spawn_local(async move {
                match api::fetch_content(t.root_id, &t.path).await {
                    Ok(text) => match cm::create(&el, &text, &t.name, false, None) {
                        Ok(c) => {
                            let _ = h.lock().map(|mut g| *g = Some(c.view.clone()));
                        }
                        Err(e) => st.set(Some(e)),
                    },
                    Err(e) => st.set(Some(e.to_string())),
                }
            });
        });
    }

    let h = holder.clone();
    on_cleanup(move || {
        if let Ok(mut g) = h.lock()
            && let Some(v) = g.take()
        {
            cm::destroy(&v);
        }
    });

    view! {
        <div class="cm-wrap">
            <div node_ref=node class="cm-container"></div>
            {move || {
                let err = status.get();
                match err {
                    Some(e) => view! { <div class="cm-error muted">{e}</div> }
                        .into_view()
                        .into_any(),
                    None => {
                        view! {}.into_any()
                    },
                }
            }}
        </div>
    }
}