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

const INTERFACES: &[Interface] = &[
    Interface {
        title_key: "syntaxis-iface-cli-title",
        label_key: "syntaxis-iface-cli-label",
        desc_key: "syntaxis-iface-cli-desc",
    },
    Interface {
        title_key: "syntaxis-iface-tui-title",
        label_key: "syntaxis-iface-tui-label",
        desc_key: "syntaxis-iface-tui-desc",
    },
    Interface {
        title_key: "syntaxis-iface-dashboard-title",
        label_key: "syntaxis-iface-dashboard-label",
        desc_key: "syntaxis-iface-dashboard-desc",
    },
    Interface {
        title_key: "syntaxis-iface-api-title",
        label_key: "syntaxis-iface-api-label",
        desc_key: "syntaxis-iface-api-desc",
    },
];

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

const FEATURES: &[Feature] = &[
    Feature {
        title_key: "syntaxis-feat-lifecycle-title",
        desc_key: "syntaxis-feat-lifecycle-desc",
        emoji: "\u{1f504}",
    },
    Feature {
        title_key: "syntaxis-feat-audit-title",
        desc_key: "syntaxis-feat-audit-desc",
        emoji: "\u{1f4dc}",
    },
    Feature {
        title_key: "syntaxis-feat-dualdb-title",
        desc_key: "syntaxis-feat-dualdb-desc",
        emoji: "\u{1f5c4}\u{fe0f}",
    },
    Feature {
        title_key: "syntaxis-feat-config-title",
        desc_key: "syntaxis-feat-config-desc",
        emoji: "\u{2699}\u{fe0f}",
    },
    Feature {
        title_key: "syntaxis-feat-templates-title",
        desc_key: "syntaxis-feat-templates-desc",
        emoji: "\u{1f4cb}",
    },
    Feature {
        title_key: "syntaxis-feat-vapora-title",
        desc_key: "syntaxis-feat-vapora-desc",
        emoji: "\u{1f300}",
    },
    Feature {
        title_key: "syntaxis-feat-checklists-title",
        desc_key: "syntaxis-feat-checklists-desc",
        emoji: "\u{2705}",
    },
    Feature {
        title_key: "syntaxis-feat-bootstrap-title",
        desc_key: "syntaxis-feat-bootstrap-desc",
        emoji: "\u{1f680}",
    },
];

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

const QUALITY_STATS: &[QualityStat] = &[
    QualityStat {
        value: "632+",
        label_key: "syntaxis-quality-tests",
    },
    QualityStat {
        value: "10K+",
        label_key: "syntaxis-quality-lines",
    },
    QualityStat {
        value: "0",
        label_key: "syntaxis-quality-unsafe",
    },
    QualityStat {
        value: "0",
        label_key: "syntaxis-quality-unwrap",
    },
    QualityStat {
        value: "100%",
        label_key: "syntaxis-quality-docs",
    },
    QualityStat {
        value: "8",
        label_key: "syntaxis-quality-crates",
    },
];

const TECH_BADGES: &[&str] = &[
    "tokio",
    "axum",
    "sqlx",
    "surrealdb",
    "clap",
    "ratatui",
    "leptos",
    "tower",
    "serde",
    "thiserror",
    "nats",
    "nickel",
];

struct DbBackend {
    title_key: &'static str,
    items: &'static [&'static str],
}

const DB_BACKENDS: &[DbBackend] = &[
    DbBackend {
        title_key: "syntaxis-db-sqlite-title",
        items: &[
            "syntaxis-db-sqlite-1",
            "syntaxis-db-sqlite-2",
            "syntaxis-db-sqlite-3",
            "syntaxis-db-sqlite-4",
            "syntaxis-db-sqlite-5",
        ],
    },
    DbBackend {
        title_key: "syntaxis-db-surreal-title",
        items: &[
            "syntaxis-db-surreal-1",
            "syntaxis-db-surreal-2",
            "syntaxis-db-surreal-3",
            "syntaxis-db-surreal-4",
            "syntaxis-db-surreal-5",
        ],
    },
];

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

          // ── Interfaces ─────────────────────────────────────────────────────
          <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("syntaxis-interfaces-title")}</h2>
                <p class="ds-text-secondary ds-body mt-2">{content.t("syntaxis-interfaces-subtitle")}</p>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {INTERFACES.iter().map(|iface| {
                    let title = content.t(iface.title_key);
                    let label = content.t(iface.label_key);
                    let desc  = content.t(iface.desc_key);
                    view! {
                        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <h3 class="ds-heading-4 ds-text mb-1">{title}</h3>
                          <div class="ds-caption font-mono ds-text-secondary mb-3">{label}</div>
                          <p class="ds-caption ds-text-secondary">{desc}</p>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

          // ── Quality Stats ──────────────────────────────────────────────────
          <section class="py-ds-6 ds-container">
            <div class="mx-auto max-w-5xl">
              <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-6 gap-6 text-center">
                  {QUALITY_STATS.iter().map(|s| {
                      let label = content.t(s.label_key);
                      let value = s.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>

          // ── Features ───────────────────────────────────────────────────────
          <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("syntaxis-features-title")}</h2>
                <p class="ds-text-secondary ds-body mt-2">{content.t("syntaxis-features-subtitle")}</p>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {FEATURES.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>

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

              />
            </div>
          </section>

          // ── Database ───────────────────────────────────────────────────────
          <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("syntaxis-db-title")}</h2>
                <p class="ds-text-secondary ds-body mt-2">{content.t("syntaxis-db-subtitle")}</p>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {DB_BACKENDS.iter().map(|db| {
                    let title = content.t(db.title_key);
                    let items = db.items.iter().map(|k| {
                        let text = content.t(k);
                        view! { <li class="ds-caption ds-text-secondary py-1">{"> "}{text}</li> }
                    }).collect_view();
                    view! {
                        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-border border ds-shadow-sm">
                          <h3 class="ds-heading-4 ds-text mb-4">{title}</h3>
                          <ul class="list-none pl-0">{items}</ul>
                        </div>
                    }
                }).collect_view()}
              </div>
            </div>
          </section>

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


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

        </div>
    }
}
