---
import { Button } from '@/components/ui/button'
import { Icon } from 'astro-icon/components'
---

<Button
  id="theme-toggle"
  variant="ghost"
  size="icon"
  title="Toggle theme"
  className="-my-2 -me-2 size-8"
>
  <Icon name="lucide:sun" class="text-muted-foreground size-4 dark:hidden" />
  <Icon
    name="lucide:moon"
    class="text-muted-foreground absolute hidden size-4 dark:block"
  />
  <span class="sr-only">Toggle theme</span>
</Button>

<script is:inline data-astro-rerun>
  ;(() => {
    const theme = (() => {
      const stored = localStorage?.getItem('theme') ?? ''
      if (['dark', 'light'].includes(stored)) return stored
      return window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark'
        : 'light'
    })()

    document.documentElement.setAttribute('data-theme', theme)
    window.localStorage.setItem('theme', theme)
  })()
</script>

<script>
  function handleToggleClick() {
    const element = document.documentElement
    const currentTheme = element.getAttribute('data-theme')
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark'

    element.classList.add('[&_*]:transition-none')
    element.setAttribute('data-theme', newTheme)
    window.getComputedStyle(element).getPropertyValue('opacity')

    requestAnimationFrame(() => {
      element.classList.remove('[&_*]:transition-none')
    })

    localStorage.setItem('theme', newTheme)
  }

  function initThemeToggle() {
    document
      .getElementById('theme-toggle')
      ?.addEventListener('click', handleToggleClick)
  }

  initThemeToggle()

  document.addEventListener('astro:after-swap', () => {
    const storedTheme = localStorage.getItem('theme') || 'light'
    const element = document.documentElement

    element.classList.add('[&_*]:transition-none')
    window.getComputedStyle(element).getPropertyValue('opacity')
    element.setAttribute('data-theme', storedTheme)

    requestAnimationFrame(() => {
      element.classList.remove('[&_*]:transition-none')
    })

    initThemeToggle()
  })
</script>