import { router } from '../router.js'
import { i18n } from '../i18n.js'
import { auth } from '../services/auth.js'
import './app-header.js'
import './app-footer.js'
import './auth-modal.js'
import './pages/page-home.js'
import './pages/page-listing.js'
import './pages/page-create.js'
import './pages/page-favorites.js'
import './pages/page-my-listings.js'
import './pages/page-messages.js'
import './pages/page-settings.js'
import './pages/page-notifications.js'
import './pages/page-not-found.js'
import './pages/page-privacy.js'
import './pages/page-terms.js'
import './pages/page-about.js'
import './pages/page-contact.js'

class AppShell extends HTMLElement {
    constructor() {
        super()
        this.main = null
    }

    connectedCallback() {
        this.render()
        this.setupRouter()
        
        i18n.subscribe(() => {
            this.querySelector('app-header').updateTranslations()
            this.querySelector('app-footer').updateTranslations()
        })
    }

    render() {
        this.innerHTML = /* html */`
            <app-header></app-header>
            <main class="container" id="router-outlet"></main>
            <app-footer></app-footer>
            <auth-modal hidden></auth-modal>
        `
        
        this.main = this.querySelector('#router-outlet')
    }

    setupRouter() {
        router.setOutlet(this.main)
        
        router
            .register('/', 'page-home')
            .register('/search', 'page-home') // Redirect search to home
            .register('/listing/:id', 'page-listing')
            .register('/create', 'page-create')
            .register('/edit/:id', 'page-create')
            .register('/favorites', 'page-favorites')
            .register('/my-listings', 'page-my-listings')
            .register('/messages', 'page-messages')
            .register('/settings', 'page-settings')
            .register('/notifications', 'page-notifications')
            .register('/privacy', 'page-privacy')
            .register('/terms', 'page-terms')
            .register('/about', 'page-about')
            .register('/contact', 'page-contact')
        
        router.handleRouteChange()
    }
}

customElements.define('app-shell', AppShell)
