<template>
  <div class="p-4 max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-bold text-green">Variétés</h1>
      <button
        class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
        @click="showForm = !showForm"
      >+ Nouvelle</button>
    </div>

    <form v-if="showForm" class="bg-bg-soft rounded-lg p-4 mb-6 border border-green/30" @submit.prevent="submit">
      <div class="grid gap-3">
        <div>
          <label class="text-text-muted text-xs block mb-1">Nom commun *</label>
          <input v-model="form.nom_commun" required
            class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="text-text-muted text-xs block mb-1">Variété</label>
            <input v-model="form.variete"
              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
          </div>
          <div>
            <label class="text-text-muted text-xs block mb-1">Famille</label>
            <input v-model="form.famille"
              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
          </div>
        </div>
        <div>
          <label class="text-text-muted text-xs block mb-1">Besoin en eau</label>
          <select v-model="form.besoin_eau" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
            <option value="">—</option>
            <option value="faible">Faible</option>
            <option value="moyen">Moyen</option>
            <option value="fort">Fort</option>
          </select>
        </div>
      </div>
      <div class="flex gap-2 mt-4">
        <button type="submit" class="bg-green text-bg px-4 py-2 rounded text-sm font-semibold">Créer</button>
        <button type="button" class="text-text-muted text-sm px-4 py-2 hover:text-text" @click="showForm = false">Annuler</button>
      </div>
    </form>

    <div v-if="store.loading" class="text-text-muted text-sm">Chargement...</div>
    <div v-for="v in store.varieties" :key="v.id"
      class="bg-bg-soft rounded-lg p-4 mb-2 border border-bg-hard flex items-start gap-3">
      <div class="flex-1">
        <div class="text-text font-medium">
          {{ v.nom_commun }}
          <span v-if="v.variete" class="text-text-muted text-xs"> — {{ v.variete }}</span>
        </div>
        <div class="text-text-muted text-xs mt-1">{{ v.famille }}</div>
        <div class="flex gap-2 mt-2 flex-wrap">
          <span v-if="v.besoin_eau" class="text-xs px-2 py-0.5 bg-bg rounded text-blue">💧 {{ v.besoin_eau }}</span>
          <span v-if="v.espacement_cm" class="text-xs px-2 py-0.5 bg-bg rounded text-text-muted">↔ {{ v.espacement_cm }}cm</span>
          <span v-if="v.plantation_mois" class="text-xs px-2 py-0.5 bg-bg rounded text-green">🌱 mois {{ v.plantation_mois }}</span>
        </div>
      </div>
      <button class="text-text-muted hover:text-red text-sm px-2 py-1 rounded hover:bg-bg transition-colors"
        @click="store.remove(v.id!)">✕</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useVarietiesStore } from '@/stores/varieties'

const store = useVarietiesStore()
const showForm = ref(false)
const form = reactive({ nom_commun: '', variete: '', famille: '', besoin_eau: '' })

onMounted(() => store.fetchAll())

async function submit() {
  await store.create({ ...form })
  showForm.value = false
  Object.assign(form, { nom_commun: '', variete: '', famille: '', besoin_eau: '' })
}
</script>
