<template>
  <div class="p-4 max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold text-green mb-6">Tableau de bord</h1>

    <section class="mb-6">
      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Tâches à faire</h2>
      <div v-if="!pendingTasks.length" class="text-text-muted text-sm py-2">Aucune tâche en attente.</div>
      <div
        v-for="t in pendingTasks"
        :key="t.id"
        class="bg-bg-soft rounded-lg p-3 mb-2 flex items-center gap-3 border border-bg-hard"
      >
        <span :class="{
          'text-red': t.priorite === 'haute',
          'text-yellow': t.priorite === 'normale',
          'text-text-muted': t.priorite === 'basse'
        }">●</span>
        <span class="text-text text-sm flex-1">{{ t.titre }}</span>
        <button
          class="text-xs text-green hover:underline px-2"
          @click="tasksStore.updateStatut(t.id!, 'fait')"
        >✓ Fait</button>
      </div>
    </section>

    <section class="mb-6">
      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Météo (3 jours)</h2>
      <div class="flex gap-2 overflow-x-auto">
        <div v-for="day in meteo3j" :key="day.date"
          class="bg-bg-soft rounded-xl p-3 border border-bg-hard flex flex-col items-center gap-1 min-w-[90px]">
          <div class="text-text-muted text-xs">{{ formatDate(day.date) }}</div>
          <div class="text-2xl">{{ day.icone }}</div>
          <div class="text-xs text-center text-text-muted">{{ day.label }}</div>
          <div class="flex gap-1 text-xs">
            <span class="text-orange">↑{{ day.t_max?.toFixed(0) }}°</span>
            <span class="text-blue">↓{{ day.t_min?.toFixed(0) }}°</span>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Jardins</h2>
      <div v-if="gardensStore.loading" class="text-text-muted text-sm">Chargement...</div>
      <div
        v-for="g in gardensStore.gardens"
        :key="g.id"
        class="bg-bg-soft rounded-lg p-4 mb-2 border border-bg-hard cursor-pointer hover:border-green transition-colors"
        @click="router.push(`/jardins/${g.id}`)"
      >
        <span class="text-text font-medium">{{ g.nom }}</span>
        <span class="ml-2 text-xs text-text-muted px-2 py-0.5 bg-bg rounded">{{ g.type }}</span>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useGardensStore } from '@/stores/gardens'
import { useTasksStore } from '@/stores/tasks'
import { meteoApi, type MeteoDay } from '@/api/meteo'

const router = useRouter()
const gardensStore = useGardensStore()
const tasksStore = useTasksStore()
const pendingTasks = computed(() => tasksStore.tasks.filter(t => t.statut === 'a_faire').slice(0, 5))

const meteo3j = ref<MeteoDay[]>([])

function formatDate(s: string) {
  return new Date(s + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
}

onMounted(async () => {
  gardensStore.fetchAll()
  tasksStore.fetchAll()
  try { const r = await meteoApi.getForecast(3); meteo3j.value = r.days.slice(0, 3) } catch {}
})
</script>
