use dioxus::prelude::*;

use crate::infrastructure::graph::fetch_file_content;

#[component]
pub fn CodeInspector(
    repo_id: String,
    file_path: String,
    node_name: String,
    node_kind: String,
    start_line: u32,
    end_line: u32,
    on_close: EventHandler<()>,
) -> Element {
    let file_path_clone = file_path.clone();
    let repo_id_clone = repo_id.clone();
    let file_content = use_resource(move || {
        let rid = repo_id_clone.clone();
        let fp = file_path_clone.clone();
        async move {
            if fp.is_empty() {
                return None;
            }
            fetch_file_content(rid, fp).await.ok()
        }
    });

    rsx! {
        div { class: "code-inspector-panel",
            // Header
            div { class: "code-inspector-header",
                div { class: "code-inspector-title",
                    span { class: "badge badge-info", "SELECTED" }
                    span { class: "code-inspector-file-name", "{file_path}" }
                }
                div { class: "code-inspector-meta",
                    span { class: "node-label-badge node-kind-{node_kind}", "{node_kind}" }
                    span { class: "code-inspector-node-name", "{node_name}" }
                    if start_line > 0 && end_line > 0 {
                        span { class: "code-inspector-lines", "L{start_line}–L{end_line}" }
                    }
                }
                button {
                    class: "btn-sm code-inspector-close",
                    onclick: move |_| on_close.call(()),
                    "\u{2715}"
                }
            }

            // Content
            div { class: "code-inspector-body",
                match &*file_content.read() {
                    Some(Some(resp)) => {
                        let lines: Vec<&str> = resp.data.content.split('\n').collect();
                        rsx! {
                            div { class: "code-inspector-code",
                                for (i, line) in lines.iter().enumerate() {
                                    {
                                        let line_num = (i + 1) as u32;
                                        let is_highlighted = start_line > 0
                                            && line_num >= start_line
                                            && line_num <= end_line;
                                        let class_name = if is_highlighted {
                                            "code-line code-line-highlight"
                                        } else {
                                            "code-line"
                                        };
                                        rsx! {
                                            div {
                                                class: "{class_name}",
                                                id: if is_highlighted && line_num == start_line { "highlighted-line" } else { "" },
                                                span { class: "code-line-number", "{line_num}" }
                                                span { class: "code-line-content", "{line}" }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    },
                    Some(None) => rsx! {
                        div { class: "code-inspector-empty",
                            "Could not load file content."
                        }
                    },
                    None => rsx! {
                        div { class: "loading", "Loading file..." }
                    },
                }
            }
        }
    }
}
