<script setup lang="ts">
import { watch, ref, computed } from 'vue'
import { useFocusTrap } from '../utils/focusTrap'
import type { TimeEntry } from '../stores/entries'

const props = defineProps<{
  show: boolean
  entry: TimeEntry | null
}>()
const emit = defineEmits<{
  close: []
  split: [payload: { splitSeconds: number; descriptionB: string }]
}>()

const { activate, deactivate } = useFocusTrap()
const dialogRef = ref<HTMLElement | null>(null)

const splitSeconds = ref(0)
const descriptionB = ref('')

const minSplit = 60
const maxSplit = computed(() => {
  if (!props.entry) return 60
  return props.entry.duration - 60
})

const durationA = computed(() => splitSeconds.value)
const durationB = computed(() => {
  if (!props.entry) return 0
  return props.entry.duration - splitSeconds.value
})

function formatDuration(sec: number): string {
  const h = Math.floor(sec / 3600)
  const m = Math.floor((sec % 3600) / 60)
  return h > 0 ? `${h}h ${m}m` : `${m}m`
}

watch(() => props.show, (val) => {
  if (val && props.entry) {
    splitSeconds.value = Math.floor(props.entry.duration / 2 / 60) * 60
    descriptionB.value = props.entry.description || ''
    setTimeout(() => {
      if (dialogRef.value) activate(dialogRef.value, { onDeactivate: () => emit('close') })
    }, 50)
  } else {
    deactivate()
  }
})

function confirm() {
  emit('split', { splitSeconds: splitSeconds.value, descriptionB: descriptionB.value })
}
</script>

<template>
  <Transition name="modal">
  <div
    v-if="show && entry"
    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
    @click.self="$emit('close')"
  >
    <div
      ref="dialogRef"
      role="dialog"
      aria-modal="true"
      aria-labelledby="split-title"
      class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6"
    >
      <h2 id="split-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Split Entry</h2>

      <p class="text-[0.75rem] text-text-secondary mb-4">
        Total duration: <span class="font-medium text-text-primary">{{ formatDuration(entry.duration) }}</span>
      </p>

      <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Split point</label>
      <input
        type="range"
        v-model.number="splitSeconds"
        :min="minSplit"
        :max="maxSplit"
        :step="60"
        class="w-full h-2 bg-bg-elevated rounded-lg appearance-none cursor-pointer accent-accent mb-4"
        :aria-label="'Split at ' + formatDuration(splitSeconds)"
      />

      <div class="grid grid-cols-2 gap-3 mb-4">
        <div class="p-3 bg-bg-elevated rounded-lg">
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Entry A</p>
          <p class="text-[0.9375rem] font-medium text-text-primary font-[family-name:var(--font-timer)]">{{ formatDuration(durationA) }}</p>
        </div>
        <div class="p-3 bg-bg-elevated rounded-lg">
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Entry B</p>
          <p class="text-[0.9375rem] font-medium text-text-primary font-[family-name:var(--font-timer)]">{{ formatDuration(durationB) }}</p>
        </div>
      </div>

      <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Description for Entry B</label>
      <input
        v-model="descriptionB"
        type="text"
        class="w-full bg-bg-base border border-border-subtle rounded-lg px-3 py-2 text-[0.8125rem] text-text-primary placeholder-text-tertiary outline-none focus:border-accent transition-colors duration-150 mb-5"
        placeholder="Description..."
      />

      <div class="flex justify-end gap-3">
        <button
          @click="$emit('close')"
          class="px-4 py-2 text-[0.8125rem] border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
        >
          Cancel
        </button>
        <button
          @click="confirm"
          class="px-4 py-2 text-[0.8125rem] bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
        >
          Split
        </button>
      </div>
    </div>
  </div>
  </Transition>
</template>
