//! Generated Unified {ComponentName} Page Component
//!
//! Auto-generated form page implementation with contact/request form.

use leptos::prelude::*;
use shared::i18n::create_content_provider;

/// Unified {ComponentName} page component that delegates to appropriate implementation
#[component]
pub fn {ComponentName}Page(_language: String) -> impl IntoView {
    #[cfg(not(target_arch = "wasm32"))]
    {
        // SSR context: use static implementation
        view! {
            <crate::{ModuleName}::ssr::{ComponentName}PageSSR language=_language.clone() />
        }
    }

    #[cfg(target_arch = "wasm32")]
    {
        // Client context: use reactive implementation
        view! {
            <crate::{ModuleName}::client::{ComponentName}PageClient language=_language.clone() />
        }
    }
}

/// Unified {ComponentName} Page component that works in both SSR and client contexts
#[component]
pub fn Unified{ComponentName}Page(
    #[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());

    view! {
        <div class="ds-bg-page py-ds-6">
            <section class="ds-container max-w-4xl 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("{prefix}-page-title")}
                    </h1>
                    <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
                        {content.t("{prefix}-form-description")}
                    </p>
                </div>

                // Form Section
                <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-8">
                    // Basic form structure - can be customized based on needs
                    <form class="space-y-ds-6">
                        // Name field
                        <div>
                            <label class="ds-label ds-text">
                                {content.t_with_default("{prefix}-form-name-label", "Name")}
                            </label>
                            <input
                                type="text"
                                name="name"
                                required=true
                                class="ds-input w-full"
                                placeholder={content.t_with_default("{prefix}-form-name-placeholder", "Your name")}
                            />
                        </div>

                        // Email field
                        <div>
                            <label class="ds-label ds-text">
                                {content.t_with_default("{prefix}-form-email-label", "Email")}
                            </label>
                            <input
                                type="email"
                                name="email"
                                required=true
                                class="ds-input w-full"
                                placeholder={content.t_with_default("{prefix}-form-email-placeholder", "your@email.com")}
                            />
                        </div>

                        // Subject field (optional)
                        <div>
                            <label class="ds-label ds-text">
                                {content.t_with_default("{prefix}-form-subject-label", "Subject")}
                            </label>
                            <input
                                type="text"
                                name="subject"
                                class="ds-input w-full"
                                placeholder={content.t_with_default("{prefix}-form-subject-placeholder", "What can I help you with?")}
                            />
                        </div>

                        // Message field
                        <div>
                            <label class="ds-label ds-text">
                                {content.t_with_default("{prefix}-form-message-label", "Message")}
                            </label>
                            <textarea
                                name="message"
                                required=true
                                rows=6
                                class="ds-input w-full"
                                placeholder={content.t_with_default("{prefix}-form-message-placeholder", "Tell me about your project...")}
                            />
                        </div>

                        // Submit button
                        <div class="flex justify-center pt-ds-4">
                            <button
                                type="submit"
                                class="ds-btn-primary px-ds-8">
                                {content.t_with_default("{prefix}-form-submit", "Send Message")}
                            </button>
                        </div>
                    </form>

                    // Success message (hidden by default)
                    <div class="hidden mt-ds-6 p-ds-4 ds-bg-success ds-rounded-md">
                        <p class="ds-text-success">
                            {content.t_with_default("{prefix}-form-success", "Thank you! Your message has been sent.")}
                        </p>
                    </div>
                </div>

                // Additional info section (optional)
                {move || {
                    let additional_info = content.t_quiet("{prefix}-additional-info");
                    if !additional_info.is_empty() {
                        view! {
                            <div class="mt-ds-8 text-center">
                                <div class="ds-body ds-text-secondary max-w-2xl mx-auto">
                                    <components::HtmlContent
                                        content=additional_info
                                        class="".to_string()
                                    />
                                </div>
                            </div>
                        }.into_view()
                    } else {
                        view! {}.into_view()
                    }
                }}
            </section>
        </div>
    }
}
