use leptos::prelude::*;
use crate::components::card::{Card, CardVariant};
use crate::components::prelude::*;
use crate::auth::use_auth;
use rust_shared::repository::model::{Profile, PoolType};
use leptos::task::spawn_local;
use super::proxy_params_context::use_proxy_params;

#[derive(Clone, Debug)]
pub struct ProxyLocationSettings {
    pub selected_countries: Vec<String>,
    pub selected_states: String,
    pub selected_cities: String,
    pub zip_code_selection: String,
    pub include_asn: String,
    pub exclude_asn: String,
}

impl Default for ProxyLocationSettings {
    fn default() -> Self {
        Self {
            selected_countries: vec![],
            selected_states: "".to_string(),
            selected_cities: "".to_string(),
            zip_code_selection: "".to_string(),
            include_asn: "".to_string(),
            exclude_asn: "".to_string(),
        }
    }
}

#[component]
pub fn DashboardRight() -> impl IntoView {
    let _auth = use_auth();
    let params_context = use_proxy_params();

    view! {
        <Card 
            variant=CardVariant::L2
            max_width="w-full" 
            padding="p-0" 
            class="w-full h-full"
            id="dashboard-right-card"
        >
            <div class="p-4 h-full flex flex-col gap-4 overflow-y-auto" id="dashboard-right-main-container">
                
                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="selected-countries-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="selected-countries-title"
                    >
                        {t8s!("SELECTED COUNTRIES")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="selected-countries-value"
                    >
                        {move || {
                            let countries = params_context.parameters.with(|p| p.countries.clone());
                            if countries.is_empty() {
                                t8s!("Countries not selected").to_string()
                            } else {
                                countries.join(", ")
                            }
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="selected-states-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="selected-states-title"
                    >
                        {t8s!("SELECTED STATES")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="selected-states-value"
                    >
                        {move || {
                            let states = params_context.parameters.with(|p| p.states.clone());
                            if states.is_empty() {
                                t8s!("States not selected").to_string()
                            } else {
                                states.join(", ")
                            }
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="selected-cities-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="selected-cities-title"
                    >
                        {t8s!("SELECTED CITIES")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="selected-cities-value"
                    >
                        {move || {
                            let cities = params_context.parameters.with(|p| p.cities.clone());
                            if cities.is_empty() {
                                t8s!("Cities not selected").to_string()
                            } else {
                                cities.join(", ")
                            }
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="zip-code-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="zip-code-title"
                    >
                        {t8s!("ZIP CODE SELECTION")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="zip-code-value"
                    >
                        {move || {
                            let zip_codes = params_context.parameters.with(|p| p.zip_codes.clone());
                            if zip_codes.is_empty() {
                                t8s!("ZIP codes not selected").to_string()
                            } else {
                                zip_codes.join(", ")
                            }
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="include-asn-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="include-asn-title"
                    >
                        {t8s!("INCLUDE ASN")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="include-asn-value"
                    >
                        {move || {
                            let asn_include = params_context.parameters.with(|p| p.asn_include.clone());
                            if asn_include.is_empty() {
                                t8s!("ASN not specified").to_string()
                            } else {
                                asn_include.join(", ")
                            }
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="exclude-asn-section">
                    <div 
                        class="w-full h-[18px] font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="exclude-asn-title"
                    >
                        {t8s!("EXCLUDE ASN")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.6)] break-words"
                        id="exclude-asn-value"
                    >
                        {move || {
                            let asn_exclude = params_context.parameters.with(|p| p.asn_exclude.clone());
                            if asn_exclude.is_empty() {
                                t8s!("ASN not specified").to_string()
                            } else {
                                asn_exclude.join(", ")
                            }
                        }}
                    </div>
                </div>
            </div>
        </Card>
    }
}
