<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTasksStore } from '../stores/tasks'
import Icon from '../components/Icon.vue'

const router = useRouter()
const store = useTasksStore()

const showDone = ref(false)

const visibleTasks = computed(() => {
  if (showDone.value) return store.currentTasks
  return store.currentTasks.filter((t) => t.status !== 'done')
})

function formatDate(iso) {
  return new Date(iso).toLocaleDateString('de-DE')
}

const grouped = computed(() =>
  Object.groupBy(visibleTasks.value, (t) => (t.date ? formatDate(t.date) : ''))
)

onMounted(() => {
  store.fetchCurrent()
})
</script>

<template>
  <div class="task-view">
    <div class="actions">
      <button class="icon-btn" @click="router.push('/schemas')" title="Schemas">
        <Icon name="calendar" />
      </button>
      <button class="icon-btn" @click="router.push('/schemas/create')" title="Neues Schema">
        <Icon name="plus" />
      </button>
      <button class="icon-btn" @click="router.push('/tasks/all')" title="Alle Tasks">
        <Icon name="list" />
      </button>
      <button class="icon-btn" @click="showDone = !showDone" :title="showDone ? 'Erledigte ausblenden' : 'Erledigte einblenden'">
        <Icon :name="showDone ? 'eye' : 'eye-off'" />
      </button>
      <button class="icon-btn" @click="store.fetchCurrent()" title="Neu laden">
        <Icon name="refresh" />
      </button>
    </div>

    <p v-if="store.loading && visibleTasks.length === 0" class="hint">Lädt…</p>
    <p v-else-if="store.error" class="error">{{ store.error }}</p>
    <p v-else-if="visibleTasks.length === 0" class="hint">Keine Tasks.</p>

    <div v-else class="task-groups">
      <section
        v-for="(tasks, key) in grouped"
        :key="key || 'no-date'"
        class="task-group"
      >
        <h3 v-if="key" class="group-title">{{ key }}</h3>
        <ul class="task-list">
          <li
            v-for="task in tasks"
            :key="task.id"
            class="task-item"
            :class="{ done: task.status === 'done' }"
            @click="store.toggle(task.id)"
          >
            <span class="task-name">{{ task.name }}</span>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<style scoped>
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--text);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--breadcrumb-bg);
}

.task-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.task-group {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding-top: 0.25rem;
}

.group-title {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.1rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.task-item:last-child {
  border-bottom: none;
}

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

.task-item.done .task-name {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-date {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hint {
  color: var(--text-muted);
}

.error {
  color: #dc2626;
}
</style>
