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

const CAPABILITIES: &[Capability] = &[
    Capability {
        number: "01",
        title_key: "provisioning-cap-1-title",
        desc_key: "provisioning-cap-1-desc",
    },
    Capability {
        number: "02",
        title_key: "provisioning-cap-2-title",
        desc_key: "provisioning-cap-2-desc",
    },
    Capability {
        number: "03",
        title_key: "provisioning-cap-3-title",
        desc_key: "provisioning-cap-3-desc",
    },
    Capability {
        number: "04",
        title_key: "provisioning-cap-4-title",
        desc_key: "provisioning-cap-4-desc",
    },
];

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

const HOW_IT_WORKS: &[HowItWorks] = &[
    HowItWorks {
        title_key: "provisioning-how-nickel-title",
        desc_key: "provisioning-how-nickel-desc",
        emoji: "\u{1f4dd}",
    },
    HowItWorks {
        title_key: "provisioning-how-nushell-title",
        desc_key: "provisioning-how-nushell-desc",
        emoji: "\u{1f504}",
    },
    HowItWorks {
        title_key: "provisioning-how-rust-title",
        desc_key: "provisioning-how-rust-desc",
        emoji: "\u{26a1}",
    },
    HowItWorks {
        title_key: "provisioning-how-nats-title",
        desc_key: "provisioning-how-nats-desc",
        emoji: "\u{1f4e1}",
    },
    HowItWorks {
        title_key: "provisioning-how-security-title",
        desc_key: "provisioning-how-security-desc",
        emoji: "\u{1f510}",
    },
    HowItWorks {
        title_key: "provisioning-how-oci-title",
        desc_key: "provisioning-how-oci-desc",
        emoji: "\u{1f9e9}",
    },
    HowItWorks {
        title_key: "provisioning-how-cli-title",
        desc_key: "provisioning-how-cli-desc",
        emoji: "\u{1f39b}\u{fe0f}",
    },
    HowItWorks {
        title_key: "provisioning-how-versions-title",
        desc_key: "provisioning-how-versions-desc",
        emoji: "\u{1f4cc}",
    },
];

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

const SOLID_BOUNDARIES: &[SolidBoundary] = &[
    SolidBoundary {
        title_key: "provisioning-solid-provider-title",
        desc_key: "provisioning-solid-provider-desc",
        emoji: "\u{1f3af}",
    },
    SolidBoundary {
        title_key: "provisioning-solid-auth-title",
        desc_key: "provisioning-solid-auth-desc",
        emoji: "\u{1f510}",
    },
    SolidBoundary {
        title_key: "provisioning-solid-secrets-title",
        desc_key: "provisioning-solid-secrets-desc",
        emoji: "\u{1f511}",
    },
];

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

const PLATFORM_SERVICES: &[PlatformService] = &[
    PlatformService {
        name: "Orchestrator",
        role_key: "provisioning-svc-orchestrator-role",
    },
    PlatformService {
        name: "ControlCenter",
        role_key: "provisioning-svc-controlcenter-role",
    },
    PlatformService {
        name: "ControlCenter-UI",
        role_key: "provisioning-svc-controlcenter-ui-role",
    },
    PlatformService {
        name: "MCP-Server",
        role_key: "provisioning-svc-mcp-server-role",
    },
    PlatformService {
        name: "AI-Service",
        role_key: "provisioning-svc-ai-service-role",
    },
    PlatformService {
        name: "Extension-Registry",
        role_key: "provisioning-svc-extension-registry-role",
    },
    PlatformService {
        name: "SecretumVault",
        role_key: "provisioning-svc-secretumvault-role",
    },
    PlatformService {
        name: "Detector",
        role_key: "provisioning-svc-detector-role",
    },
    PlatformService {
        name: "Daemon-CLI",
        role_key: "provisioning-svc-daemon-cli-role",
    },
    PlatformService {
        name: "Machines",
        role_key: "provisioning-svc-machines-role",
    },
    PlatformService {
        name: "Observability",
        role_key: "provisioning-svc-observability-role",
    },
    PlatformService {
        name: "Backup",
        role_key: "provisioning-svc-backup-role",
    },
    PlatformService {
        name: "Encrypt",
        role_key: "provisioning-svc-encrypt-role",
    },
];

const TECH_BADGES: &[&str] = &[
    "Nickel",
    "Nushell 0.110",
    "Rust",
    "NATS JetStream",
    "SurrealDB",
    "Cedar",
    "Leptos WASM",
    "Kubernetes",
    "Docker Compose",
    "SOPS 3.10",
    "Age 1.2",
    "Git",
];

#[component]
pub fn UnifiedProvisioningPage(
    #[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/provisioning.svg"
                  alt="Provisioning"
                  class="h-28"
                />
              </div>
              <p class="ds-caption ds-text-secondary mb-2 font-mono italic">
                {content.t("provisioning-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("provisioning-badge")}
              </span>
              <h1 class="text-balance text-4xl leading-11 font-bold tracking-tight ds-text sm:text-5xl mb-4">
                {content.t("provisioning-page-title")}
              </h1>
              <p class="ds-body ds-text-secondary max-w-3xl mx-auto">
                {content.t("provisioning-page-subtitle")}
              </p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                <a
                  href="https://repo.example.com/org/provisioning"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("provisioning-cta-explore")}
                </a>
              </div>
            </div>
          </section>

          // ── Core Capabilities ──────────────────────────────────────────────
          <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("provisioning-capabilities-title")}</h2>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {CAPABILITIES.iter().map(|c| {
                    let title = content.t(c.title_key);
                    let desc  = content.t(c.desc_key);
                    let num   = c.number;
                    view! {
                        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <div class="text-2xl font-bold mb-3 bg-gradient-to-r from-emerald-500 to-blue-500 bg-clip-text text-transparent">{num}</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>

          // ── How It Works ───────────────────────────────────────────────────
          <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("provisioning-how-title")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {HOW_IT_WORKS.iter().map(|f| {
                    let title = content.t(f.title_key);
                    let desc  = content.t(f.desc_key);
                    let emoji = f.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>
                          <p class="ds-caption ds-text-secondary leading-relaxed">{desc}</p>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── SOLID Architecture Boundaries ──────────────────────────────────
          <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("provisioning-solid-title")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {SOLID_BOUNDARIES.iter().map(|b| {
                    let title = content.t(b.title_key);
                    let desc  = content.t(b.desc_key);
                    let emoji = b.emoji;
                    view! {
                        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <div class="text-2xl mb-3">{emoji}</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>

          // ── 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("provisioning-architecture-title")}</h2>
              <ImageModal
                src_light="/images/projects/provisioning_architecture-light.svg"
                src_dark="/images/projects/provisioning_architecture-dark.svg"
                alt="Provisioning architecture diagram"
                expand_label=content.t("common-expand-image")
              />
            </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("provisioning-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>

          // ── Platform Services ──────────────────────────────────────────────
          <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("provisioning-services-title")}</h2>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                {PLATFORM_SERVICES.iter().map(|s| {
                    let role = content.t(s.role_key);
                    let name = s.name;
                    view! {
                        <div class="ds-bg 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>

          // ── CTA ────────────────────────────────────────────────────────────
          <section class="py-ds-6 ds-bg 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("provisioning-cta-title")}</h2>
              <p class="ds-text-secondary mb-8 ds-body">{content.t("provisioning-cta-subtitle")}</p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a
                  href="https://repo.example.com/org/provisioning"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="no-underline ds-btn-primary"
                >
                  {content.t("provisioning-cta-explore")}
                </a>
              </div>
            </div>
          </section>


        <ProjectGraphSection node_id="provisioning-systems".to_string() />

        </div>
    }
}
