<script setup lang="ts">
import { ref, computed, watch, nextTick, onUnmounted } from 'vue'
import { useFocusTrap } from '../utils/focusTrap'
import { useAnnouncer } from '../composables/useAnnouncer'
import AppSelect from './AppSelect.vue'
import { useProjectsStore } from '../stores/projects'
import { X } from 'lucide-vue-next'

const props = defineProps<{
  show: boolean
  elapsedSeconds: number
  mode: 'no-project' | 'long-timer'
}>()

const emit = defineEmits<{
  save: [projectId: number, description: string]
  discard: []
  cancel: []
}>()

const projectsStore = useProjectsStore()
const { activate: activateTrap, deactivate: deactivateTrap } = useFocusTrap()
const { announce } = useAnnouncer()
const dialogRef = ref<HTMLElement | null>(null)
const selectedProjectId = ref<number | null>(null)
const description = ref('')

const formattedDuration = computed(() => {
  const h = Math.floor(props.elapsedSeconds / 3600)
  const m = Math.floor((props.elapsedSeconds % 3600) / 60)
  const parts: string[] = []
  if (h > 0) parts.push(`${h} hour${h !== 1 ? 's' : ''}`)
  if (m > 0) parts.push(`${m} minute${m !== 1 ? 's' : ''}`)
  return parts.join(' and ') || 'less than a minute'
})

const spokenDuration = computed(() => formattedDuration.value)

watch(() => props.show, async (val) => {
  if (val) {
    selectedProjectId.value = null
    description.value = ''
    await nextTick()
    if (dialogRef.value) {
      activateTrap(dialogRef.value, { onDeactivate: () => emit('cancel') })
    }
    if (props.mode === 'no-project') {
      announce(`Timer stopped. Select a project to save ${spokenDuration.value} of tracked time.`)
    } else {
      announce(`Timer has been running for ${spokenDuration.value}. Stop and save?`)
    }
  } else {
    deactivateTrap()
  }
})

onUnmounted(() => deactivateTrap())

function handleSave() {
  if (!selectedProjectId.value) return
  emit('save', selectedProjectId.value, description.value)
}
</script>

<template>
  <Teleport to="#app">
    <Transition name="modal">
      <div
        v-if="show"
        class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
        @click.self="$emit('cancel')"
      >
        <div
          ref="dialogRef"
          role="alertdialog"
          aria-modal="true"
          aria-labelledby="timer-save-title"
          aria-describedby="timer-save-desc"
          class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6"
        >
          <div class="flex items-center justify-between mb-4">
            <h2 id="timer-save-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary">
              {{ mode === 'no-project' ? 'Save Entry' : 'Long Timer' }}
            </h2>
            <button
              @click="$emit('cancel')"
              class="p-1 text-text-tertiary hover:text-text-primary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
              aria-label="Close"
              v-tooltip="'Close'"
            >
              <X class="w-4 h-4" aria-hidden="true" />
            </button>
          </div>

          <p id="timer-save-desc" class="text-[0.8125rem] text-text-secondary mb-4">
            <template v-if="mode === 'no-project'">
              No project was selected. Choose a project to save your tracked time.
            </template>
            <template v-else>
              The timer has been running for a long time. Would you like to stop and save?
            </template>
          </p>

          <div class="mb-4 px-3 py-2 bg-bg-inset rounded-lg">
            <span class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em]">Duration</span>
            <p class="text-[1.25rem] font-[family-name:var(--font-timer)] text-accent-text font-medium" :aria-label="spokenDuration">
              {{ formattedDuration }}
            </p>
          </div>

          <div v-if="mode === 'no-project'" class="space-y-3 mb-6">
            <div>
              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project *</label>
              <AppSelect
                v-model="selectedProjectId"
                :options="projectsStore.projects"
                label-key="name"
                value-key="id"
                placeholder="Select project"
              />
            </div>
            <div>
              <label for="timer-save-desc-input" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Description</label>
              <input
                id="timer-save-desc-input"
                v-model="description"
                type="text"
                class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                placeholder="What did you work on?"
              />
            </div>
          </div>

          <div class="flex justify-end gap-2">
            <button
              @click="$emit('discard')"
              class="px-4 py-2 text-[0.8125rem] text-text-secondary border border-border-subtle rounded-lg hover:bg-bg-elevated transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
            >
              Discard
            </button>
            <button
              v-if="mode === 'long-timer'"
              @click="$emit('cancel')"
              class="px-4 py-2 text-[0.8125rem] text-text-secondary border border-border-subtle rounded-lg hover:bg-bg-elevated transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
            >
              Keep Running
            </button>
            <button
              @click="handleSave"
              :disabled="mode === 'no-project' && !selectedProjectId"
              class="px-4 py-2 text-[0.8125rem] bg-accent text-bg-base rounded-lg hover:bg-accent-hover transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
            >
              {{ mode === 'long-timer' ? 'Stop & Save' : 'Save' }}
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>
