//! Modal components with WCAG 2.2 AA accessibility.

use leptos::prelude::*;

/// Confirmation modal for joining a realm.
#[component]
pub fn JoinRealmModal(
    #[prop(into)] open: Signal<bool>,
    realm_name: String,
    realm_slug: String,
    #[prop(into)] pending: Signal<bool>,
    on_confirm: Callback<()>,
    on_cancel: Callback<()>,
) -> impl IntoView {
    let on_cancel_backdrop = on_cancel.clone();
    let on_cancel_close = on_cancel.clone();
    let on_cancel_button = on_cancel.clone();

    let (name_sig, _) = signal(realm_name);
    let (slug_sig, _) = signal(realm_slug);

    view! {
        <Show when=move || open.get()>
            <div
                class="fixed inset-0 z-50 flex items-center justify-center"
                role="dialog"
                aria-modal="true"
                aria-labelledby="join-modal-title"
            >
                <div
                    class="absolute inset-0 bg-black/70 backdrop-blur-sm"
                    on:click=move |_| on_cancel_backdrop.run(())
                    aria-hidden="true"
                />

                <div class="relative bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 border border-gray-700">
                    <button
                        type="button"
                        class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
                        on:click=move |_| on_cancel_close.run(())
                        aria-label="Close dialog"
                    >
                        <svg
                            class="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>

                    <div class="text-center">
                        <div class="mx-auto w-16 h-16 rounded-full bg-blue-600/20 flex items-center justify-center mb-4">
                            <img
                                src="/icons/castle.svg"
                                alt=""
                                class="w-8 h-8"
                                aria-hidden="true"
                            />
                        </div>

                        <h3 id="join-modal-title" class="text-xl font-bold text-white mb-2">
                            "Join " {move || name_sig.get()} "?"
                        </h3>

                        <p class="text-gray-400 mb-6">
                            "You're not a member of "
                            <span class="text-blue-400 font-medium">{move || slug_sig.get()}</span>
                            " yet. Would you like to join this realm?"
                        </p>

                        <div class="flex flex-col sm:flex-row gap-3 justify-center">
                            <button
                                type="button"
                                class="btn-secondary px-6 py-2"
                                on:click=move |_| on_cancel_button.run(())
                                disabled=move || pending.get()
                            >
                                "Cancel"
                            </button>
                            <button
                                type="button"
                                class="btn-primary px-6 py-2"
                                on:click=move |_| on_confirm.run(())
                                disabled=move || pending.get()
                            >
                                {move || if pending.get() { "Joining..." } else { "Join Realm" }}
                            </button>
                        </div>

                        <p class="text-sm text-gray-500 mt-4">
                            "You can leave a realm at any time from your profile settings."
                        </p>
                    </div>
                </div>
            </div>
        </Show>
    }
}

/// Confirmation modal for general actions.
#[component]
pub fn ConfirmModal(
    #[prop(into)] open: Signal<bool>,
    title: &'static str,
    message: String,
    #[prop(default = "Confirm")] confirm_text: &'static str,
    #[prop(default = "Cancel")] cancel_text: &'static str,
    #[prop(default = false)] destructive: bool,
    #[prop(into)] pending: Signal<bool>,
    on_confirm: Callback<()>,
    on_cancel: Callback<()>,
) -> impl IntoView {
    let on_cancel_backdrop = on_cancel.clone();
    let on_cancel_close = on_cancel.clone();
    let on_cancel_button = on_cancel.clone();

    let (message_sig, _) = signal(message);

    let confirm_class = if destructive {
        "bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50"
    } else {
        "btn-primary px-6 py-2"
    };

    view! {
        <Show when=move || open.get()>
            <div
                class="fixed inset-0 z-50 flex items-center justify-center"
                role="dialog"
                aria-modal="true"
                aria-labelledby="confirm-modal-title"
            >
                <div
                    class="absolute inset-0 bg-black/70 backdrop-blur-sm"
                    on:click=move |_| on_cancel_backdrop.run(())
                    aria-hidden="true"
                />

                <div class="relative bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 border border-gray-700">
                    <button
                        type="button"
                        class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
                        on:click=move |_| on_cancel_close.run(())
                        aria-label="Close dialog"
                    >
                        <svg
                            class="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>

                    <div class="text-center">
                        <h3 id="confirm-modal-title" class="text-xl font-bold text-white mb-4">
                            {title}
                        </h3>

                        <p class="text-gray-400 mb-6">{move || message_sig.get()}</p>

                        <div class="flex flex-col sm:flex-row gap-3 justify-center">
                            <button
                                type="button"
                                class="btn-secondary px-6 py-2"
                                on:click=move |_| on_cancel_button.run(())
                                disabled=move || pending.get()
                            >
                                {cancel_text}
                            </button>
                            <button
                                type="button"
                                class=confirm_class
                                on:click=move |_| on_confirm.run(())
                                disabled=move || pending.get()
                            >
                                {move || if pending.get() { "Please wait..." } else { confirm_text }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </Show>
    }
}
