/**
 * Root app component — routes between LockScreen and MainLayout.
 */

import { Component } from './components/component.js'
import { LockScreen } from './components/LockScreen.js'
import { MainLayout } from './components/MainLayout.js'
import { app } from './lib/stores/app.js'

export class App extends Component {
  _lockScreen = null
  _mainLayout = null

  mount() {
    super.mount()

    // Set meta tags (preserve existing <style> and <script> tags from the build)
    const head = document.head
    // Only remove meta/link tags, keep style/script
    head.querySelectorAll('meta, link').forEach(el => el.remove())

    const charset = document.createElement('meta')
    charset.setAttribute('charset', 'UTF-8')
    head.appendChild(charset)

    const viewport = document.createElement('meta')
    viewport.setAttribute('name', 'viewport')
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0')
    head.appendChild(viewport)

    document.title = 'Password Vault'

    // Subscribe to isUnlocked to swap views
    this.subscribe(app, 'isUnlocked', (unlocked) => this.#swapView(unlocked))

    // Initial render
    this.#swapView(app.isUnlocked)

    return this
  }

  #swapView(unlocked) {
    // Destroy current view
    if (this._lockScreen) { this._lockScreen.destroy(); this._lockScreen = null }
    if (this._mainLayout) { this._mainLayout.destroy(); this._mainLayout = null }

    // Clear container
    if (this.container) this.container.innerHTML = ''

    // Mount new view
    if (unlocked) {
      this._mainLayout = new MainLayout(this.container)
      this._mainLayout.mount()
    } else {
      this._lockScreen = new LockScreen(this.container)
      this._lockScreen.mount()
    }
  }

  destroy() {
    if (this._lockScreen) this._lockScreen.destroy()
    if (this._mainLayout) this._mainLayout.destroy()
    super.destroy()
  }
}