use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::{BsArrowRight, BsShieldCheck};
use dioxus_free_icons::Icon;

use crate::i18n::{t, Locale};
use crate::Route;

/// Public landing page for the CERTifAI platform.
///
/// Displays a marketing-oriented page with hero section, feature grid,
/// how-it-works steps, and call-to-action banners. This page is accessible
/// without authentication. Uses the Glass Aurora design with glassmorphic
/// effects, aurora gradients, and centered hero layout.
#[component]
pub fn LandingPage() -> Element {
    rsx! {
        div { class: "landing",
            LandingNav {}
            HeroSection {}
            TrustBar {}
            FeaturesGrid {}
            HowItWorks {}
            CtaBanner {}
            LandingFooter {}
        }
    }
}

/// Sticky top navigation bar with logo, nav links, and CTA buttons.
/// Uses Glass Aurora glassmorphic nav with backdrop-filter blur.
#[component]
fn LandingNav() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        nav { class: "landing-nav",
            div { class: "landing-nav-inner",
                Link { to: Route::LandingPage {}, class: "landing-logo",
                    span { class: "landing-logo-icon",
                        Icon { icon: BsShieldCheck, width: 24, height: 24 }
                    }
                    span { "CERTifAI" }
                }
                div { class: "landing-nav-links",
                    a { href: "#features", {t(l, "common.features")} }
                    a { href: "#how-it-works", {t(l, "common.how_it_works")} }
                    a { href: "#pricing", {t(l, "nav.pricing")} }
                }
                div { class: "landing-nav-actions",
                    Link {
                        to: Route::Login {
                            redirect_url: "/dashboard".into(),
                        },
                        class: "btn btn-ghost btn-sm",
                        {t(l, "common.log_in")}
                    }
                    Link {
                        to: Route::Login {
                            redirect_url: "/dashboard".into(),
                        },
                        class: "btn btn-primary btn-sm",
                        {t(l, "common.get_started")}
                    }
                }
            }
        }
    }
}

/// Hero section with pill badges, headline, subtitle, CTA buttons, and
/// a glass-preview stat panel. Centered layout per Glass Aurora design.
#[component]
fn HeroSection() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        section { class: "hero-section",
            div { class: "hero-content",
                div { class: "hero-pills",
                    span { class: "pill accent", {t(l, "landing.pill_gdpr")} }
                    span { class: "pill", {t(l, "landing.pill_self_hosted")} }
                    span { class: "pill", {t(l, "landing.pill_eu")} }
                }
                h1 { class: "hero-title",
                    {t(l, "landing.hero_title_1")}
                    br {}
                    span { class: "hero-title-accent", {t(l, "landing.hero_title_2")} }
                }
                p { class: "hero-subtitle",
                    {t(l, "landing.hero_subtitle")}
                }
                div { class: "hero-actions",
                    Link {
                        to: Route::Login {
                            redirect_url: "/dashboard".into(),
                        },
                        class: "btn btn-primary btn-lg",
                        {t(l, "common.get_started")}
                        Icon { icon: BsArrowRight, width: 18, height: 18 }
                    }
                    a { href: "#features", class: "btn btn-outline btn-lg",
                        {t(l, "landing.learn_more")}
                    }
                }
                div { class: "preview-container",
                    div { class: "glass-preview",
                        div { class: "preview-stat",
                            div { class: "preview-stat-value", "5" }
                            div { class: "preview-stat-label",
                                {t(l, "landing.preview_models")}
                            }
                        }
                        div { class: "preview-stat",
                            div { class: "preview-stat-value", "847K" }
                            div { class: "preview-stat-label",
                                {t(l, "landing.preview_tokens")}
                            }
                        }
                        div { class: "preview-stat",
                            div { class: "preview-stat-value", "$47.82" }
                            div { class: "preview-stat-label",
                                {t(l, "landing.preview_spend")}
                            }
                        }
                    }
                }
            }
        }
    }
}

/// Trust bar with aurora dot indicators and stat labels.
/// Replaces the previous text-based social proof section.
#[component]
fn TrustBar() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        section { class: "trust-bar",
            div { class: "trust-item",
                div { class: "trust-dot" }
                span { "100% " {t(l, "landing.on_premise")} }
            }
            div { class: "trust-item",
                div { class: "trust-dot" }
                span { "GDPR " {t(l, "landing.compliant")} }
            }
            div { class: "trust-item",
                div { class: "trust-dot" }
                span { "EU " {t(l, "landing.data_residency")} }
            }
            div { class: "trust-item",
                div { class: "trust-dot" }
                span { "Zero " {t(l, "landing.third_party")} }
            }
        }
    }
}

/// Feature cards grid section. Uses gradient icon bars instead of SVG icons.
#[component]
fn FeaturesGrid() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        section { id: "features", class: "features-section",
            h2 { class: "section-title", {t(l, "landing.features_title")} }
            p { class: "section-subtitle",
                {t(l, "landing.features_subtitle")}
            }
            div { class: "features-grid",
                FeatureCard {
                    title: t(l, "landing.feat_infra_title"),
                    description: t(l, "landing.feat_infra_desc"),
                }
                FeatureCard {
                    title: t(l, "landing.feat_gdpr_title"),
                    description: t(l, "landing.feat_gdpr_desc"),
                }
                FeatureCard {
                    title: t(l, "landing.feat_llm_title"),
                    description: t(l, "landing.feat_llm_desc"),
                }
                FeatureCard {
                    title: t(l, "landing.feat_agent_title"),
                    description: t(l, "landing.feat_agent_desc"),
                }
                FeatureCard {
                    title: t(l, "landing.feat_mcp_title"),
                    description: t(l, "landing.feat_mcp_desc"),
                }
                FeatureCard {
                    title: t(l, "landing.feat_api_title"),
                    description: t(l, "landing.feat_api_desc"),
                }
            }
        }
    }
}

/// Individual feature card with a gradient icon bar accent.
///
/// # Arguments
///
/// * `title` - Feature title (owned String from translation lookup)
/// * `description` - Feature description text (owned String from translation lookup)
#[component]
fn FeatureCard(title: String, description: String) -> Element {
    rsx! {
        div { class: "card feature-card",
            div { class: "feature-icon-bar" }
            h3 { class: "feature-card-title", "{title}" }
            p { class: "feature-card-desc", "{description}" }
        }
    }
}

/// Three-step "How It Works" section.
#[component]
fn HowItWorks() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        section { id: "how-it-works", class: "how-it-works-section",
            h2 { class: "section-title", {t(l, "landing.how_title")} }
            p { class: "section-subtitle", {t(l, "landing.how_subtitle")} }
            div { class: "steps-grid",
                StepCard {
                    number: "01",
                    title: t(l, "landing.step_deploy"),
                    description: t(l, "landing.step_deploy_desc"),
                }
                StepCard {
                    number: "02",
                    title: t(l, "landing.step_configure"),
                    description: t(l, "landing.step_configure_desc"),
                }
                StepCard {
                    number: "03",
                    title: t(l, "landing.step_scale"),
                    description: t(l, "landing.step_scale_desc"),
                }
            }
        }
    }
}

/// Individual step card.
///
/// # Arguments
///
/// * `number` - Step number string (e.g. "01")
/// * `title` - Step title (owned String from translation lookup)
/// * `description` - Step description text (owned String from translation lookup)
#[component]
fn StepCard(number: &'static str, title: String, description: String) -> Element {
    rsx! {
        div { class: "step-card",
            span { class: "step-number", "{number}" }
            h3 { class: "step-title", "{title}" }
            p { class: "step-desc", "{description}" }
        }
    }
}

/// Call-to-action banner wrapped in a glass box with aurora top border.
#[component]
fn CtaBanner() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        section { class: "cta-section",
            div { class: "cta-box",
                h2 { class: "cta-title", {t(l, "landing.cta_title")} }
                p { class: "cta-subtitle",
                    {t(l, "landing.cta_subtitle")}
                }
                div { class: "cta-actions",
                    Link {
                        to: Route::Login {
                            redirect_url: "/dashboard".into(),
                        },
                        class: "btn btn-primary btn-lg",
                        {t(l, "landing.get_started_free")}
                        Icon { icon: BsArrowRight, width: 18, height: 18 }
                    }
                    Link {
                        to: Route::Login {
                            redirect_url: "/dashboard".into(),
                        },
                        class: "btn btn-outline btn-lg",
                        {t(l, "common.log_in")}
                    }
                }
            }
        }
    }
}

/// Landing page footer with links and copyright.
/// Uses glass border-top styling per Glass Aurora design.
#[component]
fn LandingFooter() -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        footer { class: "landing-footer",
            div { class: "landing-footer-inner",
                div { class: "footer-brand",
                    div { class: "landing-logo",
                        span { class: "landing-logo-icon",
                            Icon { icon: BsShieldCheck, width: 20, height: 20 }
                        }
                        span { "CERTifAI" }
                    }
                    p { class: "footer-tagline", {t(l, "landing.footer_tagline")} }
                }
                div { class: "footer-links-group",
                    h4 { class: "footer-links-heading", {t(l, "landing.product")} }
                    a { href: "#features", {t(l, "common.features")} }
                    a { href: "#how-it-works", {t(l, "common.how_it_works")} }
                    a { href: "#pricing", {t(l, "nav.pricing")} }
                }
                div { class: "footer-links-group",
                    h4 { class: "footer-links-heading", {t(l, "landing.legal")} }
                    Link { to: Route::ImpressumPage {}, {t(l, "common.impressum")} }
                    Link { to: Route::PrivacyPage {}, {t(l, "common.privacy_policy")} }
                }
                div { class: "footer-links-group",
                    h4 { class: "footer-links-heading", {t(l, "landing.resources")} }
                    a { href: "#", {t(l, "landing.documentation")} }
                    a { href: "#", {t(l, "landing.api_reference")} }
                    a { href: "#", {t(l, "landing.support")} }
                }
            }
            div { class: "footer-bottom",
                p { {t(l, "landing.copyright")} }
            }
        }
    }
}