//! Unified Legal Page Component

use leptos::prelude::*;
use rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;

#[component]
pub fn UnifiedLegalPage(
    #[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 {
    // Clean closure pattern that works with Leptos ownership model
    // Use DRY content accessor helper
    let content = create_content_provider_reactive(lang_content.clone());

    view! {
        <div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100 dark:from-gray-900 dark:to-slate-900">
          <div class="container mx-auto px-4 py-16">
            <div class="max-w-4xl mx-auto">
              // Header
              <div class="text-center mb-ds-12">
                <h1 class="text-4xl md:text-5xl font-bold ds-text dark:ds-text mb-ds-4">
                  {content.t("legal-title")}
                </h1>
                <p class="text-xl ds-text-secondary mb-2">
                  {content.t("legal-subtitle")}
                </p>
                <p class="ds-caption ds-text-muted">
                  {content.t("legal-effective-date")}
                </p>
              </div>

              // Content
              <div class="ds-bg ds-rounded-xl shadow-xl p-8 md:p-12">
                <div class="prose prose-lg dark:prose-invert max-w-none">
                  <p class="ds-body ds-text-secondary mb-8 leading-relaxed">
                    {content.t("legal-intro")}
                  </p>

                  // Website Information
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("legal-website-information")}
                  </h2>
                  <div class=" ds-rounded-lg p-ds-6 mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <p class="ds-text-secondary"><strong>{content.t("legal-owner")}:</strong> {content.t("legal-owner-value")}</p>
                        <p class="ds-text-secondary"><strong>{content.t("legal-activity")}:</strong> {content.t("legal-activity-value")}</p>
                      </div>
                      <div>
                        <p class="ds-text-secondary"><strong>{content.t("legal-location")}:</strong> {content.t("legal-location-value")}, {content.t("legal-country-value")}</p>
                        <p class="ds-text-secondary"><strong>{content.t("legal-contact")}:</strong> {content.t("legal-contact-value")}</p>
                      </div>
                    </div>
                  </div>

                  // Terms of Use
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("legal-terms-of-use")}
                  </h2>

                  <h3 class="ds-heading-4 ds-text mt-ds-6 mb-3">
                    {content.t("legal-acceptance-of-terms")}
                  </h3>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("legal-acceptance-of-terms-text")}
                  </p>

                  <h3 class="ds-heading-4 ds-text mt-ds-6 mb-3">
                    {content.t("legal-permitted-use")}
                  </h3>
                  <p class="ds-text-secondary mb-2">
                    {content.t("legal-permitted-use-text")}
                  </p>
                  <ul class="list-disc list-inside ds-text-secondary mb-ds-4 space-y-ds-2">
                    <li>{content.t("legal-browse-and-read")}</li>
                    <li>{content.t("legal-contact-for-business")}</li>
                    <li>{content.t("legal-share-with-attribution")}</li>
                  </ul>

                  <h3 class="ds-heading-4 ds-text mt-ds-6 mb-3">
                    {content.t("legal-prohibited-use")}
                  </h3>
                  <p class="ds-text-secondary mb-2">
                    {content.t("legal-prohibited-use-text")}
                  </p>
                  <ul class="list-disc list-inside ds-text-secondary mb-6 space-y-ds-2">
                    <li>{content.t("legal-unlawful-purpose")}</li>
                    <li>{content.t("legal-unauthorized-access")}</li>
                    <li>{content.t("legal-reproduce-without-permission")}</li>
                  </ul>

                  // Intellectual Property
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("legal-intellectual-property")}
                  </h2>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("legal-intellectual-property-text")}
                  </p>

                  // Technical Information
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("legal-technical-information")}
                  </h2>
                  <p class="ds-text-secondary mb-2">
                    {content.t("legal-technical-information-text")}
                  </p>
                  <ul class="list-disc list-inside ds-text-secondary mb-6 space-y-ds-2">
                    <li>{content.t("legal-rust-and-leptos")}</li>
                    <li>{content.t("legal-server-side-rendering")}</li>
                    <li>{content.t("legal-webassembly-functionality")}</li>
                  </ul>

                  // Contact Information
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("legal-contact-information")}
                  </h2>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("legal-contact-legal-text")}
                  </p>
                  <div class=" ds-rounded-lg p-4 mb-6">
                    <p class="ds-text-secondary"><strong>{content.t("legal-email")}:</strong> {content.t("legal-email-value")}</p>
                    <p class="ds-text-secondary"><strong>{content.t("legal-address")}:</strong> {content.t("legal-address-value")}</p>
                  </div>

                  <div class="border-t ds-border dark:ds-border pt-6 mt-8">
                    <p class="ds-caption ds-text-muted italic">
                      {content.t("legal-effective-date")}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    }
}
