<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">🪴 Jardins</h1>
      <button class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
        @click="openCreate">+ Nouveau</button>
    </div>

    <div v-if="store.loading" class="text-text-muted text-sm">Chargement...</div>
    <div v-for="g in store.gardens" :key="g.id"
      class="bg-bg-soft rounded-lg p-4 mb-3 border border-bg-hard flex items-center gap-3 group">
      <div class="flex-1 cursor-pointer" @click="router.push(`/jardins/${g.id}`)">
        <div class="text-text font-medium group-hover:text-green transition-colors">{{ g.nom }}</div>
        <div class="text-text-muted text-xs mt-1">
          {{ typeLabel(g.type) }} · {{ g.grille_largeur }}×{{ g.grille_hauteur }} cases
          <span v-if="g.exposition"> · {{ g.exposition }}</span>
        </div>
      </div>
      <button @click="startEdit(g)" class="text-yellow text-xs hover:underline px-2">Édit.</button>
      <button @click="store.remove(g.id!)" class="text-text-muted hover:text-red text-sm px-2">✕</button>
    </div>

    <div v-if="!store.loading && !store.gardens.length" class="text-text-muted text-sm text-center py-8">
      Aucun jardin. Créez-en un !
    </div>

    <!-- Modal création / édition -->
    <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-md border border-bg-soft max-h-[90vh] overflow-y-auto">
        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier le jardin' : 'Nouveau jardin' }}</h2>
        <form @submit.prevent="submit" class="grid gap-3">
          <div>
            <label class="text-text-muted text-xs block mb-1">Nom *</label>
            <input v-model="form.nom" 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>
            <label class="text-text-muted text-xs block mb-1">Description</label>
            <textarea v-model="form.description" rows="2"
              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none resize-none" />
          </div>
          <div>
            <label class="text-text-muted text-xs block mb-1">Type</label>
            <select v-model="form.type" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
              <option value="plein_air">Plein air</option>
              <option value="serre">Serre</option>
              <option value="tunnel">Tunnel</option>
              <option value="bac">Bac / Pot</option>
            </select>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-text-muted text-xs block mb-1">Largeur grille</label>
              <input v-model.number="form.grille_largeur" type="number" min="1" max="30"
                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
            </div>
            <div>
              <label class="text-text-muted text-xs block mb-1">Hauteur grille</label>
              <input v-model.number="form.grille_hauteur" type="number" min="1" max="30"
                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
            </div>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-text-muted text-xs block mb-1">Exposition</label>
              <select v-model="form.exposition" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
                <option value="">—</option>
                <option value="Nord">Nord</option>
                <option value="Est">Est</option>
                <option value="Sud">Sud</option>
                <option value="Ouest">Ouest</option>
                <option value="Sud-Est">Sud-Est</option>
                <option value="Sud-Ouest">Sud-Ouest</option>
              </select>
            </div>
            <div>
              <label class="text-text-muted text-xs block mb-1">Type de sol</label>
              <select v-model="form.sol_type" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
                <option value="">—</option>
                <option value="argileux">Argileux</option>
                <option value="limoneux">Limoneux</option>
                <option value="sableux">Sableux</option>
                <option value="calcaire">Calcaire</option>
                <option value="humifère">Humifère</option>
                <option value="mixte">Mixte</option>
              </select>
            </div>
          </div>
          <div class="flex gap-2 mt-2">
            <button type="submit" class="bg-green text-bg px-4 py-2 rounded text-sm font-semibold">
              {{ editId ? 'Enregistrer' : 'Créer' }}
            </button>
            <button type="button" class="text-text-muted text-sm px-4 py-2 hover:text-text" @click="closeForm">Annuler</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useGardensStore } from '@/stores/gardens'
import type { Garden } from '@/api/gardens'

const router = useRouter()
const store = useGardensStore()
const showForm = ref(false)
const editId = ref<number | null>(null)

const form = reactive({
  nom: '', description: '', type: 'plein_air',
  grille_largeur: 6, grille_hauteur: 4,
  exposition: '', sol_type: '',
})

function typeLabel(t: string) {
  return ({ plein_air: 'Plein air', serre: 'Serre', tunnel: 'Tunnel', bac: 'Bac/Pot' } as Record<string, string>)[t] ?? t
}

function openCreate() {
  editId.value = null
  Object.assign(form, { nom: '', description: '', type: 'plein_air', grille_largeur: 6, grille_hauteur: 4, exposition: '', sol_type: '' })
  showForm.value = true
}

function startEdit(g: Garden) {
  editId.value = g.id!
  Object.assign(form, {
    nom: g.nom, description: g.description || '',
    type: g.type, grille_largeur: g.grille_largeur, grille_hauteur: g.grille_hauteur,
    exposition: g.exposition || '', sol_type: g.sol_type || '',
  })
  showForm.value = true
}

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

async function submit() {
  if (editId.value) {
    await store.update(editId.value, { ...form })
  } else {
    await store.create({ ...form })
  }
  closeForm()
}

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