use leptos::prelude::*;
use crate::components::card::{Card, CardVariant};
use crate::components::prelude::*;
use crate::components::dropdown::Dropdown;
use super::proxy_params_context::{use_proxy_params, ProxyParameters, proxy_region_to_string, proxy_region_to_flag, proxy_region_to_display_name, pool_type_to_display_name};
use rust_shared::repository::model::{ProxyFormat, ProxyType, ProxyRegion, PoolType, Profile, DefaultProxySettings};
use strum::IntoEnumIterator;
use crate::auth::use_auth;
use crate::utils::pool_utils::get_available_pools;
use crate::api::{save_default_pool_parameters, DefaultPoolParameters};
use leptos::task::spawn_local;

fn format_display_name(format: &ProxyFormat) -> String {
    match format {
        ProxyFormat::LoginPasswordHostnamePort => "login:password:hostname:port".to_string(),
        ProxyFormat::LoginPasswordAtHostnamePort => "login:password@hostname:port".to_string(),
        ProxyFormat::HostnamePortAtLoginPassword => "hostname:port@login:password".to_string(),
        ProxyFormat::HostnamePortLoginPassword => "hostname:port:login:password".to_string(),
        ProxyFormat::HostnamePort => "hostname:port".to_string(),
    }
}

#[component]
pub fn ParametersPanel(
    on_back: Callback<()>,
    on_country_select: Callback<()>,
    on_state_select: Callback<()>,
    on_city_select: Callback<()>,
    on_zip_code_select: Callback<()>,
    on_include_asn_select: Callback<()>,
    on_exclude_asn_select: Callback<()>,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let params_context = use_proxy_params();
    let parameters = params_context.parameters;
    let auth = use_auth();
    
    // Save state
    let saving = RwSignal::new(false);
    let save_success = RwSignal::new(false);
    
    // Track if there are unsaved changes
    let has_unsaved_changes = RwSignal::new(false);
    let initial_params = RwSignal::new(parameters.get());
    
    // Monitor parameter changes to show/hide save button
    create_effect(move |_| {
        let current_params = parameters.get();
        let initial = initial_params.get();
        
        // Compare current parameters with initial ones
        let has_changes = current_params.countries != initial.countries ||
                         current_params.cities != initial.cities ||
                         current_params.states != initial.states ||
                         current_params.zip_codes != initial.zip_codes ||
                         current_params.asn_include != initial.asn_include ||
                         current_params.asn_exclude != initial.asn_exclude ||
                         current_params.anonymity != initial.anonymity ||
                         current_params.pool_type != initial.pool_type ||
                         current_params.server_region != initial.server_region ||
                         current_params.protocol != initial.protocol ||
                         current_params.proxy_type != initial.proxy_type ||
                         current_params.proxy_count != initial.proxy_count ||
                         current_params.format != initial.format;
        
        has_unsaved_changes.set(has_changes);
    });
    
    // Reset unsaved changes flag when save is successful
    create_effect(move |_| {
        if save_success.get() {
            has_unsaved_changes.set(false);
            // Update initial params to current state after successful save
            initial_params.set(parameters.get());
        }
    });
    
    // Format selection signal - initialize with current format from parameters
    let selected_format = RwSignal::new(parameters.with(|p| p.format));
    
    // Keep selected_format in sync with parameters
    create_effect(move |_| {
        let current_format = parameters.with(|p| p.format);
        selected_format.set(current_format);
    });
    
    // Handle save button click
    let handle_save_click = move |_| {
        if saving.get() {
            return;
        }
        
        saving.set(true);
        save_success.set(false);
        
        let current_params = parameters.get();
        let pool = current_params.pool_type;
        
           // Convert ProxyParameters to DefaultPoolParameters
           let pool_params = DefaultPoolParameters {
               countries: current_params.countries,
               cities: current_params.cities,
               states: current_params.states,
               zipcodes: current_params.zip_codes,
               asns: current_params.asn_include,
               exclude_countries: vec![], // Not used in current implementation
               exclude_asn: current_params.asn_exclude,
               anonymous_filter: current_params.anonymity,
               rotation_interval: None, // Not used in current implementation
           };
           
           spawn_local(async move {
               match save_default_pool_parameters(pool, pool_params).await {
                Ok(_) => {
                    save_success.set(true);
                    log::info!("Default proxy settings saved successfully");
                    
                    // Hide success message after 3 seconds
                    set_timeout(move || {
                        save_success.set(false);
                    }, std::time::Duration::from_secs(3));
                }
                Err(e) => {
                    log::error!("Failed to save default proxy settings: {:?}", e);
                }
            }
            saving.set(false);
        });
    };
    
    let profile = move || auth.get_profile();
    let available_pools = {
        let profile = profile.clone();
        move || {
            if let Some(profile) = profile() {
                get_available_pools(&profile)
            } else {
                vec![]
            }
        }
    };
    
    let pool_types = {
        let available_pools = available_pools.clone();
        move || {
            available_pools().iter().map(|pool| {
                (pool.clone(), pool_type_to_display_name(pool))
            }).collect::<Vec<_>>()
        }
    };
    let server_regions = vec![
        ProxyRegion::Auto,
        ProxyRegion::USA,
        ProxyRegion::Europe,
        ProxyRegion::Australia,
        ProxyRegion::Singapore,
        ProxyRegion::Japan,
        ProxyRegion::Brazil,
    ];

    view! {
        <div 
            class="w-full h-full flex flex-col"
            id=id.unwrap_or("parameters-page")
        >
            <div class="flex items-center justify-between mb-6" id="parameters-header">
                <div class="flex items-center gap-4" id="header-left">
                    <button 
                        class="w-[38px] h-[38px] bg-[rgba(255,249,247,0.05)] rounded-[10px] flex items-center justify-center hover:bg-[rgba(255,249,247,0.1)] transition-colors duration-200"
                        id="back-button"
                        on:click=move |_| {
                            on_back.run(());
                        }
                    >
                        <svg 
                            width="24" 
                            height="24" 
                            viewBox="0 0 24 24" 
                            fill="none" 
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-[20px] h-[20px]"
                        >
                            <path 
                                d="M19 12H5M12 19L5 12L12 5" 
                                stroke="rgba(255,249,247,0.6)" 
                                stroke-width="2" 
                                stroke-linecap="round" 
                                stroke-linejoin="round"
                            />
                        </svg>
                    </button>
                    <h1 class="font-bold text-2xl leading-[32px] text-[rgba(255,249,247,0.95)]" id="parameters-title">
                        {t8r!("Proxy Parameters")}
                    </h1>
                </div>
                
                <button 
                    class=move || {
                        let base_classes = "flex justify-center items-center px-6 h-[46px] rounded-[14px] font-semibold text-base leading-[22px] tracking-[-0.02em] transition-all duration-200";
                        let saving_classes = if saving.get() { "opacity-50 cursor-not-allowed" } else { "" };
                        let success_classes = if save_success.get() { 
                            "bg-gradient-to-b from-[#00FF88] to-[#00CC66] shadow-[0_0_100px_rgba(0,255,136,0.5),0_0_200px_#00CC66] text-white"
                        } else { 
                            "bg-gradient-to-b from-[#FF5011] to-[#FF4400] shadow-[0_0_100px_rgba(255,68,0,0.5),0_0_200px_#FF4400] text-[rgba(255,249,247,0.8)] hover:shadow-[0_0_120px_rgba(255,68,0,0.6),0_0_220px_#FF4400]"
                        };
                        format!("{} {} {}", base_classes, saving_classes, success_classes)
                    }
                    id="save-parameters-button"
                    on:click=handle_save_click
                    disabled=move || saving.get()
                >
                    {move || {
                        if save_success.get() {
                            t8s!("Saved Successfully!")
                        } else if saving.get() {
                            t8s!("Saving...")
                        } else {
                            t8s!("Save Configuration")
                        }
                    }}
                </button>
            </div>

            <Card 
                variant=CardVariant::L2
                max_width="w-full" 
                padding="p-6" 
                class="w-full flex-1 overflow-y-auto"
                id="parameters-main-card"
            >
                <div class="flex flex-col gap-8" id="parameters-sections">
                    {move || {
                        let pools = available_pools();
                        let pool_types = pool_types.clone();
                        if pools.is_empty() {
                            view! {
                                <div class="flex flex-col items-center justify-center py-16 px-8 text-center" id="no-pools-state">
                                    <div class="w-20 h-20 bg-[var(--text-muted)] bg-opacity-10 rounded-full flex items-center justify-center mb-6">
                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--text-muted)]">
                                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
                                            <path d="M12 6v6l4 2"/>
                                        </svg>
                                    </div>
                                    
                                    <h2 class="text-xl font-semibold text-[var(--main-light)] mb-3" id="no-pools-title">
                                        {t8r!("No Proxy Pools Available")}
                                    </h2>
                                    
                                    <p class="text-[var(--text-muted)] text-base leading-relaxed mb-6 max-w-md" id="no-pools-description">
                                        {t8r!("You need to purchase proxy traffic before you can configure proxy parameters. Buy traffic for any pool type to get started.")}
                                    </p>
                                    
                                    <div class="flex flex-col sm:flex-row gap-3" id="no-pools-actions">
                                        <a 
                                            href=t8r!("/en/profile?section=buy-proxy")().get() 
                                            class="flex items-center justify-center px-6 py-3 bg-gradient-to-b from-[#FF5011] to-[#FF4400] shadow-[0_0_100px_rgba(255,68,0,0.5),0_0_200px_#FF4400] rounded-[14px] font-semibold text-base leading-[22px] tracking-tight text-[var(--main-light-80)] transition-all cursor-pointer border-transparent hover:shadow-[0_0_120px_rgba(255,68,0,0.6),0_0_240px_#FF4400]"
                                            id="buy-traffic-button"
                                        >
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
                                            </svg>
                                            {t8r!("Buy Traffic")}
                                        </a>
                                        
                                        <a 
                                            href="/prices" 
                                            class="flex items-center justify-center px-6 py-3 border border-[var(--main-light-40)] rounded-[14px] font-semibold text-base leading-[22px] tracking-tight text-[var(--main-light-40)] hover:text-[var(--main-light)] hover:border-[var(--main-light)] transition-all cursor-pointer bg-transparent"
                                            id="view-prices-button"
                                        >
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                            {t8r!("View Prices")}
                                        </a>
                                    </div>
                                    
                                    <div class="mt-8 p-4 bg-[var(--other-light-5)] rounded-[14px] max-w-lg" id="no-pools-info">
                                        <h3 class="text-sm font-semibold text-[var(--main-light)] mb-2" id="info-title">
                                            {t8r!("What you'll get:")}
                                        </h3>
                                        <ul class="text-[var(--text-muted)] text-sm space-y-1" id="info-list">
                                            <li class="flex items-center">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-green-400">
                                                    <path d="M20 6L9 17l-5-5"/>
                                                </svg>
                                                {t8r!("Access to proxy pools")}
                                            </li>
                                            <li class="flex items-center">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-green-400">
                                                    <path d="M20 6L9 17l-5-5"/>
                                                </svg>
                                                {t8r!("Proxy parameter configuration")}
                                            </li>
                                            <li class="flex items-center">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-green-400">
                                                    <path d="M20 6L9 17l-5-5"/>
                                                </svg>
                                                {t8r!("Real-time proxy access")}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            }.into_any()
                        } else {
                            view! {
                    <div class="flex flex-col gap-6" id="pool-type-section">
                        <h2 class="font-bold text-lg leading-6 text-[rgba(255,249,247,0.8)]" id="pool-type-title">
                            {t8r!("Pool Type")}
                        </h2>
                        <div class="flex items-center gap-2 w-full h-[46px]" id="pool-type-selector">
                            {move || {
                                pool_types().iter().enumerate().map(|(index, (pool_type_enum, pool_type_name))| {
                                let pool_type_name_clone = pool_type_name.clone();
                                let pool_type_enum_clone = pool_type_enum.clone();
                                let update_pool_type = params_context.update_pool_type.clone();
                                
                                view! {
                                    <button 
                                        class=move || {
                                            let is_active = parameters.with(|p| p.pool_type == pool_type_enum_clone);
                                            if is_active {
                                                "flex justify-center items-center px-3.5 gap-2 h-[46px] rounded-[14px] flex-1 font-semibold text-base leading-[22px] tracking-[-0.02em] bg-gradient-to-b from-[#FF5011] to-[#FF4400] shadow-[0_0_100px_rgba(255,68,0,0.5),0_0_200px_#FF4400] text-[rgba(255,249,247,0.8)]"
                                            } else {
                                                "flex justify-center items-center px-3.5 gap-2 h-[46px] rounded-[14px] flex-1 font-semibold text-base leading-[22px] tracking-[-0.02em] border border-[rgba(255,249,247,0.4)] text-[rgba(255,249,247,0.4)]"
                                            }
                                        }
                                        id=format!("pool-type-{}", index)
                                        on:click=move |_| {
                                            update_pool_type.run(pool_type_enum_clone.clone());
                                        }
                                    >
                                        {if pool_type_enum == &PoolType::ResidentialPremium {
                                            pool_type_name_clone.replace(t8s!("Premium"), "").clone()
                                        } else {
                                            pool_type_name_clone.clone()
                                        }}
                                        {if pool_type_enum == &PoolType::ResidentialPremium {
                                            view! {
                                                <div class="flex justify-center items-center px-1.5 py-0.5 bg-[rgba(255,249,247,0.05)] rounded-md">
                                                    <span class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]">
                                                        {"PREM"}
                                                    </span>
                                                </div>
                                            }.into_any()
                                        } else {
                                            view! {}.into_any()
                                        }}
                                    </button>
                                }
                            }).collect::<Vec<_>>()
                            }}
                        </div>
                    </div>

                    <div class="flex flex-col gap-6" id="server-region-section">
                        <div class="flex items-center gap-2" id="server-region-header">
                            <h2 class="font-bold text-lg leading-6 text-[rgba(255,249,247,0.8)]" id="server-region-title">
                                {t8r!("Server Region")}
                            </h2>
                            <div 
                                class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                id="region-info-icon"
                                title={t8s!("For best performance, choose the region closest to the target location.")}
                            >
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                    <circle cx="9" cy="9" r="8" stroke="rgba(255,249,247,0.4)" stroke-width="2"/>
                                    <path d="M9 12V9M9 6H9.01" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </div>
                        </div>
                        
                        <div class="scrollbar-hide flex flex-row flex-wrap items-center gap-1 w-full" id="server-region-selector">
                            {server_regions.iter().enumerate().map(|(index, region)| {
                                let region_clone = region.clone();
                                let region_name = proxy_region_to_display_name(region);
                                let region_flag = proxy_region_to_flag(region);
                                let update_server_region = params_context.update_server_region.clone();
                                
                                view! {
                                    <button 
                                        class=move || {
                                            let is_active = parameters.with(|p| p.server_region == region_clone);
                                            if is_active {
                                                "flex justify-center items-center px-3.5 h-[46px] rounded-[14px] font-semibold text-base leading-[22px] tracking-[-0.02em] flex-1 min-w-[80px] bg-gradient-to-b from-[#FF5011] to-[#FF4400] shadow-[0_0_100px_rgba(255,68,0,0.5),0_0_200px_#FF4400] text-[rgba(255,249,247,0.8)]"
                                            } else {
                                                "flex justify-center items-center px-3.5 h-[46px] rounded-[14px] font-semibold text-base leading-[22px] tracking-[-0.02em] flex-1 min-w-[80px] bg-[rgba(255,249,247,0.05)] text-[rgba(255,249,247,0.4)] hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200"
                                            }
                                        }
                                        id=format!("server-region-{}", index)
                                        on:click=move |_| {
                                            update_server_region.run(region_clone.clone());
                                        }
                                    >
                                        <span class="mr-1 flag-emoji">{region_flag}</span>
                                        {region_name}
                                    </button>
                                }
                            }).collect::<Vec<_>>()}
                        </div>
                    </div>

                    <div class="p-4 bg-[rgba(255,249,247,0.05)] rounded-[14px] grid grid-cols-2 gap-6" id="location-settings">
                        
                        <div class="flex flex-col gap-3" id="country-section">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Country Selection")}
                            </h3>
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200 mt-auto" 
                                id="country-input"
                                on:click=move |_| {
                                    on_country_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="country-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.countries.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select countries...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                p.countries.iter().take(4).enumerate().map(|(_index, country)| {
                                                let country_name = country.clone();
                                                view! {
                                                    <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                        <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                            {country_name}
                                                        </span>
                                                    </div>
                                                }
                                                }).chain({
                                                    if p.countries.len() > 4 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", p.countries.len() - 4)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="country-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>

                        <div class="flex flex-col gap-3" id="states-section">
                            <div class="flex items-center gap-2" id="states-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="states-title">
                                    {t8r!("States (optional)")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="states-hint-icon"
                                    title={t8s!("When selecting this option, traffic will be deducted at double the rate.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M13.0909 15.1818V15.9999H4.90906V15.1818H13.0909ZM17.1819 11.0908V6.90906C17.1819 4.64974 15.3503 2.81813 13.0909 2.81812H4.90906C2.64974 2.81813 0.818133 4.64974 0.818115 6.90906V11.0908C0.818115 13.3502 2.64973 15.1817 4.90906 15.1818V15.9999C2.19786 15.9999 0 13.802 0 11.0908V6.90906C1.74982e-05 4.19787 2.19787 2.00002 4.90906 2H13.0909L13.2177 2.00146C15.8703 2.06869 18 4.24023 18 6.90906V11.0908C18 13.7597 15.8703 15.9312 13.2177 15.9984L13.0909 15.9999V15.1818C15.3503 15.1817 17.1819 13.3502 17.1819 11.0908Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M3.39637 12.75L5.75273 9.24491L3.60255 5.87727H5.17346L6.53818 8.17473L7.90291 5.87727H9.41491L7.27455 9.186L9.65055 12.75H8.06982L6.49891 10.266L4.90837 12.75H3.39637Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M11.602 11.67H14.8714V12.75H9.78563V11.7584L11.9554 9.726C12.2238 9.47727 12.4136 9.29727 12.5249 9.186C12.6427 9.07473 12.7802 8.92745 12.9373 8.74418C13.1009 8.55436 13.2122 8.38418 13.2711 8.23364C13.33 8.07655 13.3594 7.91618 13.3594 7.75255C13.3594 7.46454 13.2711 7.242 13.0944 7.08491C12.9242 6.92127 12.6951 6.83945 12.4071 6.83945C12.0798 6.83945 11.8114 6.96054 11.602 7.20273C11.3991 7.43836 11.278 7.80491 11.2387 8.30236L9.96235 8.20418C10.0213 7.386 10.2733 6.774 10.7184 6.36818C11.1634 5.96236 11.7264 5.75945 12.4071 5.75945C13.0682 5.75945 13.6147 5.93291 14.0467 6.27982C14.4787 6.62018 14.6947 7.11109 14.6947 7.75255C14.6947 8.15182 14.5834 8.52818 14.3609 8.88164C14.1449 9.23509 13.762 9.66382 13.2122 10.1678L11.602 11.67Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                    </svg>
                                </div>
                            </div>
                            {move || {
                                parameters.with(|p| {
                                    if p.countries.is_empty() {
                                        view! {
                                            <div class="text-xs text-[rgba(255,249,247,0.4)] italic" id="states-help-text">
                                                {t8r!("Select countries first to enable state selection")}
                                            </div>
                                        }.into_any()
                                    } else {
                                        ().into_any()
                                    }
                                })
                            }}
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200" 
                                id="states-input"
                                disabled=move || parameters.with(|p| p.countries.is_empty())
                                on:click=move |_| {
                                    on_state_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="states-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.states.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select states...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                let states = &p.states;
                                                states.iter().take(3).enumerate().map(|(_index, state)| {
                                                    let state_name = state.to_string();
                                                    view! {
                                                        <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                            <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                                {state_name}
                                                            </span>
                                                        </div>
                                                    }
                                                }).chain({
                                                    if states.len() > 3 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", states.len() - 3)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="states-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>

                        <div class="flex flex-col gap-3" id="cities-section">
                            <div class="flex items-center gap-2" id="cities-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="cities-title">
                                    {t8r!("Cities (optional)")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="cities-hint-icon"
                                    title={t8s!("When selecting this option, traffic will be deducted at double the rate.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M13.0909 15.1818V15.9999H4.90906V15.1818H13.0909ZM17.1819 11.0908V6.90906C17.1819 4.64974 15.3503 2.81813 13.0909 2.81812H4.90906C2.64974 2.81813 0.818133 4.64974 0.818115 6.90906V11.0908C0.818115 13.3502 2.64973 15.1817 4.90906 15.1818V15.9999C2.19786 15.9999 0 13.802 0 11.0908V6.90906C1.74982e-05 4.19787 2.19787 2.00002 4.90906 2H13.0909L13.2177 2.00146C15.8703 2.06869 18 4.24023 18 6.90906V11.0908C18 13.7597 15.8703 15.9312 13.2177 15.9984L13.0909 15.9999V15.1818C15.3503 15.1817 17.1819 13.3502 17.1819 11.0908Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M3.39637 12.75L5.75273 9.24491L3.60255 5.87727H5.17346L6.53818 8.17473L7.90291 5.87727H9.41491L7.27455 9.186L9.65055 12.75H8.06982L6.49891 10.266L4.90837 12.75H3.39637Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M11.602 11.67H14.8714V12.75H9.78563V11.7584L11.9554 9.726C12.2238 9.47727 12.4136 9.29727 12.5249 9.186C12.6427 9.07473 12.7802 8.92745 12.9373 8.74418C13.1009 8.55436 13.2122 8.38418 13.2711 8.23364C13.33 8.07655 13.3594 7.91618 13.3594 7.75255C13.3594 7.46454 13.2711 7.242 13.0944 7.08491C12.9242 6.92127 12.6951 6.83945 12.4071 6.83945C12.0798 6.83945 11.8114 6.96054 11.602 7.20273C11.3991 7.43836 11.278 7.80491 11.2387 8.30236L9.96235 8.20418C10.0213 7.386 10.2733 6.774 10.7184 6.36818C11.1634 5.96236 11.7264 5.75945 12.4071 5.75945C13.0682 5.75945 13.6147 5.93291 14.0467 6.27982C14.4787 6.62018 14.6947 7.11109 14.6947 7.75255C14.6947 8.15182 14.5834 8.52818 14.3609 8.88164C14.1449 9.23509 13.762 9.66382 13.2122 10.1678L11.602 11.67Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                    </svg>
                                </div>
                            </div>
                            {move || {
                                parameters.with(|p| {
                                    if p.countries.is_empty() {
                                        view! {
                                            <div class="text-xs text-[rgba(255,249,247,0.4)] italic" id="cities-help-text">
                                                {t8r!("Select countries first to enable city selection")}
                                            </div>
                                        }.into_any()
                                    } else {
                                        ().into_any()
                                    }
                                })
                            }}
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200" 
                                id="cities-input"
                                disabled=move || parameters.with(|p| p.countries.is_empty())
                                on:click=move |_| {
                                    on_city_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="cities-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.cities.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select cities...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                let cities = &p.cities;
                                                cities.iter().take(3).enumerate().map(|(_index, city)| {
                                                    let city_name = city.to_string();
                                                    view! {
                                                        <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                            <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                                {city_name}
                                                            </span>
                                                        </div>
                                                    }
                                                }).chain({
                                                    if cities.len() > 3 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", cities.len() - 3)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="cities-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>

                        <div class="flex flex-col gap-3" id="zip-codes-section">
                            <div class="flex items-center gap-2" id="zip-codes-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="zip-codes-title">
                                    {t8r!("ZIP Codes (optional)")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="zip-codes-hint-icon"
                                    title={t8s!("When selecting this option, traffic will be deducted at double the rate.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M13.0909 15.1818V15.9999H4.90906V15.1818H13.0909ZM17.1819 11.0908V6.90906C17.1819 4.64974 15.3503 2.81813 13.0909 2.81812H4.90906C2.64974 2.81813 0.818133 4.64974 0.818115 6.90906V11.0908C0.818115 13.3502 2.64973 15.1817 4.90906 15.1818V15.9999C2.19786 15.9999 0 13.802 0 11.0908V6.90906C1.74982e-05 4.19787 2.19787 2.00002 4.90906 2H13.0909L13.2177 2.00146C15.8703 2.06869 18 4.24023 18 6.90906V11.0908C18 13.7597 15.8703 15.9312 13.2177 15.9984L13.0909 15.9999V15.1818C15.3503 15.1817 17.1819 13.3502 17.1819 11.0908Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M3.39637 12.75L5.75273 9.24491L3.60255 5.87727H5.17346L6.53818 8.17473L7.90291 5.87727H9.41491L7.27455 9.186L9.65055 12.75H8.06982L6.49891 10.266L4.90837 12.75H3.39637Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M11.602 11.67H14.8714V12.75H9.78563V11.7584L11.9554 9.726C12.2238 9.47727 12.4136 9.29727 12.5249 9.186C12.6427 9.07473 12.7802 8.92745 12.9373 8.74418C13.1009 8.55436 13.2122 8.38418 13.2711 8.23364C13.33 8.07655 13.3594 7.91618 13.3594 7.75255C13.3594 7.46454 13.2711 7.242 13.0944 7.08491C12.9242 6.92127 12.6951 6.83945 12.4071 6.83945C12.0798 6.83945 11.8114 6.96054 11.602 7.20273C11.3991 7.43836 11.278 7.80491 11.2387 8.30236L9.96235 8.20418C10.0213 7.386 10.2733 6.774 10.7184 6.36818C11.1634 5.96236 11.7264 5.75945 12.4071 5.75945C13.0682 5.75945 13.6147 5.93291 14.0467 6.27982C14.4787 6.62018 14.6947 7.11109 14.6947 7.75255C14.6947 8.15182 14.5834 8.52818 14.3609 8.88164C14.1449 9.23509 13.762 9.66382 13.2122 10.1678L11.602 11.67Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                    </svg>
                                </div>
                            </div>
                            {move || {
                                parameters.with(|p| {
                                    if p.countries.is_empty() {
                                        view! {
                                            <div class="text-xs text-[rgba(255,249,247,0.4)] italic" id="zip-codes-help-text">
                                                {t8r!("Select countries first to enable ZIP code selection")}
                                            </div>
                                        }.into_any()
                                    } else {
                                        ().into_any()
                                    }
                                })
                            }}
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200" 
                                id="zip-codes-input"
                                disabled=move || parameters.with(|p| p.countries.is_empty())
                                on:click=move |_| {
                                    on_zip_code_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="zip-codes-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.zip_codes.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select ZIP codes...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                let zip_codes = &p.zip_codes;
                                                zip_codes.iter().take(3).enumerate().map(|(_index, zip)| {
                                                    let zip_code = zip.to_string();
                                                    view! {
                                                        <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                            <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                                {zip_code}
                                                            </span>
                                                        </div>
                                                    }
                                                }).chain({
                                                    if zip_codes.len() > 3 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", zip_codes.len() - 3)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="zip-codes-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>

                    <div class="flex gap-4" id="protocol-type-section">
                        
                        <div class="flex-1 flex flex-col gap-3" id="protocol-section">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Protocol")}
                            </h3>
                            <div class="flex gap-1" id="protocol-selector">
                                {vec!["http", "https", "socks5"].iter().enumerate().map(|(index, protocol)| {
                                    let protocol_name = protocol.to_uppercase();
                                    let protocol_lower = protocol.to_string();
                                    let protocol_lower_clone = protocol_lower.clone();
                                    let update_protocol = params_context.update_protocol.clone();
                                    
                                    view! {
                                        <button 
                                            class=move || {
                                                let is_active = parameters.with(|p| p.protocol == protocol_lower);
                                                if is_active {
                                                    "flex justify-center items-center px-3.5 h-[46px] rounded-[14px] flex-1 font-semibold text-base leading-[22px] tracking-[-0.02em] bg-gradient-to-b from-[#FF5011] to-[#FF4400] shadow-[0_0_100px_rgba(255,68,0,0.5),0_0_200px_#FF4400] text-[rgba(255,249,247,0.8)]"
                                                } else {
                                                    "flex justify-center items-center px-3.5 h-[46px] rounded-[14px] flex-1 font-semibold text-base leading-[22px] tracking-[-0.02em] bg-[rgba(255,249,247,0.05)] text-[rgba(255,249,247,0.4)]"
                                                }
                                            }
                                            id=format!("protocol-{}", index)
                                            on:click=move |_| {
                                                update_protocol.run(protocol_lower_clone.clone());
                                            }
                                        >
                                            {protocol_name}
                                        </button>
                                    }
                                }).collect::<Vec<_>>()}
                            </div>
                        </div>

                        <div class="flex-1 flex flex-col gap-3" id="proxy-type-section">
                            <div class="flex items-center gap-2" id="proxy-type-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="proxy-type-title">
                                    {t8r!("Proxy Type")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="proxy-type-hint-icon"
                                    title={t8s!("Rotating proxies rotate with each request, so only 1 proxy is issued — every time you refresh the page in the browser, the IP will change.\n\nStatic proxies rotate on a timer of up to 120 minutes and use different ports, available in the range from 10000 to 20000.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <circle cx="9" cy="9" r="8" stroke="rgba(255,249,247,0.4)" stroke-width="2"/>
                                        <path d="M9 12V9M9 6H9.01" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="selector flex items-center w-full h-[46px]" id="proxy-type-selector">
                                <button 
                                    class=move || {
                                        let is_rotating = parameters.with(|p| matches!(p.proxy_type, rust_shared::repository::model::ProxyType::Rotating));

                                        format!(
                                            "{}", 
                                            if is_rotating {
                                                "selected"
                                            } else {
                                                ""
                                            }
                                        )
                                    }
                                    id="rotating-proxy-button"
                                    on:click=move |_| {
                                        params_context.update_proxy_type.run(rust_shared::repository::model::ProxyType::Rotating);
                                    }
                                >
                                    {t8r!("Rotating")}
                                </button>
                                <button 
                                    class=move || {
                                        let is_sticky = parameters.with(|p| matches!(p.proxy_type, rust_shared::repository::model::ProxyType::Sticky(_)));
                                        if is_sticky {
                                            "selected"
                                        } else {
                                            ""
                                        }
                                    }
                                    id="sticky-proxy-button"
                                    on:click=move |_| {
                                        params_context.update_proxy_type.run(rust_shared::repository::model::ProxyType::Sticky(None));
                                    }
                                >
                                    {t8r!("Sticky")}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex gap-4" id="rotation-count-section">
                        
                        {move || {
                            let is_sticky = parameters.with(|p| matches!(p.proxy_type, rust_shared::repository::model::ProxyType::Sticky(_)));
                            if is_sticky {
                                view! {
                        <div class="flex-1 flex flex-col gap-3" id="rotation-section">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Rotation Interval (min)")}
                            </h3>
                            <div class="flex items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px]" id="rotation-input">
                                <input 
                                                type="number" 
                                    placeholder="5" 
                                    class="w-full bg-transparent text-[rgba(255,249,247,0.8)] placeholder:text-[rgba(255,249,247,0.4)] font-semibold text-base leading-[22px] tracking-[-0.02em] outline-none"
                                                prop:value=move || {
                                                    parameters.with(|p| match p.proxy_type {
                                                        rust_shared::repository::model::ProxyType::Sticky(Some(interval)) => interval.to_string(),
                                                        _ => "5".to_string(),
                                                    })
                                                }
                                                on:input=move |ev| {
                                                    let value = event_target_value(&ev);
                                                    if let Ok(num) = value.parse::<u32>() {
                                                        params_context.update_proxy_type.run(rust_shared::repository::model::ProxyType::Sticky(Some(num)));
                                                    }
                                                }
                                />
                            </div>
                        </div>
                                }.into_any()
                            } else {
                                ().into_any()
                            }
                        }}

                        <div class="flex-1 flex flex-col gap-3" id="count-section">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Proxy Count")}
                            </h3>
                            <div class="flex items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px]" id="count-input">
                                <input 
                                    type="number" 
                                    placeholder="10" 
                                    class="w-full bg-transparent text-[rgba(255,249,247,0.8)] placeholder:text-[rgba(255,249,247,0.4)] font-semibold text-base leading-[22px] tracking-[-0.02em] outline-none"
                                    prop:value=move || parameters.with(|p| p.proxy_count.to_string())
                                    on:input=move |ev| {
                                        let value = event_target_value(&ev);
                                        if let Ok(num) = value.parse::<u32>() {
                                            params_context.update_proxy_count.run(num);
                                        }
                                    }
                                />
                            </div>
                        </div>
                    </div>

                    <div class="p-4 bg-[rgba(255,249,247,0.05)] rounded-[14px] flex flex-row gap-6" id="asn-section">
                        <div class="flex flex-col flex-1 gap-3">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Format")}
                            </h3>
                            <Dropdown
                                selected=selected_format.read_only()
                                options={
                                    move || ProxyFormat::iter().collect::<Vec<_>>()
                                }
                                on_change=Callback::new(move |format| {
                                    selected_format.set(format);
                                    params_context.update_format.run(format);
                                })
                                display_fn=format_display_name
                                id="format-dropdown"
                                open_upward=true
                            />
                        </div>
                        <div class="flex flex-col flex-1 gap-3">
                            <div class="flex items-center gap-2" id="anonymity-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="anonymity-title">
                                    {t8r!("Anonimity")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="anonymity-hint-icon"
                                    title={t8s!("With the anon filter enabled, you'll get more clean proxies that aren't blocked anywhere. Also note that enabling this filter will reduce your IP pool.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" stroke="#FFF9F7" stroke-opacity="0.95" stroke-width="1.5" fill="none"/>
                                        <path d="M9 12V9" stroke="#FFF9F7" stroke-opacity="0.95" stroke-width="1.5" stroke-linecap="round"/>
                                        <path d="M9 6H9.01" stroke="#FFF9F7" stroke-opacity="0.95" stroke-width="1.5" stroke-linecap="round"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="selector">
                                <button 
                                    class:selected=move || parameters.with(|p| p.anonymity)
                                    on:click=move |_| {
                                        params_context.update_anonymity.run(true);
                                    }
                                >
                                    {t8r!("On")}
                                </button>
                                <button 
                                    class:selected=move || parameters.with(|p| !p.anonymity)
                                    on:click=move |_| {
                                        params_context.update_anonymity.run(false);
                                    }
                                >
                                    {t8r!("Off")}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="p-4 bg-[rgba(255,249,247,0.05)] rounded-[14px] flex flex-row gap-6" id="asn-section">
                        
                        <div class="flex flex-col gap-3 flex-1" id="include-asn-section">
                            <div class="flex items-center gap-2" id="include-asn-header">
                                <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]" id="include-asn-title">
                                    {t8r!("Include ASN (optional)")}
                                </h3>
                                <div 
                                    class="w-[18px] h-[18px] flex items-center justify-center cursor-help" 
                                    id="include-asn-hint-icon"
                                    title={t8s!("When selecting this option, traffic will be deducted at double the rate.")}
                                >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M13.0909 15.1818V15.9999H4.90906V15.1818H13.0909ZM17.1819 11.0908V6.90906C17.1819 4.64974 15.3503 2.81813 13.0909 2.81812H4.90906C2.64974 2.81813 0.818133 4.64974 0.818115 6.90906V11.0908C0.818115 13.3502 2.64973 15.1817 4.90906 15.1818V15.9999C2.19786 15.9999 0 13.802 0 11.0908V6.90906C1.74982e-05 4.19787 2.19787 2.00002 4.90906 2H13.0909L13.2177 2.00146C15.8703 2.06869 18 4.24023 18 6.90906V11.0908C18 13.7597 15.8703 15.9312 13.2177 15.9984L13.0909 15.9999V15.1818C15.3503 15.1817 17.1819 13.3502 17.1819 11.0908Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M3.39637 12.75L5.75273 9.24491L3.60255 5.87727H5.17346L6.53818 8.17473L7.90291 5.87727H9.41491L7.27455 9.186L9.65055 12.75H8.06982L6.49891 10.266L4.90837 12.75H3.39637Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                        <path d="M11.602 11.67H14.8714V12.75H9.78563V11.7584L11.9554 9.726C12.2238 9.47727 12.4136 9.29727 12.5249 9.186C12.6427 9.07473 12.7802 8.92745 12.9373 8.74418C13.1009 8.55436 13.2122 8.38418 13.2711 8.23364C13.33 8.07655 13.3594 7.91618 13.3594 7.75255C13.3594 7.46454 13.2711 7.242 13.0944 7.08491C12.9242 6.92127 12.6951 6.83945 12.4071 6.83945C12.0798 6.83945 11.8114 6.96054 11.602 7.20273C11.3991 7.43836 11.278 7.80491 11.2387 8.30236L9.96235 8.20418C10.0213 7.386 10.2733 6.774 10.7184 6.36818C11.1634 5.96236 11.7264 5.75945 12.4071 5.75945C13.0682 5.75945 13.6147 5.93291 14.0467 6.27982C14.4787 6.62018 14.6947 7.11109 14.6947 7.75255C14.6947 8.15182 14.5834 8.52818 14.3609 8.88164C14.1449 9.23509 13.762 9.66382 13.2122 10.1678L11.602 11.67Z" fill="#FFF9F7" fill-opacity="0.95"/>
                                    </svg>
                                </div>
                            </div>
                            {move || {
                                parameters.with(|p| {
                                    if p.countries.is_empty() {
                                        view! {
                                            <div class="text-xs text-[rgba(255,249,247,0.4)] italic" id="include-asn-help-text">
                                                {t8r!("Select countries first to enable ASN selection")}
                                            </div>
                                        }.into_any()
                                    } else {
                                        ().into_any()
                                    }
                                })
                            }}
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200" 
                                id="include-asn-input"
                                disabled=move || parameters.with(|p| p.countries.is_empty())
                                on:click=move |_| {
                                    on_include_asn_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="include-asn-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.asn_include.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select ASNs to include...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                p.asn_include.iter().take(3).enumerate().map(|(_index, asn)| {
                                                    let asn_name = asn.clone();
                                                    view! {
                                                        <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                            <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                                {asn_name}
                                                            </span>
                                                        </div>
                                                    }
                                                }).chain({
                                                    if p.asn_include.len() > 3 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", p.asn_include.len() - 3)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="include-asn-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>

                        <div class="flex flex-col gap-3 flex-1" id="exclude-asn-section">
                            <h3 class="font-bold text-base leading-6 text-[rgba(255,249,247,0.8)]">
                                {t8r!("Exclude ASN (optional)")}
                            </h3>
                            {move || {
                                parameters.with(|p| {
                                    if p.countries.is_empty() {
                                        view! {
                                            <div class="text-xs text-[rgba(255,249,247,0.4)] italic" id="exclude-asn-help-text">
                                                {t8r!("Select countries first to enable ASN selection")}
                                            </div>
                                        }.into_any()
                                    } else {
                                        ().into_any()
                                    }
                                })
                            }}
                            <button 
                                class="flex justify-between items-center p-3.5 bg-[rgba(255,249,247,0.05)] rounded-[10px] w-full hover:bg-[rgba(255,249,247,0.08)] transition-colors duration-200" 
                                id="exclude-asn-input"
                                disabled=move || parameters.with(|p| p.countries.is_empty())
                                on:click=move |_| {
                                    on_exclude_asn_select.run(());
                                }
                            >
                                <div class="flex items-center gap-1 flex-1" id="exclude-asn-tags">
                                    {move || {
                                        parameters.with(|p| {
                                            if p.asn_exclude.is_empty() {
                                                view! {
                                                    <span class="font-semibold text-base leading-[22px] text-[rgba(255,249,247,0.4)]">
                                                        {t8r!("Select ASNs to exclude...")}
                                                    </span>
                                                }.into_any()
                                            } else {
                                                p.asn_exclude.iter().take(3).enumerate().map(|(_index, asn)| {
                                                    let asn_name = asn.clone();
                                                    view! {
                                                        <div class="flex justify-center items-center px-2 h-[30px] bg-[rgba(255,249,247,0.05)] rounded-md">
                                                            <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.95)] whitespace-nowrap">
                                                                {asn_name}
                                                            </span>
                                                        </div>
                                                    }
                                                }).chain({
                                                    if p.asn_exclude.len() > 3 {
                                                        Some(view! {
                                                            <div class="flex justify-center items-center px-2 h-[30px] rounded-md">
                                                                <span class="font-semibold text-base leading-[22px] text-center tracking-[-0.02em] text-[rgba(255,249,247,0.4)]">
                                                                    {format!("+{}", p.asn_exclude.len() - 3)}
                                                                </span>
                                                            </div>
                                                        })
                                                    } else {
                                                        None
                                                    }
                                                }).collect::<Vec<_>>().into_any()
                                            }
                                        })
                                    }}
                                </div>
                                
                                <div class="w-[22px] h-[22px] flex items-center justify-center ml-2" id="exclude-asn-expand-icon">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                                        <path d="M7 10L11 6L15 10" stroke="rgba(255,249,247,0.4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>
                            }.into_any()
                        }
                    }}
                </div>
            </Card>
        </div>
    }
}

