<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow">
      <div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
        <h1 class="text-lg sm:text-2xl font-bold text-gray-900 truncate">Línea de Tiempo - Caso {{ caso.numero_reclamo }}</h1>
        <div class="flex items-center gap-3 sm:gap-4 flex-shrink-0">
          <Link :href="route('portal.casos.ver', caso.id)" class="text-sm sm:text-base text-blue-600 hover:underline whitespace-nowrap">← Volver al Caso</Link>
          <form method="POST" :action="route('portal.logout')">
            <button type="submit" class="text-sm sm:text-base text-gray-600 hover:text-gray-900 whitespace-nowrap">Cerrar Sesión</button>
          </form>
        </div>
      </div>
    </header>

    <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
      <div class="bg-white shadow rounded-lg p-4 sm:p-6">
        <div class="relative">
          <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>
          
          <div v-for="(estado, index) in caso.estados_historicos" :key="index" class="relative pl-16 pb-8">
            <div class="absolute left-6 w-5 h-5 rounded-full bg-green-500 border-4 border-white"></div>
            
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium text-gray-900">{{ estado.estado }}</h3>
                <span class="text-sm text-gray-500">{{ formatDate(estado.fecha_ingreso) }}</span>
              </div>
              
              <div v-if="estado.duracion_minutas || (!estado.fecha_salida && (estado.fecha_ingreso || estado.created_at))" class="text-sm text-gray-600 mb-2">
                Duración: {{ getDynamicDuration(estado) }}
              </div>
              
              <p v-if="estado.nota" class="text-sm text-gray-700">
                {{ estado.nota }}
              </p>
              
              <div v-if="estado.fecha_salida" class="text-xs text-gray-500 mt-2">
                Finalizado: {{ formatDate(estado.fecha_salida) }}
              </div>
            </div>
          </div>
          
          <div v-if="!caso.estados_historicos?.length" class="pl-16 py-4 text-gray-500">
            No hay historial de estados disponible.
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
  title: String,
  caso: Object
})

const formatDate = (date) => {
  if (!date) return 'N/A'
  return new Date(date).toLocaleDateString('es-EC', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatDuration = (minutes) => {
  if (!minutes) return 'N/A'
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  if (hours > 0) {
    return `${hours}h ${mins}m`
  }
  return `${mins}m`
}

const parseSafeDate = (d) => {
  if (!d) return new Date();
  if (typeof d === 'string') return new Date(d.replace(' ', 'T'));
  return new Date(d);
};

const getDynamicDuration = (estado) => {
  let minutes = estado.duracion_minutas;
  if (!minutes) {
    const start = estado.fecha_ingreso || estado.created_at;
    if (start) {
      const startDate = parseSafeDate(start);
      const endDate = estado.fecha_salida ? parseSafeDate(estado.fecha_salida) : new Date();
      const diffMs = endDate - startDate;
      if (diffMs > 0) {
        minutes = Math.floor(diffMs / 60000);
      }
    }
  }
  return formatDuration(minutes);
}
</script>
