use leptos::prelude::*;
use rustelo_core_lib::i18n::use_unified_i18n;

/// Cookie category management modal — lets users pick which cookies to accept.
#[component]
pub fn CookieManageModal(on_save: Callback<String>, on_close: Callback<()>) -> impl IntoView {
    let i18n = use_unified_i18n();
    let manage_label = i18n.t("cookies-manage");
    let essential_label = i18n.t("cookies-essential");
    let analytics_label = i18n.t("cookies-analytics");
    let marketing_label = i18n.t("cookies-marketing");
    let save_label = i18n.t("cookies-save-prefs");
    let cancel_label = i18n.t("cookies-cancel");

    let analytics = RwSignal::new(false);
    let marketing = RwSignal::new(false);

    let save = move |_| {
        let prefs = serde_json::json!({
            "essential": true,
            "analytics": analytics.get(),
            "marketing": marketing.get(),
        })
        .to_string();
        on_save.run(prefs);
    };

    view! {
        // z-[110] — above the cookie banner overlay (z-[90]) and banner panel (z-[100])
        <div class="fixed inset-0 z-[110] bg-black opacity-75 flex items-center justify-center p-4">
            <div class="bg-base-100 rounded-xl p-6 w-full max-w-sm shadow-xl">
                <h3 class="text-lg font-semibold mb-4">{manage_label}</h3>

                <div class="flex items-center justify-between py-3 border-b border-base-200">
                    <span>{essential_label}</span>
                    <input
                        type="checkbox"
                        id="cookie-essential"
                        name="cookie_essential"
                        class="toggle toggle-sm"
                        checked=true
                        disabled=true
                    />
                </div>

                <div class="flex items-center justify-between py-3 border-b border-base-200">
                    <span>{analytics_label}</span>
                    <input
                        type="checkbox"
                        id="cookie-analytics"
                        name="cookie_analytics"
                        class="toggle toggle-sm"
                        prop:checked=analytics
                        on:change=move |ev| analytics.set(event_target_checked(&ev))
                    />
                </div>

                <div class="flex items-center justify-between py-3">
                    <span>{marketing_label}</span>
                    <input
                        type="checkbox"
                        id="cookie-marketing"
                        name="cookie_marketing"
                        class="toggle toggle-sm"
                        prop:checked=marketing
                        on:change=move |ev| marketing.set(event_target_checked(&ev))
                    />
                </div>

                <div class="flex gap-2 mt-6">
                    <button
                        class="btn btn-ghost flex-1"
                        on:click=move |_| on_close.run(())
                    >
                        {cancel_label}
                    </button>
                    <button class="btn btn-primary flex-1" on:click=save>
                        {save_label}
                    </button>
                </div>
            </div>
        </div>
    }
}
