//! Unified Contact 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_core_lib::i18n::content_helper::create_content_provider;

/// Unified Contact Page component that works in both SSR and client contexts
/// Takes structured content data instead of individual parameters
#[component]
pub fn UnifiedContactPage(
    #[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 {
    // Use DRY content accessor helper
    let content = create_content_provider(lang_content.clone());

    // Pre-extract all content to avoid closure ownership issues
    let contact_page_subtitle = content.t("contact-page-subtitle");
    let contact_work_request_url = content.t("contact-work-request-url");
    let contact_request_quote = content.t("contact-request-quote");

    // Clone values that are used multiple times
    let contact_request_quote_clone = contact_request_quote.clone();
    let contact_work_request_url_clone = contact_work_request_url.clone();

    view! {
        <div class="ds-bg-page py-ds-6">
            <section class="ds-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                // Header Section
                <div class="text-center mb-ds-8">
                    <h1 class="ds-heading-1 ds-text mb-ds-4">
                        {content.t("contact-page-title")}
                    </h1>
                    <rustelo_components::HtmlContent
                      content={contact_page_subtitle}
                      class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto".to_string()
                    />
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-ds-6">
                    // Contact Information Sidebar
                    <div class="lg:col-span-1">
                        <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
                            <h2 class="ds-heading-2 ds-text mb-ds-6">
                                {content.t("contact-lets-connect")}
                            </h2>

                            <div class="space-y-6">
                                // Email Contact
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                                            <span class="text-lg">"📧"</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="ds-heading-4 ds-text">{content.t("contact-email-contact")}</h3>
                                        <p class="ds-text-secondary">"hello@jesusperez.pro"</p>
                                        <p class="ds-caption ds-text-muted">{content.t("contact-best-for-detailed")}</p>
                                    </div>
                                </div>

                                // Telegram Contact
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                                            <span class="text-lg">"💬"</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="ds-heading-4 ds-text">{content.t("contact-telegram-contact")}</h3>
                                        <p class="ds-text-secondary">"@jesusperez_dev"</p>
                                        <p class="ds-caption ds-text-muted">{content.t("contact-quick-questions")}</p>
                                    </div>
                                </div>

                                // Schedule Call
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                                            <span class="text-lg">"📞"</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="ds-heading-4 ds-text">{content.t("contact-schedule-call")}</h3>
                                        <p class="ds-text-secondary">{content.t("contact-consultation-30min")}</p>
                                        <a href="https://calendly.com/jesusperez-dev" target="_blank" rel="noopener noreferrer" class="ds-caption ds-text font-medium hover:ds-text-secondary">
                                            {content.t("contact-book-time-slot")}
                                        </a>
                                    </div>
                                </div>
                            </div>

                            // Professional Networks
                            <div class="mt-ds-6 pt-ds-6 border-t ds-border">
                                <h3 class="ds-heading-4 ds-text mb-ds-4">{content.t("contact-professional-networks")}</h3>
                                <div class="space-y-2">
                                    <a href="https://www.linkedin.com/in/jesusperezlorenzo/" target="_blank" rel="noopener noreferrer" class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                                        {content.t("contact-linkedin-profile")}
                                    </a>
                                    <a href="https://github.com/jesusperezlorenzo" target="_blank" rel="noopener noreferrer" class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                                        {content.t("contact-git-profile")}
                                    </a>
                                    <a href={content.t("contact-blog-url")} class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                                        {content.t("contact-read-my-blog")}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    // Contact Form - Temporarily simplified for SSR compatibility
                    <div class="lg:col-span-2">
                        <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
                            <div class="form-header mb-ds-6">
                                <h2 class="ds-heading-2 ds-text mb-2">
                                    {content.t("contact-send-message")}
                                </h2>
                                <p class="ds-text-secondary">
                                    {content.t("contact-contact-form-description")}
                                </p>
                            </div>

                            <form action="mailto:hello@jesusperez.pro" method="get" class="space-y-ds-4">
                                // Name Field
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-4">
                                    <div class="relative">
                                        <label for="contact-form-name" class="ds-text font-medium block mb-2">
                                            {content.t("contact-name-label")}
                                        </label>
                                        <input
                                            type="text"
                                            id="contact-form-name"
                                            name="name"
                                            required
                                            class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            placeholder={content.t("contact-name-placeholder")}
                                        />
                                    </div>

                                    // Email Field
                                    <div class="relative">
                                        <label for="contact-form-email" class="ds-text font-medium block mb-2">
                                            {content.t("contact-email-label")}
                                        </label>
                                        <input
                                            type="email"
                                            id="contact-form-email"
                                            name="email"
                                            required
                                            class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            placeholder={content.t("contact-email-placeholder")}
                                        />
                                    </div>
                                </div>

                                // Subject Field
                                <div class="relative">
                                    <label for="contact-form-subject" class="ds-text font-medium block mb-2">
                                        {content.t("contact-subject-label")}
                                    </label>
                                    <input
                                        type="text"
                                        id="contact-form-subject"
                                        name="subject"
                                        required
                                        class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder={content.t("contact-subject-placeholder")}
                                    />
                                </div>

                                // Message Field
                                <div class="relative">
                                    <label for="contact-form-message" class="ds-text font-medium block mb-2">
                                        {content.t("contact-message-label")}
                                    </label>
                                    <textarea
                                        id="contact-form-message"
                                        name="body"
                                        rows="6"
                                        required
                                        class="ds-textarea w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500 resize-vertical"
                                        placeholder={content.t("contact-message-placeholder")}
                                    ></textarea>
                                </div>

                                // Submit Button
                                <div class="flex justify-end">
                                    <button
                                        type="submit"
                                        class="ds-btn-primary px-8 py-3 font-medium ds-rounded transition-colors duration-200"
                                    >
                                        {content.t("contact-send-message-btn")}
                                    </button>
                                </div>
                            </form>
                        </div>
                        // Response Time
                        <div class="mt-ds-6 p-ds-4 ds-bg-secondary ds-rounded-lg">
                            <h3 class="font-semibold ds-text mb-2">{content.t("contact-response-time")}</h3>
                            <p class="ds-caption ds-text-secondary">
                                {content.t("contact-response-time-text")}
                            </p>
                        </div>
                    </div>
                </div>

                // FAQ Section
                <div class="mt-ds-8">
                    <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
                        <h2 class="ds-heading-2 ds-text mb-ds-6 text-center">
                            {content.t("contact-frequently-asked-questions")}
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-6">
                            // FAQ Item 1
                            <div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-faq-what-projects")}
                                </h3>
                                <p class="ds-text-secondary">
                                    {content.t("contact-faq-what-projects-answer")}
                                </p>
                            </div>

                            // FAQ Item 2
                            <div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-faq-remote-teams")}
                                </h3>
                                <p class="ds-text-secondary">
                                    {content.t("contact-faq-remote-teams-answer")}
                                </p>
                            </div>

                            // FAQ Item 3
                            <div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-faq-pricing-approach")}
                                </h3>
                                <p class="ds-text-secondary">
                                    {content.t("contact-faq-pricing-answer")}
                                </p>
                            </div>

                            // FAQ Item 4
                            <div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-faq-existing-projects")}
                                </h3>
                                <p class="ds-text-secondary">
                                    {content.t("contact-faq-existing-projects-answer")}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                // Alternative Contact Methods
                <div class="mt-ds-8">
                    <div class="text-center">
                        <h2 class="ds-heading-2 ds-text mb-ds-6">
                            {content.t("contact-other-ways-connect")}
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-ds-6">
                            // Project Consultation
                            <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
                                <div class="ds-text-secondary mb-ds-4">
                                    <span class="text-4xl">"🚀"</span>
                                </div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-project-consultation")}
                                </h3>
                                <p class="ds-text-secondary mb-ds-4">
                                    {content.t("contact-consultation-help")}
                                </p>
                                <rustelo_components::SpaLink href={contact_work_request_url_clone} class="ds-btn-secondary".to_string()>
                                  {contact_request_quote_clone}
                                </rustelo_components::SpaLink>
                            </div>

                            // Mentoring Services
                            <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
                                <div class="ds-text-secondary mb-ds-4">
                                    <span class="text-4xl">"🧑‍🏫"</span>
                                </div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-mentoring-training")}
                                </h3>
                                <p class="ds-text-secondary mb-ds-4">
                                    {content.t("contact-mentoring-help")}
                                </p>
                                <a
                                    href=format!("{}#mentoring", content.t("contact-services-url"))
                                    class="ds-btn-primary"
                                >
                                    {content.t("contact-learn-more")}
                                </a>
                            </div>

                            // Speaking & Events
                            <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
                                <div class="ds-text-secondary mb-ds-4">
                                    <span class="text-4xl">"🎤"</span>
                                </div>
                                <h3 class="ds-heading-4 ds-text mb-2">
                                    {content.t("contact-speaking-events")}
                                </h3>
                                <p class="ds-text-secondary mb-ds-4">
                                    {content.t("contact-speaking-help")}
                                </p>
                                <a
                                    href="mailto:hello@jesusperez.pro?subject=Speaking Opportunity"
                                    class="ds-btn-primary"
                                >
                                    {content.t("contact-get-in-touch")}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    }
}
