<script lang="ts">
  // NameDialog: a tiny centered modal that prompts for the mascot's name,
  // opened either at hatch time (mode='hatch') or via the Rename menu
  // action (mode='rename'). Renders at z-[60] so it sits above the
  // mascot layer and the radial menu. Self-contained — doesn't use the
  // bits-ui Dialog to keep the dependency surface small and to control
  // z-index precisely relative to the desktop's own layers.

  import { onMount, untrack } from 'svelte'

  let {
    mode = 'hatch',
    initial = '',
    onSubmit,
    onCancel
  }: {
    mode?: 'hatch' | 'rename'
    initial?: string
    onSubmit: (name: string) => void
    onCancel: () => void
  } = $props()

  // Seed the input once from the prop — `untrack` because we want the
  // INITIAL value, not a reactive binding (typing into the input updates
  // `value`, not `initial`).
  let value = $state(untrack(() => initial))

  onMount(() => {
    // Autofocus the input on mount.
    const el = document.getElementById('mascot-name-input') as HTMLInputElement | null
    el?.focus()
    el?.select()
  })

  function submit(e: Event) {
    e.preventDefault()
    const trimmed = value.trim()
    if (trimmed) onSubmit(trimmed)
  }

  function onWindowKeydown(e: KeyboardEvent) {
    if (e.key === 'Escape') {
      e.preventDefault()
      onCancel()
    }
  }

  const title = $derived(mode === 'hatch' ? 'Your chick hatched!' : 'Rename your chicken')
  const placeholder = $derived(mode === 'hatch' ? 'Name your chick…' : 'New name…')
</script>

<svelte:window onkeydown={onWindowKeydown} />

<!-- Overlay: clicks outside the card cancel. Escape is handled via the window keydown above. -->
<div
  class="fixed inset-0 z-[60] flex items-center justify-center bg-foreground/30 backdrop-blur-[1px]"
  role="presentation"
  onclick={(e) => {
    if (e.currentTarget === e.target) onCancel()
  }}
>
  <form
    class="w-80 rounded-xl border bg-popover p-5 text-popover-foreground shadow-xl ring-1 ring-foreground/10"
    onsubmit={submit}
  >
    <h2 class="mb-1 text-base font-semibold">{title}</h2>
    <p class="mb-3 text-xs text-popover-foreground/70">
      {mode === 'hatch'
        ? 'Give it a name. It will follow your homelab activity from here on.'
        : 'Pick a new name.'}
    </p>
    <input
      id="mascot-name-input"
      type="text"
      bind:value
      {placeholder}
      maxlength="24"
      class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
    />
    <div class="mt-4 flex justify-end gap-2">
      {#if mode === 'rename'}
        <button
          type="button"
          class="rounded-md px-3 py-1.5 text-sm text-popover-foreground/80 hover:bg-accent"
          onclick={onCancel}
        >
          Cancel
        </button>
      {/if}
      <button
        type="submit"
        class="rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
      >
        {mode === 'hatch' ? 'Hatch!' : 'Save'}
      </button>
    </div>
  </form>
</div>
