'use client'

import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'

const CommandPalette = dynamic(
  () => import('./CommandPalette').then((modul) => modul.CommandPalette),
  { ssr: false },
)

/**
 * Strg+K.
 *
 * Absichtlich winzig: dieser Teil steckt in jeder Seite, und die Fallakte hat
 * kein Bündel übrig. Die Palette selbst wird erst geholt, wenn jemand sie
 * öffnet — vorher ist sie ein Tastaturereignis und sonst nichts.
 */
export function PaletteTrigger() {
  const [offen, setOffen] = useState(false)

  useEffect(() => {
    const handler = (event: KeyboardEvent) => {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
        event.preventDefault()
        setOffen((vorher) => !vorher)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [])

  if (!offen) return null
  return <CommandPalette onClose={() => setOffen(false)} />
}