<script setup lang="ts">
interface Props {
  task: any // TODO: Type properly
}

const props = defineProps<Props>()

const formatDate = (d: string) => d
  ? new Date(d).toLocaleDateString('es-PA', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
  : '—'
</script>

<template>
  <div class="space-y-4 text-sm">
    <!-- Basic Info -->
    <div class="grid grid-cols-2 gap-x-4 gap-y-2">
      <div class="text-gray-500">Task ID</div>
      <div class="font-mono text-xs text-right">{{ task.id }}</div>
      
      <div class="text-gray-500">Application ID</div>
      <div class="font-mono text-xs text-right">{{ task.application_id }}</div>
      
      <div class="text-gray-500">Provider ID</div>
      <div class="font-mono text-xs text-right">{{ task.task_info?.provider_id }}</div>
      
      <div v-if="task.task_info?.provider_name" class="text-gray-500">Provider</div>
      <div v-if="task.task_info?.provider_name" class="text-right">{{ task.task_info.provider_name }}</div>
      
      <div class="text-gray-500">Org</div>
      <div class="font-mono text-xs text-right">{{ task.org_id }}</div>
      
      <div class="text-gray-500">Created</div>
      <div class="text-right">{{ formatDate(task.created_at) }}</div>
      
      <div class="text-gray-500">Updated</div>
      <div class="text-right">{{ formatDate(task.updated_at) }}</div>
      
      <div class="text-gray-500">Policy Type</div>
      <div class="text-right uppercase text-xs">{{ task.task_info?.policy_type || '—' }}</div>
    </div>
  </div>
</template>
