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 Problem {
    number: &'static str,
    title_key: &'static str,
    desc_key: &'static str,
}

const PROBLEMS: &[Problem] = &[
    Problem {
        number: "01",
        title_key: "stratumiops-problem-1-title",
        desc_key: "stratumiops-problem-1-desc",
    },
    Problem {
        number: "02",
        title_key: "stratumiops-problem-2-title",
        desc_key: "stratumiops-problem-2-desc",
    },
    Problem {
        number: "03",
        title_key: "stratumiops-problem-3-title",
        desc_key: "stratumiops-problem-3-desc",
    },
    Problem {
        number: "04",
        title_key: "stratumiops-problem-4-title",
        desc_key: "stratumiops-problem-4-desc",
    },
    Problem {
        number: "05",
        title_key: "stratumiops-problem-5-title",
        desc_key: "stratumiops-problem-5-desc",
    },
    Problem {
        number: "06",
        title_key: "stratumiops-problem-6-title",
        desc_key: "stratumiops-problem-6-desc",
    },
    Problem {
        number: "07",
        title_key: "stratumiops-problem-7-title",
        desc_key: "stratumiops-problem-7-desc",
    },
    Problem {
        number: "08",
        title_key: "stratumiops-problem-8-title",
        desc_key: "stratumiops-problem-8-desc",
    },
];

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

const PROJECTS: &[EcosystemProject] = &[
    EcosystemProject {
        title_key: "stratumiops-proj-vapora-title",
        desc_key: "stratumiops-proj-vapora-desc",
        emoji: "\u{1f916}",
        page_route: "/vapora",
    },
    EcosystemProject {
        title_key: "stratumiops-proj-kogral-title",
        desc_key: "stratumiops-proj-kogral-desc",
        emoji: "\u{1f9e0}",
        page_route: "/kogral",
    },
    EcosystemProject {
        title_key: "stratumiops-proj-typedialog-title",
        desc_key: "stratumiops-proj-typedialog-desc",
        emoji: "\u{1f4cb}",
        page_route: "/typedialog",
    },
    EcosystemProject {
        title_key: "stratumiops-proj-provisioning-title",
        desc_key: "stratumiops-proj-provisioning-desc",
        emoji: "\u{2601}\u{fe0f}",
        page_route: "/provisioning-systems",
    },
    EcosystemProject {
        title_key: "stratumiops-proj-secretumvault-title",
        desc_key: "stratumiops-proj-secretumvault-desc",
        emoji: "\u{1f512}",
        page_route: "/secretumvault",
    },
    EcosystemProject {
        title_key: "stratumiops-proj-syntaxis-title",
        desc_key: "stratumiops-proj-syntaxis-desc",
        emoji: "\u{1f3af}",
        page_route: "/syntaxis",
    },
];

struct YinYangItem {
    title_key: &'static str,
    subtitle_key: &'static str,
    items_key: &'static str,
    accent: &'static str,
}

const YIN_YANG: &[YinYangItem] = &[
    YinYangItem {
        title_key: "stratumiops-yin-title",
        subtitle_key: "stratumiops-yin-subtitle",
        items_key: "stratumiops-yin-items",
        accent: "border-blue-400",
    },
    YinYangItem {
        title_key: "stratumiops-yang-title",
        subtitle_key: "stratumiops-yang-subtitle",
        items_key: "stratumiops-yang-items",
        accent: "border-orange-400",
    },
];

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

const ARCH_LAYERS: &[ArchLayer] = &[
    ArchLayer {
        label_key: "stratumiops-layer-decl-label",
        items_key: "stratumiops-layer-decl-items",
        desc_key: "stratumiops-layer-decl-desc",
        accent: "border-blue-400",
    },
    ArchLayer {
        label_key: "stratumiops-layer-op-label",
        items_key: "stratumiops-layer-op-items",
        desc_key: "stratumiops-layer-op-desc",
        accent: "border-orange-400",
    },
    ArchLayer {
        label_key: "stratumiops-layer-entry-label",
        items_key: "stratumiops-layer-entry-items",
        desc_key: "stratumiops-layer-entry-desc",
        accent: "border-green-400",
    },
    ArchLayer {
        label_key: "stratumiops-layer-graph-label",
        items_key: "stratumiops-layer-graph-items",
        desc_key: "stratumiops-layer-graph-desc",
        accent: "border-purple-400",
    },
    ArchLayer {
        label_key: "stratumiops-layer-seal-label",
        items_key: "stratumiops-layer-seal-items",
        desc_key: "stratumiops-layer-seal-desc",
        accent: "border-yellow-400",
    },
];

struct StratumCrate {
    name: &'static str,
    role_key: &'static str,
}

const STRATUM_CRATES: &[StratumCrate] = &[
    StratumCrate {
        name: "stratum-orchestrator",
        role_key: "stratumiops-stratum-orchestrator-role",
    },
    StratumCrate {
        name: "stratum-graph",
        role_key: "stratumiops-stratum-graph-role",
    },
    StratumCrate {
        name: "stratum-state",
        role_key: "stratumiops-stratum-state-role",
    },
    StratumCrate {
        name: "stratum-llm",
        role_key: "stratumiops-stratum-llm-role",
    },
    StratumCrate {
        name: "stratum-embeddings",
        role_key: "stratumiops-stratum-embeddings-role",
    },
    StratumCrate {
        name: "platform-nats",
        role_key: "stratumiops-stratum-nats-role",
    },
    StratumCrate {
        name: "ncl-import-resolver",
        role_key: "stratumiops-stratum-ncl-role",
    },
    StratumCrate {
        name: "stratum-ontology-core",
        role_key: "stratumiops-stratum-ontology-role",
    },
    StratumCrate {
        name: "stratum-reflection-core",
        role_key: "stratumiops-stratum-reflection-role",
    },
    StratumCrate {
        name: "stratum.sh / stratum.nu",
        role_key: "stratumiops-stratum-dispatcher-role",
    },
    StratumCrate {
        name: "Nu plugin layer",
        role_key: "stratumiops-stratum-plugins-role",
    },
];

struct MetricEntry {
    value: &'static str,
    label_key: &'static str,
}

const METRICS: &[MetricEntry] = &[
    MetricEntry {
        value: "52+",
        label_key: "stratumiops-metric-crates",
    },
    MetricEntry {
        value: "74+",
        label_key: "stratumiops-metric-tests",
    },
    MetricEntry {
        value: "~266K",
        label_key: "stratumiops-metric-loc",
    },
    MetricEntry {
        value: "0",
        label_key: "stratumiops-metric-clippy",
    },
    MetricEntry {
        value: "0",
        label_key: "stratumiops-metric-unsafe",
    },
    MetricEntry {
        value: "100%",
        label_key: "stratumiops-metric-docs",
    },
    MetricEntry {
        value: "4",
        label_key: "stratumiops-metric-crypto",
    },
    MetricEntry {
        value: "4",
        label_key: "stratumiops-metric-storage",
    },
    MetricEntry {
        value: "6",
        label_key: "stratumiops-metric-typedialog",
    },
    MetricEntry {
        value: "14+",
        label_key: "stratumiops-metric-mcp",
    },
];

const TECH_BADGES: &[&str] = &[
    "Rust Edition 2021",
    "Nickel",
    "Nushell",
    "SurrealDB",
    "SQLite",
    "NATS JetStream",
    "Axum",
    "Leptos WASM",
    "Ratatui TUI",
    "OpenTelemetry",
    "Prometheus",
    "etcd",
    "PostgreSQL",
    "OpenSSL",
    "OQS (Post-Quantum)",
    "Cedar Policy",
];

#[component]
pub fn UnifiedStratumiopsPage(
    #[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/stratumiops.svg"
                  alt="StratumIOps"
                  class="h-28"
                />
              </div>
              <p class="ds-caption ds-text-secondary mb-2 font-mono italic">
                {content.t("stratumiops-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("stratumiops-badge")}
              </span>
              <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-5xl mb-4">
                {content.t("stratumiops-page-title")}
              </h1>
              <p class="ds-body ds-text-secondary max-w-3xl mx-auto">
                {content.t("stratumiops-page-subtitle")}
              </p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                <a
                  href="https://repo.example.com/org/stratumiops"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("stratumiops-cta-explore")}
                </a>
              </div>
            </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("stratumiops-problems-title")}</h2>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {PROBLEMS.iter().map(|p| {
                    let number = p.number;
                    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 font-bold ds-text-accent mb-2">{number}</div>
                          <h3 class="ds-heading-4 ds-text mb-2">{title}</h3>
                          <p class="ds-caption ds-text-secondary">{desc}</p>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Ontology, Reflection & ADRs ────────────────────────────────────
          <section class="py-ds-6 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("stratumiops-ontology-title")}</h2>
              </div>

              // Yin / Yang cards
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                {YIN_YANG.iter().map(|yy| {
                    let title    = content.t(yy.title_key);
                    let subtitle = content.t(yy.subtitle_key);
                    let items    = content.t(yy.items_key);
                    let border   = format!("ds-bg p-ds-6 ds-rounded-lg border-l-4 {}", yy.accent);
                    view! {
                        <div class={border}>
                          <h3 class="ds-heading-4 ds-text mb-1">{title}</h3>
                          <p class="ds-caption ds-text-secondary italic mb-3">{subtitle}</p>
                          <p class="ds-caption ds-text-secondary leading-relaxed whitespace-pre-line">{items}</p>
                        </div>
                    }
                }).collect_view()}
              </div>

              // Tension thesis
              <div class="ds-bg p-ds-6 ds-rounded-lg border ds-border text-center mb-8">
                <p class="ds-caption ds-text-secondary italic">{content.t("stratumiops-tension-1")}</p>
                <p class="ds-caption ds-text-secondary italic">{content.t("stratumiops-tension-2")}</p>
                <p class="ds-body ds-text font-bold mt-2">{content.t("stratumiops-tension-thesis")}</p>
                <div class="mt-6 flex justify-center">
                  <img
                    src="/images/jpl-imago-160.png"
                    alt="Yin Yang — coexistence"
                    class="h-40 opacity-90"
                  />
                </div>
              </div>

              // Architecture Layers
              <div class="flex flex-col gap-3">
                {ARCH_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 border = format!("ds-bg p-4 ds-rounded-lg border-l-4 {}", l.accent);
                    view! {
                        <div class={border}>
                          <div class="ds-caption font-bold font-mono ds-text uppercase tracking-wider">{label}</div>
                          <div class="ds-caption ds-text-secondary font-mono mt-1">{items}</div>
                          <div class="ds-caption ds-text-secondary italic mt-1">{desc}</div>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Architecture Diagrams ──────────────────────────────────────────
          <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("stratumiops-arch-title")}</h2>
              </div>
              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h3 class="ds-heading-4 ds-text text-center mb-4">{content.t("stratumiops-arch-orchestrator")}</h3>
                  <ImageModal
                    src_light="/images/projects/stratumiops_orchestrator-light.svg"
                    src_dark="/images/projects/stratumiops_orchestrator-dark.svg"
                    alt="StratumIOps Orchestrator Architecture"
                    expand_label=content.t("common-expand-image")
                  />
                </div>
                <div>
                  <h3 class="ds-heading-4 ds-text text-center mb-4">{content.t("stratumiops-arch-operation-flow")}</h3>
                  <ImageModal
                    src_light="/images/projects/stratumiops_operation-flow-light.svg"
                    src_dark="/images/projects/stratumiops_operation-flow-dark.svg"
                    alt="StratumIOps Operation Flow"
                    expand_label=content.t("common-expand-image")
                  />
                </div>
              </div>
            </div>
          </section>

          // ── Ecosystem Projects ───────────────────────────────────────────────
          <section class="py-ds-6 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("stratumiops-projects-title")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {PROJECTS.iter().map(|p| {
                    let title = content.t(p.title_key);
                    let desc  = content.t(p.desc_key);
                    let emoji = p.emoji;
                    let route = p.page_route;
                    let more_info = content.t("stratumiops-more-info");
                    view! {
                        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm border-l-4 ds-border flex flex-col">
                          <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 flex-1">{desc}</p>
                          <div class="mt-4">
                            <a
                              href={route}
                              class="no-underline inline-block px-4 py-2 ds-btn-secondary ds-caption"
                            >
                              {more_info}" \u{2192}"
                            </a>
                          </div>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Stratum Crates ───────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-4">
                <h2 class="text-3xl font-bold ds-text">{content.t("stratumiops-stratum-title")}</h2>
                <p class="ds-text-secondary ds-body mt-2">{content.t("stratumiops-stratum-subtitle")}</p>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-ds-8">
                {STRATUM_CRATES.iter().map(|c| {
                    let role = content.t(c.role_key);
                    let name = c.name;
                    view! {
                        <div class="ds-bg-page p-4 ds-rounded-lg text-center border ds-border ds-shadow-sm">
                          <div class="ds-caption font-bold ds-text mb-1">{name}</div>
                          <div class="text-xs ds-text-secondary">{role}</div>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Ecosystem Metrics ────────────────────────────────────────────────
          <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("stratumiops-metrics-title")}</h2>
              </div>
              <div class="ds-bg ds-rounded-xl border ds-border ds-shadow-sm p-6">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6 text-center">
                  {METRICS.iter().map(|m| {
                      let label = content.t(m.label_key);
                      let value = m.value;
                      view! {
                          <div>
                            <div class="text-2xl font-bold ds-text">{value}</div>
                            <div class="ds-caption ds-text-secondary">{label}</div>
                          </div>
                      }
                  }).collect_view()}
                </div>
              </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("stratumiops-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">
                          {*badge}
                        </span>
                    }
                }).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("stratumiops-cta-title")}</h2>
              <p class="ds-text-secondary mb-8 ds-body">{content.t("stratumiops-cta-subtitle")}</p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a
                  href="https://repo.example.com/org/stratumiops"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("stratumiops-cta-explore")}
                </a>
              </div>
            </div>
          </section>


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

        </div>
    }
}
