<script setup lang="ts">
import { computed } from 'vue'
import type { CommitInfo } from '@/types/git'

const props = defineProps<{
  commits: CommitInfo[]
  selectedSha?: string | null
  loading?: boolean
}>()

const emit = defineEmits<{
  select: [sha: string]
  loadMore: []
}>()

function formatDate(timestamp: number) {
  const date = new Date(timestamp * 1000)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  // Less than 1 day
  if (diff < 86400000) {
    const hours = Math.floor(diff / 3600000)
    if (hours < 1) {
      const mins = Math.floor(diff / 60000)
      return mins < 1 ? 'just now' : `${mins}m ago`
    }
    return `${hours}h ago`
  }

  // Less than 7 days
  if (diff < 604800000) {
    const days = Math.floor(diff / 86400000)
    return `${days}d ago`
  }

  // Format as date
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
  })
}

function getInitials(name: string) {
  return name
    .split(' ')
    .map(n => n[0])
    .join('')
    .toUpperCase()
    .slice(0, 2)
}

function getAvatarColor(email: string) {
  let hash = 0
  for (let i = 0; i < email.length; i++) {
    hash = email.charCodeAt(i) + ((hash << 5) - hash)
  }
  const hue = hash % 360
  return `hsl(${hue}, 60%, 45%)`
}
</script>

<template>
  <div class="commit-list">
    <div v-if="commits.length === 0 && !loading" class="empty-state">
      Sin commits
    </div>

    <div
      v-for="commit in commits"
      :key="commit.sha"
      :class="['commit-item', { selected: selectedSha === commit.sha }]"
      @click="emit('select', commit.sha)"
    >
      <div class="commit-avatar" :style="{ background: getAvatarColor(commit.email) }">
        {{ getInitials(commit.author) }}
      </div>
      <div class="commit-info">
        <div class="commit-message">{{ commit.message }}</div>
        <div class="commit-meta">
          <span class="commit-sha">{{ commit.shortSha }}</span>
          <span class="commit-author">{{ commit.author }}</span>
          <span class="commit-date">{{ formatDate(commit.timestamp) }}</span>
        </div>
      </div>
    </div>

    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      Cargando...
    </div>

    <button
      v-else-if="commits.length > 0"
      class="load-more"
      @click="emit('loadMore')"
    >
      Cargar más
    </button>
  </div>
</template>

<style scoped>
.commit-list {
  display: flex;
  flex-direction: column;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

.commit-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.commit-item:hover {
  background: var(--bg-hover);
}

.commit-item.selected {
  background: rgba(99, 102, 241, 0.1);
  border-left: 2px solid var(--accent);
}

.commit-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.commit-info {
  flex: 1;
  min-width: 0;
}

.commit-message {
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.commit-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 12px;
  color: var(--text-muted);
}

.commit-sha {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--accent);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--text-muted);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.load-more {
  margin: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.load-more:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .commit-item {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .commit-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .commit-message {
    font-size: 12px;
  }

  .commit-meta {
    font-size: 11px;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .commit-meta .commit-author {
    display: none;
  }

  .load-more {
    margin: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 12px;
  }
}
</style>
