<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useWorkItemsStore, type EnrichedUserStory } from '@/stores/workitems'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { AlertTriangle, Calendar, Clock, ListChecks } from 'lucide-vue-next'

const { t } = useI18n()
const workItems = useWorkItemsStore()

const today = new Date()
today.setHours(0, 0, 0, 0)

function daysUntil(dateStr: string | undefined): number | null {
  if (!dateStr) return null
  const d = new Date(dateStr)
  d.setHours(0, 0, 0, 0)
  return Math.ceil((d.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
}

function isOverdue(dateStr: string | undefined): boolean {
  const d = daysUntil(dateStr)
  return d !== null && d < 0
}

function isToday(dateStr: string | undefined): boolean {
  const d = daysUntil(dateStr)
  return d === 0
}

function isThisWeek(dateStr: string | undefined): boolean {
  const d = daysUntil(dateStr)
  return d !== null && d > 0 && d <= 7
}

function isNextWeek(dateStr: string | undefined): boolean {
  const d = daysUntil(dateStr)
  return d !== null && d > 7 && d <= 14
}

function isBlocked(hu: EnrichedUserStory): boolean {
  const s = String(hu.status ?? '').toLowerCase()
  return ['blocked', 'bloqueado'].includes(s)
}

function isInProgress(hu: EnrichedUserStory): boolean {
  const s = String(hu.status ?? '').toLowerCase()
  return ['in_progress', 'doing', 'wip', 'active', 'in progress', 'en progreso', 'true', '2'].includes(s)
}

function isDone(hu: EnrichedUserStory): boolean {
  const s = String(hu.status ?? '').toLowerCase()
  return ['done', 'completed', 'closed', 'finalizado', '5', '6', '7', 'qa-client', 'ready to deploy'].includes(s)
}

// Agrupar HUs
const overdueHUs = computed(() =>
  workItems.userStories.filter(hu => hu.end_date && isOverdue(hu.end_date))
)

const todayHUs = computed(() =>
  workItems.userStories.filter(hu => hu.end_date && isToday(hu.end_date))
)

const thisWeekHUs = computed(() =>
  workItems.userStories.filter(hu => hu.end_date && isThisWeek(hu.end_date))
)

const nextWeekHUs = computed(() =>
  workItems.userStories.filter(hu => hu.end_date && isNextWeek(hu.end_date))
)

const blockedHUs = computed(() =>
  workItems.userStories.filter(hu => isBlocked(hu))
)

const inProgressHUs = computed(() =>
  workItems.userStories.filter(hu => isInProgress(hu))
)

function formatDate(dateStr: string | undefined): string {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' })
}

function priorityVariant(p: unknown) {
  const s = String(p ?? '').toLowerCase().trim()
  if (['alta', 'high', 'critical', 'urgente', '1'].includes(s)) return 'destructive'
  if (['media', 'medium', 'normal', '2'].includes(s)) return 'default'
  if (['baja', 'low', '3'].includes(s)) return 'secondary'
  return 'outline'
}

const totalHUs = computed(() => workItems.userStories.length)
const doneHUs = computed(() =>
  workItems.userStories.filter(hu => isDone(hu)).length
)
</script>

<template>
  <div class="space-y-4">
    <!-- Summary cards -->
    <div class="grid gap-3 @xl:grid-cols-4">
      <Card class="bg-gradient-to-t from-primary/5 to-card shadow-xs">
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-xs font-medium">{{ t('dashboard.hus') }}</CardTitle>
          <ListChecks class="size-3.5 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-xl font-bold">{{ totalHUs }}</div>
          <p class="text-[10px] text-muted-foreground">{{ doneHUs }} completadas ({{ totalHUs > 0 ? Math.round(doneHUs / totalHUs * 100) : 0 }}%)</p>
        </CardContent>
      </Card>
      <Card class="bg-gradient-to-t from-amber-500/5 to-card shadow-xs">
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-xs font-medium">En progreso</CardTitle>
          <Clock class="size-3.5 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div class="text-xl font-bold">{{ inProgressHUs.length }}</div>
          <p class="text-[10px] text-muted-foreground">activas</p>
        </CardContent>
      </Card>
      <Card class="bg-gradient-to-t from-red-500/5 to-card shadow-xs">
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-xs font-medium">Vencidas</CardTitle>
          <AlertTriangle class="size-3.5 text-red-500" />
        </CardHeader>
        <CardContent>
          <div class="text-xl font-bold text-red-500">{{ overdueHUs.length }}</div>
          <p class="text-[10px] text-muted-foreground">requieren atención</p>
        </CardContent>
      </Card>
      <Card class="bg-gradient-to-t from-purple-500/5 to-card shadow-xs">
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-xs font-medium">Bloqueadas</CardTitle>
          <AlertTriangle class="size-3.5 text-purple-500" />
        </CardHeader>
        <CardContent>
          <div class="text-xl font-bold text-purple-500">{{ blockedHUs.length }}</div>
          <p class="text-[10px] text-muted-foreground">con impedimentos</p>
        </CardContent>
      </Card>
    </div>

    <!-- Overdue -->
    <Card v-if="overdueHUs.length > 0" class="border-l-3 border-l-red-500">
      <CardHeader class="pb-2">
        <CardTitle class="text-xs font-medium flex items-center gap-2 text-red-600">
          <AlertTriangle class="size-3.5" />
          Vencidas ({{ overdueHUs.length }})
        </CardTitle>
      </CardHeader>
      <CardContent class="space-y-1">
        <div v-for="hu in overdueHUs" :key="hu.id" class="flex items-center gap-2 text-xs py-1 border-b last:border-0">
          <span class="font-mono text-[10px] text-muted-foreground w-16">{{ hu.code || `#${hu.id}` }}</span>
          <span class="flex-1 truncate">{{ hu._cleanTitle || hu.title }}</span>
          <Badge :variant="priorityVariant(hu.priority)" class="text-[10px]">{{ hu.priority }}</Badge>
          <span class="text-red-500 font-mono text-[10px] w-16 text-right">{{ formatDate(hu.end_date) }}</span>
        </div>
      </CardContent>
    </Card>

    <!-- Today -->
    <Card v-if="todayHUs.length > 0" class="border-l-3 border-l-amber-500">
      <CardHeader class="pb-2">
        <CardTitle class="text-xs font-medium flex items-center gap-2">
          <Calendar class="size-3.5" />
          Hoy ({{ todayHUs.length }})
        </CardTitle>
      </CardHeader>
      <CardContent class="space-y-1">
        <div v-for="hu in todayHUs" :key="hu.id" class="flex items-center gap-2 text-xs py-1 border-b last:border-0">
          <span class="font-mono text-[10px] text-muted-foreground w-16">{{ hu.code || `#${hu.id}` }}</span>
          <span class="flex-1 truncate">{{ hu._cleanTitle || hu.title }}</span>
          <Badge :variant="priorityVariant(hu.priority)" class="text-[10px]">{{ hu.priority }}</Badge>
          <Badge variant="outline" class="text-[10px]">Hoy</Badge>
        </div>
      </CardContent>
    </Card>

    <!-- This week -->
    <Card v-if="thisWeekHUs.length > 0">
      <CardHeader class="pb-2">
        <CardTitle class="text-xs font-medium flex items-center gap-2">
          <Calendar class="size-3.5" />
          Esta semana ({{ thisWeekHUs.length }})
        </CardTitle>
      </CardHeader>
      <CardContent class="space-y-1">
        <div v-for="hu in thisWeekHUs" :key="hu.id" class="flex items-center gap-2 text-xs py-1 border-b last:border-0">
          <span class="font-mono text-[10px] text-muted-foreground w-16">{{ hu.code || `#${hu.id}` }}</span>
          <span class="flex-1 truncate">{{ hu._cleanTitle || hu.title }}</span>
          <Badge :variant="priorityVariant(hu.priority)" class="text-[10px]">{{ hu.priority }}</Badge>
          <span class="font-mono text-[10px] text-muted-foreground w-16 text-right">{{ formatDate(hu.end_date) }}</span>
        </div>
      </CardContent>
    </Card>

    <!-- Blocked -->
    <Card v-if="blockedHUs.length > 0" class="border-l-3 border-l-purple-500">
      <CardHeader class="pb-2">
        <CardTitle class="text-xs font-medium flex items-center gap-2 text-purple-600">
          <AlertTriangle class="size-3.5" />
          Bloqueadas ({{ blockedHUs.length }})
        </CardTitle>
      </CardHeader>
      <CardContent class="space-y-1">
        <div v-for="hu in blockedHUs" :key="hu.id" class="flex items-center gap-2 text-xs py-1 border-b last:border-0">
          <span class="font-mono text-[10px] text-muted-foreground w-16">{{ hu.code || `#${hu.id}` }}</span>
          <span class="flex-1 truncate">{{ hu._cleanTitle || hu.title }}</span>
          <Badge variant="destructive" class="text-[10px]">Bloqueada</Badge>
          <Badge v-if="hu.has_impairment" variant="outline" class="text-[10px]">Impedimento</Badge>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
