//! Unified Home Page Component using shared delegation patterns
//!
//! This module provides a unified interface that automatically selects between
//! client-side reactive and server-side static implementations based on
//! context.

use leptos::prelude::*;
use rustelo_components_leptos::HtmlContent;
use rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;
#[cfg(target_arch = "wasm32")]
use rustelo_core_lib::utils::nav;

#[component]
pub fn UnifiedProjectLogo(
    light_src: String,
    dark_src: String,
    alt: String,
    href: String,
) -> impl IntoView {
    // Simplified approach: render both images with CSS for theme switching
    // This ensures consistent DOM structure between SSR and client
    view! {
      <a href={href} target="_blank" rel="noopener noreferrer" class="block mb-ds-4">
        <img src={light_src} alt={alt.clone()} class="h-28 w-28 hover:scale-105 transition-transform dark:hidden" />
        <img src={dark_src} alt={alt} class="h-28 w-28 hover:scale-105 transition-transform hidden dark:block" />
      </a>
    }
}

/// Unified Home Page component that works in both SSR and client contexts
/// Takes structured content data instead of individual parameters
#[component]
pub fn UnifiedHomePage(
    #[prop(default = 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());

    let home_services_url = content.t("home-services-url");
    let home_contact_url = content.t("home-contact-url");
    let home_services_mentoring_url = content.t("home-services-mentoring-url");
    let home_services_training_url = content.t("home-services-training-url");
    let home_services_projects_url = content.t("home-services-projects-url");
    let home_work_request_url = content.t("home-work-request-url");
    let home_blog_url = content.t("home-blog-url");

    view! {
        <div class="ds-bg-page">
           <section class="relative py-ds-4 ds-container ds-rounded-lg ds-shadow-lg">
            <div class="mx-auto max-w-4xl text-center">
              <div class="mb-8">
                <div class="flex items-center gap-4 justify-center mb-6">
                </div>
                <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
                  {content.t("home-hero-title")}
                </h1>
                <div class="flex items-center justify-center gap-8 mb-6">
                  <img src="/images/logos/jesusperez.png" alt="jesusperez" class="lg:h-20 h-15" />
                  <img src="/images/JesusPerez_f.jpg" alt="Jesús Pérez Profile" class="lg:w-40 rounded-full w-32 object-cover border-2 ds-border" />
                </div>
                <HtmlContent
                  content={content.t("home-hero-subtitle")}
                  class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto".to_string()
                />
              </div>
              <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                <a href={home_services_url.clone()} class="no-underline ds-btn-primary"
                  on:click=move |_ev| {
                      #[cfg(target_arch = "wasm32")]
                      {
                          if let Some(set_path) = use_context::<WriteSignal<String>>() {
                              _ev.prevent_default();
                              nav::anchor_navigate(set_path, &home_services_url);
                          }
                      }
                  }
                >
                  {content.t("home-view-services")}
                </a>
                <a href={home_contact_url.clone()} class="no-underline ds-btn-secondary"
                  on:click=move |_ev| {
                      #[cfg(target_arch = "wasm32")]
                      {
                          if let Some(set_path) = use_context::<WriteSignal<String>>() {
                              _ev.prevent_default();
                              nav::anchor_navigate(set_path, &home_contact_url);
                          }
                      }
                  }
               >
                  {content.t("home-get-in-touch")}
                </a>
              </div>
            </div>
          </section>

          // Core Expertise Section
          <section class="pt-ds-3 py-ds-6 ds-bg ds-rounded-lg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mt-ds-3">
                <h2 class="text-3xl font-bold ds-text">{content.t("home-core-expertise")}</h2>
                <p class="mt-4 ds-text-secondary">{content.t("home-core-expertise-subtitle")}</p>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-ds-6">
                  <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
                    <span class="text-2xl">"🦀"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-2">{content.t("home-rust-development")}</h3>
                  <ul class="list-none list-inside ds-text-secondary">
                    <li>{content.t("home-web-applications")}</li>
                    <li>{content.t("home-high-performance-systems")}</li>
                    <li>{content.t("home-tooling-rust-safety")}</li>
                  </ul>
                </div>
                <div class="text-center p-ds-6">
                  <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
                    <span class="text-2xl">"🏗️"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-2">{content.t("home-self-hosted-infrastructure")}</h3>
                  <ul class="list-none list-inside ds-text-secondary">
                    <li>{content.t("home-cicd-pipelines")}</li>
                    <li>{content.t("home-kubernetes-deployments")}</li>
                    <li>{content.t("home-resilient-architectures")}</li>
                  </ul>
                </div>
                <div class="text-center p-ds-6">
                  <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
                    <span class="text-2xl">"🌐"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-2">{content.t("home-web3-polkadot")}</h3>
                  <ul class="list-none list-inside ds-text-secondary mb-ds-4">
                    <li>{content.t("home-blockchain-integration")}</li>
                    <li>{content.t("home-decentralized-applications")}</li>
                    <li>{content.t("home-polkadot-ecosystem-development")}</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          // Services Preview Section
          <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("home-how-i-can-help")}</h2>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <h3 class="ds-heading-4 ds-text mb-3">{content.t("home-project-participation")}</h3>
                  <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
                    <li>{content.t("home-requirements-definition")}</li>
                    <li>{content.t("home-infrastructure-setup")}</li>
                    <li>{content.t("home-cicd-implementation")}</li>
                    <li>{content.t("home-research-prototyping")}</li>
                  </ul>
                  <a href={home_services_projects_url.clone()} class="ds-text font-medium hover:ds-text-secondary"
                      on:click=move |_ev| {
                          #[cfg(target_arch = "wasm32")]
                          {
                              if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                  _ev.prevent_default();
                                  nav::anchor_navigate(set_path, &home_services_projects_url);
                              }
                          }
                      }
                    >
                    {content.t("home-learn-more-arrow")}
                  </a>
                </div>
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <h3 class="ds-heading-4 ds-text mb-3">{content.t("home-mentoring-guidance")}</h3>
                  <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
                    <li>{content.t("home-one-on-one-collaboration")}</li>
                    <li>{content.t("home-pair-programming")}</li>
                    <li>{content.t("home-code-review")}</li>
                    <li>{content.t("home-technical-guidance-team")}</li>
                  </ul>
                  <a href={home_services_mentoring_url.clone()} class="ds-text font-medium hover:ds-text-secondary"
                      on:click=move |_ev| {
                          #[cfg(target_arch = "wasm32")]
                          {
                              if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                  _ev.prevent_default();
                                  _ev.stop_propagation();
                                  nav::anchor_navigate(set_path, &home_services_mentoring_url);
                              }
                          }
                      }
                  >
                    {content.t("home-learn-more-arrow")}
                  </a>
                </div>
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <h3 class="ds-heading-4 ds-text mb-3">{content.t("home-training-workshops")}</h3>
                  <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
                    <li>{content.t("home-custom-courses")}</li>
                    <li>{content.t("home-workshops")}</li>
                    <li>{content.t("home-technical-talks-org")}</li>
                  </ul>
                  <a href={home_services_training_url.clone()} class="ds-text font-medium hover:ds-text-secondary"
                      on:click=move |_ev| {
                          #[cfg(target_arch = "wasm32")]
                          {
                              if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                  _ev.prevent_default();
                                  _ev.stop_propagation();
                                  nav::anchor_navigate(set_path, &home_services_training_url);
                              }
                          }
                      }
                  >
                    {content.t("home-learn-more-arrow")}
                  </a>
                </div>
              </div>
            </div>
          </section>

          // Latest Projects Section
          <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("home-latest-relevant-projects")}</h2>
                <p class="mt-4 ds-text-secondary">{content.t("home-open-source-projects-desc")}</p>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                // Rustelo Project
                <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
                  <div class="flex flex-col items-center text-center">
                    <UnifiedProjectLogo
                      light_src="/images/logos/projects/rustelo_dev-logo-v.svg".to_string()
                      dark_src="/images/logos/projects/rustelo_dev-logo-b-v.svg".to_string()
                      alt="Rustelo Logo".to_string()
                      href="https://rustelo.dev".to_string()
                    />
                    <h3 class="ds-heading-4 ds-text mb-3">"Rustelo"</h3>
                    <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">
                      {content.t("home-rustelo-desc")}
                    </p>
                    <div class="flex gap-3 mt-auto">
                      <a href="https://rustelo.dev" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover: transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                        {content.t("home-visit-site")}
                      </a>
                      <a href="https://github.com/Rustelo-dev" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504 .5 .092 .682-.217 .682-.483 0-.237-.008-.868-.013-1.703-2.782 .605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62 .069-.608 .069-.608 1.003 .07 1.531 1.032 1.531 1.032 .892 1.53 2.341 1.088 2.91 .832 .092-.647 .35-1.088 .636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093 .39-1.988 1.029-2.688-.103-.253-.446-1.272 .098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85 .004 1.705 .115 2.504 .337 1.909-1.296 2.747-1.027 2.747-1.027 .546 1.379 .203 2.398 .1 2.651 .64 .7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942 .359 .31 .678 .921 .678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268 .18 .58 .688 .482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                        </svg>
                        {content.t("home-git-repo")}
                      </a>
                    </div>
                  </div>
                </div>
                // Provisioning Systems Project
                <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
                  <div class="flex flex-col items-center text-center">
                    <UnifiedProjectLogo
                      light_src="/images/logos/projects/provisioning_logo-light.svg".to_string()
                      dark_src="/images/logos/projects/provisioning_logo-dark.svg".to_string()
                      alt="Provisioning Systems Logo".to_string()
                      href="https://provisioning.systems".to_string()
                    />
                    <h3 class="ds-heading-4 ds-text mb-3">"Provisioning Systems"</h3>
                    <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">
                      {content.t("home-provisioning-systems-desc")}
                    </p>
                    <div class="flex gap-3 mt-auto">
                      <a href="https://provisioning.systems" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover: transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                        {content.t("home-visit-site")}
                      </a>
                      <a href="https://rlung.librecloud.online/jesus/provisioning" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504 .5 .092 .682-.217 .682-.483 0-.237-.008-.868-.013-1.703-2.782 .605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62 .069-.608 .069-.608 1.003 .07 1.531 1.032 1.531 1.032 .892 1.53 2.341 1.088 2.91 .832 .092-.647 .35-1.088 .636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093 .39-1.988 1.029-2.688-.103-.253-.446-1.272 .098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85 .004 1.705 .115 2.504 .337 1.909-1.296 2.747-1.027 2.747-1.027 .546 1.379 .203 2.398 .1 2.651 .64 .7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942 .359 .31 .678 .921 .678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268 .18 .58 .688 .482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                        </svg>
                        {content.t("home-git-repo")}
                      </a>
                    </div>
                  </div>
                </div>
                // AILinkra Project
                <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
                  <div class="flex flex-col items-center text-center">
                    <a href="https://ailinkra.net" target="_blank" rel="noopener noreferrer" class="block mb-ds-4">
                      <img src="/images/logos/projects/ailinkra_logo_v.svg" alt="AILinkra Logo" class="h-28 w-28 hover:scale-105 transition-transform" />
                    </a>
                    <h3 class="ds-heading-4 ds-text mb-3">"AILinkra"</h3>
                    <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">
                      {content.t("home-ailinkra-desc")}
                    </p>
                    <div class="flex gap-3 mt-auto">
                      <a href="https://ailinkra.net" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover: transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                        {content.t("home-visit-site")}
                      </a>
                      <a href="https://github.com/Ailinkra/ailinkra-chain" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504 .5 .092 .682-.217 .682-.483 0-.237-.008-.868-.013-1.703-2.782 .605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62 .069-.608 .069-.608 1.003 .07 1.531 1.032 1.531 1.032 .892 1.53 2.341 1.088 2.91 .832 .092-.647 .35-1.088 .636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093 .39-1.988 1.029-2.688-.103-.253-.446-1.272 .098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85 .004 1.705 .115 2.504 .337 1.909-1.296 2.747-1.027 2.747-1.027 .546 1.379 .203 2.398 .1 2.651 .64 .7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942 .359 .31 .678 .921 .678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268 .18 .58 .688 .482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                        </svg>
                        {content.t("home-git-repo")}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>


          // Call to Action Section
          <section class="py-ds-4 ds-bg-page ds-rounded-lg">
            <div class="mx-auto max-w-4xl ds-container text-center">
              <h2 class="text-3xl font-bold ds-text mb-ds-4">{content.t("home-ready-start-project")}</h2>
              <p class="ds-text-secondary mb-8 ds-body">
                {content.t("home-ready-start-project-desc")}
              </p>
              <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href={home_work_request_url.clone()} class="no-underline ds-btn-primary"
                  on:click=move |_ev: leptos::ev::MouseEvent| {
                        #[cfg(target_arch = "wasm32")]
                        {
                            if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                _ev.prevent_default();
                                _ev.stop_propagation();
                                nav::anchor_navigate(set_path, &home_work_request_url);
                                rustelo_core_lib::utils::doc_scroll_to_top(100);
                            }
                        }
                  }
                  >
                  {content.t("home-request-project-quote")}
                </a>
                <a href={home_blog_url.clone()} class="ds-btn-secondary"
                  on:click=move |_ev: leptos::ev::MouseEvent| {
                      #[cfg(target_arch = "wasm32")]
                      {
                          if let Some(set_path) = use_context::<WriteSignal<String>>() {
                              _ev.prevent_default();
                              _ev.stop_propagation();
                              nav::anchor_navigate(set_path, &home_blog_url);
                              rustelo_core_lib::utils::doc_scroll_to_top(100);
                          }
                      }
                  }
                  >
                  {content.t("home-read-my-blog")}
                </a>
              </div>
            </div>
          </section>
        </div>
    }
}
