use leptos::prelude::*;
use rustelo_content::rustelo_core_lib::i18n::use_unified_i18n;

use super::generated::related::{RelatedNode, RELATED_NODES};

fn kind_label(kind: &str) -> &'static str {
    match kind {
        "Implements"     | "ImplementedBy"  => "implements",
        "RelatedTo"      | "RelatedFrom"    => "related",
        "PartOf"         | "ParentOf"       => "part of",
        "References"     | "ReferencedBy"   => "references",
        "Extends"        | "ExtendedBy"     => "extends",
        "ManifestsIn"                        => "manifests in",
        "Resolves"                           => "resolves",
        "Complements"                        => "complements",
        "DependsOn"                          => "depends on",
        "DocumentedIn"                       => "documented in",
        _                                    => "related",
    }
}

fn kind_css(kind: &str) -> &'static str {
    match kind {
        "Implements" | "ImplementedBy" => "ds-badge-primary",
        "RelatedTo"  | "RelatedFrom"   => "ds-badge-secondary",
        "PartOf"     | "ParentOf"      => "ds-badge-accent",
        "References" | "ReferencedBy"  => "ds-badge-neutral",
        _                              => "ds-badge-ghost",
    }
}

/// Sidebar list of related content items for a given node.
///
/// Nodes with a URL (content items and Practice-level ontology nodes) render as
/// links for SPA navigation. Nodes without a URL render as plain text.
#[component]
pub fn RelatedContent(node_id: String) -> impl IntoView {
    let related: &'static [RelatedNode] = RELATED_NODES
        .iter()
        .find(|(id, _)| *id == node_id.as_str())
        .map(|(_, nodes)| *nodes)
        .unwrap_or(&[]);

    let header = use_unified_i18n().t("content-graph-related");

    (!related.is_empty()).then(|| view! {
        <aside class="content-graph-related ds-card ds-bg-base-200 p-4 space-y-3">
            <h3 class="text-sm font-semibold ds-text uppercase tracking-wide opacity-60">
                {header}
            </h3>
            <ul class="space-y-2">
                {related.iter().map(|node| {
                    let badge = kind_css(node.kind);
                    let label = kind_label(node.kind);
                    view! {
                        <li class="flex items-start gap-2">
                            <span class=format!("ds-badge text-xs mt-0.5 shrink-0 {badge}")>
                                {label}
                            </span>
                            {if node.url.is_empty() {
                                // Ontology / category node — no URL, plain text
                                view! {
                                    <span class="text-sm ds-text leading-snug">{node.title}</span>
                                }.into_any()
                            } else {
                                // Content node — plain <a>; Leptos BrowserRouter intercepts
                                // clicks on internal hrefs for SPA navigation automatically.
                                // Styled via .content-graph-related a in custom.css.
                                view! {
                                    <a href=node.url>{node.title}</a>
                                }.into_any()
                            }}
                        </li>
                    }
                }).collect_view()}
            </ul>
        </aside>
    })
}
