<template>
  <div class="p-4 max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-bold text-yellow">🔧 Outils</h1>
      <button @click="showForm = true" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
    </div>

    <div v-if="toolsStore.loading" class="text-text-muted text-sm">Chargement...</div>
    <div v-else-if="!toolsStore.tools.length" class="text-text-muted text-sm py-4">Aucun outil enregistré.</div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <div v-for="t in toolsStore.tools" :key="t.id"
        class="bg-bg-soft rounded-lg p-4 border border-bg-hard flex flex-col gap-2">
        <div class="flex items-center justify-between">
          <span class="text-text font-semibold">{{ t.nom }}</span>
          <div class="flex gap-2">
            <button @click="startEdit(t)" class="text-yellow text-xs hover:underline">Édit.</button>
            <button @click="removeTool(t.id!)" class="text-red text-xs hover:underline">Suppr.</button>
          </div>
        </div>
        <span v-if="t.categorie" class="text-xs text-yellow bg-yellow/10 rounded-full px-2 py-0.5 w-fit">{{ t.categorie }}</span>
        <p v-if="t.description" class="text-text-muted text-xs">{{ t.description }}</p>
      </div>
    </div>

    <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier l\'outil' : 'Nouvel outil' }}</h2>
        <form @submit.prevent="submitTool" class="flex flex-col gap-3">
          <input v-model="form.nom" placeholder="Nom de l'outil *" required
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
          <select v-model="form.categorie"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow">
            <option value="">Catégorie</option>
            <option value="beche">Bêche</option>
            <option value="fourche">Fourche</option>
            <option value="griffe">Griffe/Grelinette</option>
            <option value="arrosage">Arrosage</option>
            <option value="taille">Taille</option>
            <option value="autre">Autre</option>
          </select>
          <textarea v-model="form.description" placeholder="Description..."
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-16" />
          <div class="flex gap-2 justify-end">
            <button type="button" @click="closeForm" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
            <button type="submit" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
              {{ editId ? 'Enregistrer' : 'Créer' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useToolsStore } from '@/stores/tools'
import type { Tool } from '@/api/tools'

const toolsStore = useToolsStore()
const showForm = ref(false)
const editId = ref<number | null>(null)
const form = reactive({ nom: '', categorie: '', description: '' })

function startEdit(t: Tool) {
  editId.value = t.id!
  Object.assign(form, { nom: t.nom, categorie: t.categorie || '', description: t.description || '' })
  showForm.value = true
}

function closeForm() { showForm.value = false; editId.value = null }

async function submitTool() {
  if (editId.value) {
    await toolsStore.update(editId.value, { ...form })
  } else {
    await toolsStore.create({ ...form })
  }
  Object.assign(form, { nom: '', categorie: '', description: '' })
  closeForm()
}

async function removeTool(id: number) {
  if (confirm('Supprimer cet outil ?')) await toolsStore.remove(id)
}

onMounted(() => toolsStore.fetchAll())
</script>
