use leptos::prelude::*;
use rustelo_content::rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;

use rustelo_components_leptos::ImageModal;
use crate::content_graph::ProjectGraphSection;

struct UiPage {
    title_key: &'static str,
    desc_key: &'static str,
    emoji: &'static str,
}

const UI_PAGES: &[UiPage] = &[
    UiPage {
        title_key: "ontoref-ui-dashboard-title",
        desc_key: "ontoref-ui-dashboard-desc",
        emoji: "📊",
    },
    UiPage {
        title_key: "ontoref-ui-graph-title",
        desc_key: "ontoref-ui-graph-desc",
        emoji: "🕸️",
    },
    UiPage {
        title_key: "ontoref-ui-search-title",
        desc_key: "ontoref-ui-search-desc",
        emoji: "🔍",
    },
    UiPage {
        title_key: "ontoref-ui-sessions-title",
        desc_key: "ontoref-ui-sessions-desc",
        emoji: "👥",
    },
    UiPage {
        title_key: "ontoref-ui-notifications-title",
        desc_key: "ontoref-ui-notifications-desc",
        emoji: "🔔",
    },
    UiPage {
        title_key: "ontoref-ui-backlog-title",
        desc_key: "ontoref-ui-backlog-desc",
        emoji: "📋",
    },
    UiPage {
        title_key: "ontoref-ui-qa-title",
        desc_key: "ontoref-ui-qa-desc",
        emoji: "💬",
    },
    UiPage {
        title_key: "ontoref-ui-actions-title",
        desc_key: "ontoref-ui-actions-desc",
        emoji: "⚡",
    },
    UiPage {
        title_key: "ontoref-ui-modes-title",
        desc_key: "ontoref-ui-modes-desc",
        emoji: "🔀",
    },
    UiPage {
        title_key: "ontoref-ui-compose-title",
        desc_key: "ontoref-ui-compose-desc",
        emoji: "🎛️",
    },
];

struct McpGroup {
    title_key: &'static str,
    desc_key: &'static str,
    emoji: &'static str,
}

const MCP_GROUPS: &[McpGroup] = &[
    McpGroup {
        title_key: "ontoref-mcp-core-title",
        desc_key: "ontoref-mcp-core-desc",
        emoji: "🧭",
    },
    McpGroup {
        title_key: "ontoref-mcp-query-title",
        desc_key: "ontoref-mcp-query-desc",
        emoji: "🔎",
    },
    McpGroup {
        title_key: "ontoref-mcp-backlog-title",
        desc_key: "ontoref-mcp-backlog-desc",
        emoji: "📝",
    },
    McpGroup {
        title_key: "ontoref-mcp-knowledge-title",
        desc_key: "ontoref-mcp-knowledge-desc",
        emoji: "🗄️",
    },
];

struct Problem {
    title_key: &'static str,
    desc_key: &'static str,
}

const PROBLEMS: &[Problem] = &[
    Problem {
        title_key: "ontoref-problem-1-title",
        desc_key: "ontoref-problem-1-desc",
    },
    Problem {
        title_key: "ontoref-problem-2-title",
        desc_key: "ontoref-problem-2-desc",
    },
    Problem {
        title_key: "ontoref-problem-3-title",
        desc_key: "ontoref-problem-3-desc",
    },
    Problem {
        title_key: "ontoref-problem-4-title",
        desc_key: "ontoref-problem-4-desc",
    },
    Problem {
        title_key: "ontoref-problem-5-title",
        desc_key: "ontoref-problem-5-desc",
    },
    Problem {
        title_key: "ontoref-problem-6-title",
        desc_key: "ontoref-problem-6-desc",
    },
    Problem {
        title_key: "ontoref-problem-7-title",
        desc_key: "ontoref-problem-7-desc",
    },
];

struct ProtocolLayer {
    label_key: &'static str,
    items_key: &'static str,
    desc_key: &'static str,
    accent: &'static str,
}

const PROTOCOL_LAYERS: &[ProtocolLayer] = &[
    ProtocolLayer {
        label_key: "ontoref-layer-decl-label",
        items_key: "ontoref-layer-decl-items",
        desc_key: "ontoref-layer-decl-desc",
        accent: "#60a5fa",
    },
    ProtocolLayer {
        label_key: "ontoref-layer-op-label",
        items_key: "ontoref-layer-op-items",
        desc_key: "ontoref-layer-op-desc",
        accent: "#f97316",
    },
    ProtocolLayer {
        label_key: "ontoref-layer-entry-label",
        items_key: "ontoref-layer-entry-items",
        desc_key: "ontoref-layer-entry-desc",
        accent: "#4ade80",
    },
    ProtocolLayer {
        label_key: "ontoref-layer-graph-label",
        items_key: "ontoref-layer-graph-items",
        desc_key: "ontoref-layer-graph-desc",
        accent: "#c084fc",
    },
    ProtocolLayer {
        label_key: "ontoref-layer-runtime-label",
        items_key: "ontoref-layer-runtime-items",
        desc_key: "ontoref-layer-runtime-desc",
        accent: "#22d3ee",
    },
    ProtocolLayer {
        label_key: "ontoref-layer-adopt-label",
        items_key: "ontoref-layer-adopt-items",
        desc_key: "ontoref-layer-adopt-desc",
        accent: "#facc15",
    },
];

struct Crate {
    title_key: &'static str,
    desc_key: &'static str,
    emoji: &'static str,
}

const CRATES: &[Crate] = &[
    Crate {
        title_key: "ontoref-crate-ontology-title",
        desc_key: "ontoref-crate-ontology-desc",
        emoji: "🦀",
    },
    Crate {
        title_key: "ontoref-crate-reflection-title",
        desc_key: "ontoref-crate-reflection-desc",
        emoji: "🔄",
    },
    Crate {
        title_key: "ontoref-crate-nushell-title",
        desc_key: "ontoref-crate-nushell-desc",
        emoji: "📜",
    },
    Crate {
        title_key: "ontoref-crate-nickel-title",
        desc_key: "ontoref-crate-nickel-desc",
        emoji: "⚙️",
    },
    Crate {
        title_key: "ontoref-crate-daemon-title",
        desc_key: "ontoref-crate-daemon-desc",
        emoji: "🔧",
    },
];

const TECH_BADGES: &[&str] = &[
    "Rust",
    "Axum",
    "Nickel",
    "Nushell",
    "SurrealDB",
    "Cytoscape.js",
    "MCP (stdio + HTTP)",
    "NATS (feature-gated)",
    "Tera",
    "Git-versioned",
];

/// Projects that have adopted ontoref — (name, role)
const ADOPTION_PROJECTS: &[(&str, &str)] = &[
    ("stratumiops", "Master orchestration repo"),
    ("vapora", "AI agent orchestration"),
    ("kogral", "Knowledge graph + MCP"),
    ("syntaxis", "Project orchestration"),
    ("provisioning", "Declarative IaC"),
    ("your-project", "Any codebase"),
];

/// Unified Ontoref page — works in both SSR and WASM contexts
#[component]
pub fn UnifiedOntorefPage(
    #[prop(default = rustelo_content::rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
) -> impl IntoView {
    let content = create_content_provider_reactive(lang_content.clone());

    view! {
        <div class="ds-bg-page min-h-screen">

          // ── Hero ─────────────────────────────────────────────────────────────
          <section class="relative py-ds-8 ds-container">
            <div class="mx-auto max-w-4xl text-center">
              <div class="flex flex-col items-center gap-4 mb-6">
                <img
                  src="/images/logos/projects/ontoref.svg"
                  alt="Ontoref"
                  class="h-28 dark:hidden"
                />
                <img
                  src="/images/logos/projects/ontoref-v.svg"
                  alt="Ontoref"
                  class="h-28 hidden dark:block"
                />
              </div>
              <p class="ds-caption ds-text-secondary mb-2 font-mono italic">
                {content.t("ontoref-tagline")}
              </p>
              <span class="inline-block px-3 py-1 ds-caption ds-bg border ds-border ds-rounded-md ds-text-secondary mb-4">
                {content.t("ontoref-badge")}
              </span>
              <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-5xl mb-4"
                  inner_html=content.t("ontoref-page-subtitle")>
              </h1>
              <p class="ds-body ds-text-secondary max-w-3xl mx-auto">
                <span class="font-semibold" style="color: #60a5fa">
                  {content.t("ontoref-hero-highlight")}
                </span>
                {content.t("ontoref-hero-desc")}
              </p>
              <p class="ds-caption font-mono mt-3 mb-4" style="color: #f97316">
                <strong>{content.t("ontoref-hero-coda")}</strong>
              </p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                <a
                  href="https://github.com/stratum-iops/ontoref"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("ontoref-cta-explore")}
                </a>
              </div>
            </div>
          </section>

          // ── Architecture Diagram ─────────────────────────────────────────────
          <section class="py-ds-6 ds-container">
            <div class="mx-auto max-w-5xl text-center">
              <h2 class="text-3xl font-bold ds-text mb-ds-8">{content.t("ontoref-architecture-title")}</h2>
              <ImageModal
                src_light="/images/projects/ontoref_architecture-light.svg"
                src_dark="/images/projects/ontoref_architecture-dark.svg"
                alt="Ontoref three-layer architecture"
                expand_label=content.t("common-expand-image")
              />
            </div>
          </section>

          // ── Problems ─────────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-12">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-problems-title")}</h2>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {PROBLEMS.iter().map(|p| {
                    let title = content.t(p.title_key);
                    let desc  = content.t(p.desc_key);
                    view! {
                        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <div class="text-2xl mb-3">"❌"</div>
                          <h3 class="ds-heading-4 ds-text mb-2">{title}</h3>
                          <ul class="list-disc list-inside ds-caption ds-text-secondary text-sm space-y-1"
                              inner_html=desc>
                          </ul>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Yin / Yang Duality ───────────────────────────────────────────────
          <section class="py-ds-6 ds-container">
            <div class="mx-auto max-w-5xl">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-duality-title")}</h2>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                // Yin card
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm border-l-4" style="border-color: #60a5fa">
                  <h3 class="ds-heading-4 mb-1" style="color: #60a5fa">{content.t("ontoref-yin-title")}</h3>
                  <p class="ds-caption ds-text-muted italic mb-3">{content.t("ontoref-yin-sub")}</p>
                  <ul class="list-none p-0 m-0 space-y-1 ds-caption ds-text-secondary leading-relaxed"
                      inner_html=content.t("ontoref-yin-desc")>
                  </ul>
                </div>
                // Yang card
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm border-l-4" style="border-color: #f97316">
                  <h3 class="ds-heading-4 mb-1" style="color: #f97316">{content.t("ontoref-yang-title")}</h3>
                  <p class="ds-caption ds-text-muted italic mb-3">{content.t("ontoref-yang-sub")}</p>
                  <ul class="list-none p-0 m-0 space-y-1 ds-caption ds-text-secondary leading-relaxed"
                      inner_html=content.t("ontoref-yang-desc")>
                  </ul>
                </div>
              </div>
              // Tension quote box
              <div class="ds-bg border ds-border ds-rounded-lg p-ds-4 font-mono text-center">
                <p class="ds-caption ds-text-muted mb-1">{content.t("ontoref-tension-1")}</p>
                <p class="ds-caption ds-text-muted mb-2">{content.t("ontoref-tension-2")}</p>
                <p class="ds-caption font-bold" style="color: #f97316">{content.t("ontoref-tension-thesis")}</p>
              </div>
            </div>
          </section>

          // ── Protocol Stack (6 layers) ─────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-layers-title")}</h2>
              </div>
              <div class="flex flex-col gap-3">
                {PROTOCOL_LAYERS.iter().map(|l| {
                    let label   = content.t(l.label_key);
                    let items   = content.t(l.items_key);
                    let desc    = content.t(l.desc_key);
                    let accent  = l.accent;
                    view! {
                        <div
                          class="ds-bg-page ds-rounded-r-lg ds-shadow-sm border-l-4 p-4"
                          style=format!("border-color: {accent}")
                        >
                          <div
                            class="ds-caption font-bold font-mono tracking-wider uppercase mb-1"
                            style=format!("color: {accent}")
                          >
                            {label}
                          </div>
                          <div class="ds-caption font-mono ds-text-muted mb-1">{items}</div>
                          <div class="ds-caption ds-text-secondary italic">{desc}</div>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Web UI ───────────────────────────────────────────────────────────
          <section class="py-ds-6 ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-ui-title")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {UI_PAGES.iter().map(|u| {
                    let title = content.t(u.title_key);
                    let desc  = content.t(u.desc_key);
                    let emoji = u.emoji;
                    view! {
                        <div class="ds-bg p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <div class="flex items-center gap-3 mb-3">
                            <span class="text-xl">{emoji}</span>
                            <h3 class="ds-heading-4 ds-text">{title}</h3>
                          </div>
                          <p class="ds-caption ds-text-secondary leading-relaxed">{desc}</p>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Graph View ───────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg ds-container">
            <div class="mx-auto max-w-5xl text-center">
              <h2 class="text-3xl font-bold ds-text mb-ds-8">{content.t("ontoref-graph-title")}</h2>
              <ImageModal
                src_light="/images/projects/ontoref_graph_view-light.png"
                src_dark="/images/projects/ontoref_graph_view-dark.png"
                alt="Ontoref ontology graph — force-directed D3 visualization"
                expand_label=content.t("common-expand-image")
              />
            </div>
          </section>

          // ── MCP Server ───────────────────────────────────────────────────────
          <section class="py-ds-6 ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-mcp-title")}</h2>
              </div>
              <p class="ds-body ds-text-secondary mb-8 max-w-4xl mx-auto leading-relaxed"
                 inner_html=content.t("ontoref-mcp-core-desc")>
              </p>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {MCP_GROUPS.iter().skip(1).map(|m| {
                    let title = content.t(m.title_key);
                    let desc  = content.t(m.desc_key);
                    let emoji = m.emoji;
                    view! {
                        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm border-l-4 ds-border">
                          <div class="flex items-center gap-3 mb-3">
                            <span class="text-xl">{emoji}</span>
                            <h3 class="ds-heading-4 ds-text">{title}</h3>
                          </div>
                          <ul class="list-disc list-inside ds-caption ds-text-secondary space-y-1 leading-relaxed"
                              inner_html=desc>
                          </ul>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Tech Stack ───────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-tech-stack-title")}</h2>
              </div>
              <div class="flex flex-wrap gap-3 justify-center">
                {TECH_BADGES.iter().map(|badge| {
                    view! {
                        <span class="px-3 py-2 ds-bg-page border ds-border ds-rounded-md ds-caption font-mono ds-text text-sm">
                          {*badge}
                        </span>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Crates & Tooling ─────────────────────────────────────────────────
          <section class="py-ds-6 ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-crates-title")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {CRATES.iter().map(|c| {
                    let title = content.t(c.title_key);
                    let desc  = content.t(c.desc_key);
                    let emoji = c.emoji;
                    view! {
                        <div class="ds-bg p-ds-6 ds-rounded-lg border ds-border ds-shadow-sm">
                          <div class="flex items-center gap-3 mb-3">
                            <span class="text-xl">{emoji}</span>
                            <h3 class="ds-heading-4 ds-text font-mono">{title}</h3>
                          </div>
                          <p class="ds-caption ds-text-secondary leading-relaxed" inner_html=desc></p>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Adoption Grid ────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-4">
                <h2 class="text-2xl font-bold ds-text" style="color: #f97316">
                  {content.t("ontoref-adoption-title")}
                </h2>
                <p class="ds-caption ds-text-secondary mt-2">{content.t("ontoref-adoption-subtitle")}</p>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mt-6">
                {ADOPTION_PROJECTS.iter().map(|(name, role)| view! {
                    <div class="ds-bg-page border ds-border ds-rounded-lg p-3 text-center">
                      <span class="block ds-caption font-mono font-bold ds-text mb-1">{*name}</span>
                      <span class="block" style="font-size: 0.7rem; color: var(--ds-text-secondary)">{*role}</span>
                    </div>
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Metrics ──────────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-8">
                <h2 class="text-3xl font-bold ds-text">{content.t("ontoref-metrics-title")}</h2>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4">
                {[
                    ("3 Rust Crates",        "ontology · reflection · daemon"),
                    ("19 MCP Tools",         "AI agent integration · stdio + HTTP"),
                    ("1 Web UI · 12 Pages",  "dashboard · graph · search · sessions · notifications · backlog · Q&A · actions · modes · compose"),
                    ("6 Protocol Layers",    "Declarative → Adoption"),
                    ("1 Search Engine",      "nodes · ADRs · reflection modes"),
                    ("16 Nu Modules",        "Structured data pipelines"),
                    ("8+ Reflection Modes",  "DAG workflow contracts"),
                    ("3 Actor Types",        "developer / agent / CI"),
                    ("0 Enforcement",        "Voluntary adoption"),
                ].iter().map(|(name, role)| view! {
                    <div class="ds-bg-page border ds-border ds-rounded-lg p-4">
                      <span class="block ds-heading-4 ds-text font-mono mb-1">{*name}</span>
                      <span class="block ds-caption ds-text-secondary">{*role}</span>
                    </div>
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── CTA ──────────────────────────────────────────────────────────────
          <section class="py-ds-6 ds-rounded-lg">
            <div class="mx-auto max-w-3xl ds-container text-center">
              <h2 class="text-3xl font-bold ds-text mb-ds-4">{content.t("ontoref-cta-title")}</h2>
              <p class="ds-text-secondary mb-8 ds-body">{content.t("ontoref-cta-subtitle")}</p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a
                  href="https://github.com/stratum-iops/ontoref"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("ontoref-cta-explore")}
                </a>
              </div>
            </div>
          </section>


        <ProjectGraphSection node_id="ontoref".to_string() />

        </div>
    }
}
