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, ProxyFormat, ProxyType, ProxyRegion};
use leptos::task::spawn_local;
use super::proxy_params_context::{use_proxy_params, proxy_region_to_flag, proxy_region_to_display_name};

#[derive(Clone, Debug)]
pub struct ProxySettings {
    pub protocol: String,
    pub server_region: String,
    pub server_region_flag: String,
    pub format: String,
    pub proxy_count: String,
    pub proxy_type: String,
    pub anonymity: String,
}

impl Default for ProxySettings {
    fn default() -> Self {
        Self {
            protocol: t8s!("HTTP/HTTPS").to_string(),
            server_region: t8s!("Auto").to_string(),
            server_region_flag: "🧠".to_string(),
            format: ProxyFormat::default().to_string(),
            proxy_count: "1".to_string(),
            proxy_type: t8s!("Rotating").to_string(),
            anonymity: t8s!("Anonymous").to_string(),
        }
    }
}

#[component]
pub fn DashboardCenter(
    on_parameters_click: Callback<()>,
    on_get_proxy_click: Callback<()>,
) -> impl IntoView {
    let _auth = use_auth();
    let params_context = use_proxy_params();


    view! {
        <Card 
            variant=CardVariant::L2
            max_width="w-full" 
            padding="p-4" 
            class="w-full h-full relative flex flex-col"
            id="dashboard-center-card"
        >
            <div class="flex flex-col gap-4 flex-1 mb-4" id="dashboard-main-container">
                
                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="protocol-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="protocol-title"
                    >
                        {t8s!("PROTOCOL")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                        id="protocol-value"
                    >
                        {move || params_context.parameters.with(|p| p.protocol.to_uppercase())}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="server-region-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="server-region-title"
                    >
                        {t8s!("SERVER REGION")}
                    </div>
                    <div 
                        class="flex items-center gap-1 w-fit h-6 rounded px-2 py-1 transition-colors duration-200"
                        id="server-region-block"
                    >
                        <div class="w-[22px] h-[22px] flex items-center justify-center" id="region-icon">
                            <span class="text-[rgba(255,249,247,0.6)]" id="region-flag">
                                {move || {
                                    params_context.parameters.with(|p| proxy_region_to_flag(&p.server_region))
                                }}
                            </span>
                        </div>
                        <div 
                            class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                            id="region-text"
                        >
                            {move || {
                                params_context.parameters.with(|p| proxy_region_to_display_name(&p.server_region))
                            }}
                        </div>
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="format-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="format-title"
                    >
                        {t8s!("FORMAT")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)] break-all"
                        id="format-value"
                    >
                        {move || params_context.parameters.with(|p| p.format.to_string())}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="proxy-count-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="proxy-count-title"
                    >
                        {t8s!("PROXY COUNT")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                        id="proxy-count-value"
                    >
                        {move || params_context.parameters.with(|p| p.proxy_count.to_string())}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="rotation-interval-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="rotation-interval-title"
                    >
                        {t8s!("ROTATION INTERVAL")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                        id="rotation-interval-value"
                    >
                        {move || {
                            params_context.parameters.with(|p| match p.proxy_type {
                                ProxyType::Rotating => t8s!("N/A").to_string(),
                                ProxyType::Sticky(Some(interval)) => format!("{} {}", interval, t8s!("min")),
                                ProxyType::Sticky(None) => format!("5 {}", t8s!("min")),
                            })
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="type-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="type-title"
                    >
                        {t8s!("TYPE")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                        id="type-value"
                    >
                        {move || {
                            params_context.parameters.with(|p| match p.proxy_type {
                                ProxyType::Rotating => t8s!("Rotating").to_string(),
                                ProxyType::Sticky(_) => t8s!("Sticky").to_string(),
                            })
                        }}
                    </div>
                </div>

                <div class="flex flex-col gap-2 w-full min-h-[50px]" id="anonymity-section">
                    <div 
                        class="font-bold text-xs leading-[18px] tracking-[-0.02em] uppercase text-[rgba(255,249,247,0.4)]"
                        id="anonymity-title"
                    >
                        {t8s!("ANONYMITY")}
                    </div>
                    <div 
                        class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                        id="anonymity-value"
                    >
                        {move || params_context.parameters.with(|p| if p.anonymity { t8s!("Anonymous") } else { t8s!("Transparent") }.to_string())}
                    </div>
                </div>
            </div>

            <div class="mt-auto flex items-center gap-2" id="action-buttons-container">
                 <button 
                     class="flex justify-center items-center px-3 h-[46px] bg-[rgba(255,249,247,0.8)] rounded-[14px] flex-1 min-w-0"
                     id="get-proxy-button"
                     on:click=move |_| {
                         on_get_proxy_click.run(());
                     }
                 >
                     <span 
                         class="font-semibold text-base leading-[22px] tracking-[-0.02em] text-[rgba(17,17,17,0.8)] text-center truncate"
                         id="get-proxy-text"
                     >
                         {t8s!("Get Proxy")}
                     </span>
                 </button>

                        <button 
                            class="flex justify-center items-center px-3 h-[46px] border border-[rgba(255,249,247,0.4)] rounded-[14px] flex-1 min-w-0 gap-2"
                            id="parameters-button"
                            on:click=move |_| {
                                on_parameters_click.run(());
                            }
                        >
                    <span 
                        class="font-semibold text-base leading-[22px] tracking-[-0.02em] text-[rgba(255,249,247,0.4)] text-center truncate"
                        id="parameters-text"
                    >
                        {t8s!("Parameters")}
                    </span>
                    <div class="w-[22px] h-[22px] flex-shrink-0 ml-auto" id="parameters-arrow">
                        <svg 
                            width="22" 
                            height="22" 
                            viewBox="0 0 22 22" 
                            fill="none" 
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-full h-full transform rotate-[90deg]"
                        >
                            <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>

            <button 
                class="absolute right-4 top-4 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 cursor-pointer border-none"
                id="delete-icon-button"
                on:click=move |_| {
                    params_context.reset_to_defaults.run(());
                }
                title={t8s!("Reset to default settings")}
            >
                <svg 
                    width="24" 
                    height="24" 
                    viewBox="0 0 24 24" 
                    fill="none" 
                    xmlns="http://www.w3.org/2000/svg"
                    class="w-[24px] h-[24px]"
                    id="delete-icon"
                >
                    <path 
                        fill-rule="evenodd" 
                        clip-rule="evenodd" 
                        d="M11.9999 7.49805C14.4812 7.49805 16.8362 7.90965 18.9536 8.64795L18.2651 18.2832C18.1155 20.3763 16.3738 21.998 14.2753 21.998H9.72456C7.62605 21.998 5.88391 20.3764 5.73432 18.2832L5.04633 8.64795C7.16365 7.90964 9.51867 7.49805 11.9999 7.49805ZM9.99995 10.248C9.58573 10.248 9.24995 10.5838 9.24995 10.998V16.998C9.24995 17.4123 9.58573 17.748 9.99995 17.748C10.4141 17.748 10.7499 17.4122 10.7499 16.998V10.998C10.7499 10.5838 10.4141 10.2481 9.99995 10.248ZM13.9999 10.248C13.5857 10.248 13.2499 10.5838 13.2499 10.998V16.998C13.2499 17.4123 13.5857 17.748 13.9999 17.748C14.4141 17.748 14.7499 17.4122 14.7499 16.998V10.998C14.7499 10.5838 14.4141 10.2481 13.9999 10.248Z" 
                        fill="#FFF9F7" 
                        fill-opacity="0.4"
                    />
                    <path 
                        d="M11.9999 2C13.5187 2 14.7499 3.23122 14.7499 4.75V4.91553C17.1349 5.20577 19.3631 5.86788 21.3286 6.82568C21.7009 7.00714 21.8557 7.45626 21.6743 7.82861C21.4928 8.20095 21.0437 8.35577 20.6713 8.17432C18.1797 6.9601 15.2042 6.25 11.9999 6.25C8.79571 6.25001 5.82018 6.9601 3.32856 8.17432C2.95622 8.35573 2.50708 8.20095 2.32563 7.82861C2.1442 7.45628 2.29903 7.00715 2.67133 6.82568C4.6368 5.86787 6.86499 5.20578 9.24995 4.91553V4.75C9.24995 3.23124 10.4812 2.00004 11.9999 2Z" 
                        fill="#FFF9F7" 
                        fill-opacity="0.4"
                    />
                </svg>
            </button>
            </Card>
    }
}
