'use client'

import { useStyles, cx } from '../../contexts/StylesContext'
import { ProfileSection } from './ProfileSection'
import { EmailsSection } from './EmailsSection'
import { PasswordSection } from './PasswordSection'
import { PasskeysSection } from './PasskeysSection'
import { ConnectionsSection } from './ConnectionsSection'
import { MFASection } from './MFASection'
import { SessionsSection } from './SessionsSection'
import { Button } from './SettingsComponents'

type SettingsSectionType = 'profile' | 'emails' | 'password' | 'passkeys' | 'connections' | 'mfa' | 'sessions'

interface AuthSettingsProps {
    /** Title shown at the top of the settings page */
    title?: string
    /** Called when user clicks sign out */
    onSignOut?: () => void
    /** Which sections to show. Defaults to all. */
    sections?: SettingsSectionType[]
    /** URL to redirect back to after OAuth connect (for connections section) */
    oauthRedirectUrl?: string
}

const DEFAULT_SECTIONS: SettingsSectionType[] = ['profile', 'emails', 'password', 'passkeys', 'connections', 'mfa', 'sessions']

/**
 * AuthSettings renders a complete account settings page.
 *
 * It includes sections for:
 * - Profile (display user info)
 * - Email addresses (manage, verify, set primary)
 * - Password change
 * - Passkeys (add/remove passwordless login)
 * - Connected accounts (OAuth providers)
 * - Two-factor authentication (TOTP, recovery codes)
 * - Active sessions (view/end sessions)
 *
 * @example
 * ```tsx
 * <AuthSettings
 *     onSignOut={() => router.push('/logout')}
 *     sections={['profile', 'password', 'mfa']}  // Only show these sections
 * />
 * ```
 */
export function AuthSettings({
    title = 'Account Settings',
    onSignOut,
    sections = DEFAULT_SECTIONS,
    oauthRedirectUrl,
}: AuthSettingsProps) {
    const styles = useStyles()
    const sectionSet = new Set(sections)

    return (
        <div className={styles.settingsContainer}>
            <h1 className={styles.settingsPageTitle}>{title}</h1>

            {sectionSet.has('profile') && <ProfileSection />}
            {sectionSet.has('emails') && <EmailsSection />}
            {sectionSet.has('password') && <PasswordSection />}
            {sectionSet.has('passkeys') && <PasskeysSection />}
            {sectionSet.has('connections') && <ConnectionsSection redirectUrl={oauthRedirectUrl} />}
            {sectionSet.has('mfa') && <MFASection />}
            {sectionSet.has('sessions') && <SessionsSection />}

            {/* Sign Out */}
            {onSignOut && (
                <section className={styles.settingsCard}>
                    <Button variant="danger" onClick={onSignOut}>
                        Sign Out
                    </Button>
                </section>
            )}
        </div>
    )
}