<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h4 class="font-medium">Milestones</h4>
        <UButton 
          size="xs" 
          variant="ghost"
          icon="i-heroicons-plus"
          @click="showAddForm = true"
        >
          Add
        </UButton>
      </div>
    </template>
    
    <div class="space-y-3">
      <div v-if="milestoneStatuses.length === 0" class="text-sm text-gray-500 italic py-2">
        No milestones set. Add key dates to track progress.
      </div>

      <div
        v-for="milestone in milestoneStatuses"
        :key="milestone.id"
        class="flex items-center justify-between p-2 border border-gray-200 rounded"
      >
        <div class="flex items-center gap-2">
          <UIcon
            :name="milestone.willReach ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'"
            :class="milestone.willReach ? 'text-green-500' : 'text-amber-500'"
            class="w-4 h-4"
          />
          <div>
            <div class="text-sm font-medium">{{ milestone.label }}</div>
            <div class="text-xs text-gray-500">
              {{ formatDate(milestone.date) }}
            </div>
          </div>
        </div>
        <UButton
          size="xs"
          variant="ghost"
          color="red"
          icon="i-heroicons-trash"
          @click="removeMilestone(milestone.id)"
        />
      </div>
    </div>

    <!-- Add milestone modal -->
    <UModal v-model="showAddForm">
      <div class="p-4">
        <h3 class="text-lg font-semibold mb-4">Add Milestone</h3>
        <div class="space-y-3">
          <UInput
            v-model="newMilestone.label"
            placeholder="Milestone name (e.g., 'Product launch')"
          />
          <UInput
            v-model="newMilestone.date"
            type="date"
          />
          <div class="flex gap-2">
            <UButton @click="saveMilestone">Save</UButton>
            <UButton variant="ghost" @click="cancelAdd">Cancel</UButton>
          </div>
        </div>
      </div>
    </UModal>
  </UCard>
</template>

<script setup lang="ts">
const { milestoneStatus, addMilestone, removeMilestone } = useCoopBuilder()

const showAddForm = ref(false)
const newMilestone = ref({ label: '', date: '' })

const milestoneStatuses = computed(() => milestoneStatus())

function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
}

function saveMilestone() {
  if (newMilestone.value.label && newMilestone.value.date) {
    addMilestone(newMilestone.value.label, newMilestone.value.date)
    newMilestone.value = { label: '', date: '' }
    showAddForm.value = false
  }
}

function cancelAdd() {
  newMilestone.value = { label: '', date: '' }
  showAddForm.value = false
}
</script>