<template>
  <div class="entries">
    <h2 class="page-title">Alle Zeiteinträge</h2>
    
    <div v-if="timeStore.entries.length === 0" class="empty-state card">
      <h3>Keine Einträge vorhanden</h3>
      <p>Starte deinen ersten Timer im Dashboard!</p>
    </div>

    <div v-else class="entries-container">
      <div class="entries-header">
        <p class="entries-count">{{ timeStore.entries.length }} Einträge</p>
      </div>

      <div class="entries-table">
        <table>
          <thead>
            <tr>
              <th>Projekt</th>
              <th>Beschreibung</th>
              <th>Startzeit</th>
              <th>Endzeit</th>
              <th>Dauer</th>
              <th>Status</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="entry in timeStore.entries" :key="entry.id">
              <td class="project-cell">{{ entry.project }}</td>
              <td>{{ entry.description || '-' }}</td>
              <td>{{ formatDateTime(entry.startTime) }}</td>
              <td>{{ entry.endTime ? formatDateTime(entry.endTime) : '-' }}</td>
              <td class="duration-cell">{{ formatDuration(entry.duration) }}</td>
              <td>
                <span :class="['status-badge', entry.isRunning ? 'status-running' : 'status-completed']">
                  {{ entry.isRunning ? '🔴 Läuft' : '✅ Beendet' }}
                </span>
              </td>
              <td>
                <button 
                  @click="deleteEntry(entry.id)" 
                  class="btn-icon btn-delete"
                  title="Löschen"
                >
                  🗑️
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useTimeStore } from '../stores/timeStore'

const timeStore = useTimeStore()

const formatDuration = (seconds) => {
  if (!seconds) return '-'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const deleteEntry = async (id) => {
  if (confirm('Möchtest du diesen Eintrag wirklich löschen?')) {
    await timeStore.deleteEntry(id)
  }
}

onMounted(async () => {
  await timeStore.fetchEntries()
})
</script>

<style scoped>
.page-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
  font-weight: normal;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  background: #f9f9f9;
  border: 1px solid #d4d4d4;
}

.empty-state h3 {
  color: #666;
  margin-bottom: 1rem;
  font-weight: normal;
}

.entries-container {
  background: #f9f9f9;
  border: 1px solid #d4d4d4;
  padding: 1.5rem;
}

.entries-header {
  margin-bottom: 1rem;
}

.entries-count {
  color: #666;
  font-weight: normal;
  margin: 0;
}

.entries-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f0f0f0;
}

th {
  padding: 0.75rem;
  text-align: left;
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #d4d4d4;
}

td {
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

tr:hover {
  background-color: #fafafa;
}

.project-cell {
  font-weight: bold;
  color: #000;
}

.duration-cell {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #5cb85c;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: normal;
}

.status-running {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border: 1px solid #faebcc;
}

.status-completed {
  background-color: #dff0d8;
  color: #3c763d;
  border: 1px solid #d6e9c6;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: transform 0.2s;
}

.btn-icon:hover {
  transform: scale(1.2);
}

.btn-delete:hover {
  filter: brightness(0.8);
}
</style>

