use leptos::prelude::*;

#[derive(Clone, Copy, Debug, PartialEq)]
enum SecurityTab {
    MfaDevices,
    ApiTokens,
    AuditLogs,
}

#[component]
pub fn SecuritySettings(
    #[prop(into)] access_token: Signal<String>,
) -> impl IntoView {
    let (active_tab, set_active_tab) = signal(SecurityTab::MfaDevices);

    view! {
        <div class="container mx-auto px-4 py-8">
            // Page header
            <div class="mb-8">
                <h1 class="text-4xl font-bold mb-2">"Security Settings"</h1>
                <p class="text-base-content/70 text-lg">
                    "Manage your account security, authentication methods, and API access"
                </p>
            </div>

            // Tabs navigation
            <div class="tabs tabs-boxed bg-base-200 mb-8 p-1">
                <a
                    class=move || if active_tab.get() == SecurityTab::MfaDevices {
                        "tab tab-active"
                    } else {
                        "tab"
                    }
                    on:click=move |_| set_active_tab.set(SecurityTab::MfaDevices)
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    "MFA Devices"
                </a>
                <a
                    class=move || if active_tab.get() == SecurityTab::ApiTokens {
                        "tab tab-active"
                    } else {
                        "tab"
                    }
                    on:click=move |_| set_active_tab.set(SecurityTab::ApiTokens)
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                    </svg>
                    "API Tokens"
                </a>
                <a
                    class=move || if active_tab.get() == SecurityTab::AuditLogs {
                        "tab tab-active"
                    } else {
                        "tab"
                    }
                    on:click=move |_| set_active_tab.set(SecurityTab::AuditLogs)
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    "Audit Logs"
                </a>
            </div>

            // Tab content
            <div class="py-4">
                <Show
                    when=move || active_tab.get() == SecurityTab::MfaDevices
                    fallback=|| view! { <div></div> }
                >
                    <crate::components::security::mfa_devices::MfaDevices
                        access_token=access_token
                    />
                </Show>

                <Show
                    when=move || active_tab.get() == SecurityTab::ApiTokens
                    fallback=|| view! { <div></div> }
                >
                    <crate::components::security::api_tokens::ApiTokens
                        access_token=access_token
                    />
                </Show>

                <Show
                    when=move || active_tab.get() == SecurityTab::AuditLogs
                    fallback=|| view! { <div></div> }
                >
                    <crate::components::security::audit_logs::AuditLogs
                        access_token=access_token
                    />
                </Show>
            </div>
        </div>
    }
}
