<template>
  <div
    class="flex items-center gap-3 px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-indigo-300 hover:shadow-sm transition-all cursor-pointer"
    @click="handleNavigate"
  >
    <!-- Folder icon -->
    <div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
      <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
      </svg>
    </div>

    <!-- Name and doc count -->
    <div class="flex-1 min-w-0">
      <!-- Rename mode: inline input -->
      <div v-if="renaming" @click.stop>
        <input
          ref="renameInputRef"
          v-model="renameValue"
          type="text"
          class="border border-gray-300 rounded-lg px-2 py-1 text-sm w-full focus:outline-none focus:ring-2 focus:ring-indigo-500"
          @keydown.enter="submitRename"
          @keydown.escape="cancelRename"
          @click.stop
        />
        <p v-if="renameError" class="text-red-500 text-xs mt-1">{{ renameError }}</p>
      </div>
      <!-- Normal display mode -->
      <template v-else>
        <p class="font-medium text-gray-900 text-sm truncate">{{ folder.name }}</p>
        <p class="text-xs text-gray-400 mt-0.5">{{ folder.doc_count ?? 0 }} document{{ (folder.doc_count ?? 0) !== 1 ? 's' : '' }}</p>
      </template>
    </div>

    <!-- Three-dot menu -->
    <div class="relative shrink-0" @click.stop>
      <button
        @click="toggleMenu"
        aria-label="Folder actions"
        class="p-1.5 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors min-h-[36px] min-w-[36px] flex items-center justify-center"
      >
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z" />
        </svg>
      </button>

      <!-- Dropdown menu -->
      <div
        v-if="menuOpen"
        class="absolute right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-md py-1 min-w-[140px] z-10"
      >
        <button
          @click="startRename"
          class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
        >
          Rename
        </button>
        <button
          @click="handleDelete"
          class="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
        >
          Delete folder
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  folder: {
    type: Object,
    required: true,
  },
  onNavigate: {
    type: Function,
    default: null,
  },
  onRename: {
    type: Function,
    default: null,
  },
  onDelete: {
    type: Function,
    default: null,
  },
})

const menuOpen = ref(false)
const renaming = ref(false)
const renameValue = ref('')
const renameError = ref('')
const renameInputRef = ref(null)

function handleNavigate() {
  if (renaming.value) return
  if (props.onNavigate) props.onNavigate(props.folder.id)
}

function toggleMenu() {
  menuOpen.value = !menuOpen.value
}

function closeMenu() {
  menuOpen.value = false
}

function startRename() {
  closeMenu()
  renameValue.value = props.folder.name
  renameError.value = ''
  renaming.value = true
  nextTick(() => {
    renameInputRef.value?.focus()
    renameInputRef.value?.select()
  })
}

function cancelRename() {
  renaming.value = false
  renameError.value = ''
}

async function submitRename() {
  const trimmed = renameValue.value.trim()
  if (!trimmed) {
    renameError.value = 'Folder name cannot be empty.'
    return
  }
  try {
    if (props.onRename) await props.onRename(props.folder.id, trimmed)
    renaming.value = false
    renameError.value = ''
  } catch (e) {
    renameError.value = e.message || 'Failed to rename folder.'
  }
}

function handleDelete() {
  closeMenu()
  if (props.onDelete) props.onDelete(props.folder)
}

// Close menu on outside click
function handleOutsideClick(e) {
  if (!e.target.closest('.relative')) {
    closeMenu()
  }
}

onMounted(() => {
  document.addEventListener('click', handleOutsideClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleOutsideClick)
})
</script>
