<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-green">🌱 Plantes</h1>
      <button @click="showForm = true" class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
    </div>

    <!-- Filtres catégorie -->
    <div class="flex gap-2 mb-4 flex-wrap">
      <button v-for="cat in categories" :key="cat.val"
        @click="selectedCat = cat.val"
        :class="['px-3 py-1 rounded-full text-xs font-medium transition-colors',
          selectedCat === cat.val ? 'bg-green text-bg' : 'bg-bg-soft text-text-muted hover:text-text']">
        {{ cat.label }}
      </button>
    </div>

    <!-- Liste -->
    <div v-if="plantsStore.loading" class="text-text-muted text-sm">Chargement...</div>
    <div v-else-if="!filteredPlants.length" class="text-text-muted text-sm py-4">Aucune plante.</div>
    <div v-for="p in filteredPlants" :key="p.id"
      class="bg-bg-soft rounded-lg mb-2 border border-bg-hard overflow-hidden">
      <!-- En-tête cliquable -->
      <div class="p-4 flex items-start justify-between gap-4 cursor-pointer"
        @click="toggleDetail(p.id!)">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 mb-1 flex-wrap">
            <span class="text-text font-semibold">{{ p.nom_commun }}</span>
            <span v-if="p.variete" class="text-text-muted text-xs">— {{ p.variete }}</span>
            <span v-if="p.categorie" :class="['text-xs px-2 py-0.5 rounded-full font-medium', catClass(p.categorie)]">{{ catLabel(p.categorie) }}</span>
          </div>
          <div class="text-text-muted text-xs flex gap-3 flex-wrap">
            <span v-if="p.famille">🌿 {{ p.famille }}</span>
            <span v-if="p.espacement_cm">↔ {{ p.espacement_cm }}cm</span>
            <span v-if="p.besoin_eau">💧 {{ p.besoin_eau }}</span>
            <span v-if="p.plantation_mois">🌱 Plantation: mois {{ p.plantation_mois }}</span>
          </div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
          <span class="text-text-muted text-xs">{{ openId === p.id ? '▲' : '▼' }}</span>
          <button @click.stop="startEdit(p)" class="text-yellow text-xs hover:underline">Édit.</button>
          <button @click.stop="removePlant(p.id!)" class="text-red text-xs hover:underline">Suppr.</button>
        </div>
      </div>

      <!-- Panneau détail -->
      <div v-if="openId === p.id" class="border-t border-bg-hard px-4 pb-4 pt-3">
        <!-- Notes -->
        <p v-if="p.notes" class="text-text-muted text-sm mb-3 italic">{{ p.notes }}</p>

        <!-- Galerie photos -->
        <div class="mb-2 flex items-center justify-between">
          <span class="text-text-muted text-xs font-medium uppercase tracking-wide">Photos</span>
          <button @click="openUpload(p)" class="text-green text-xs hover:underline">+ Ajouter une photo</button>
        </div>

        <div v-if="loadingPhotos" class="text-text-muted text-xs">Chargement...</div>
        <div v-else-if="!plantPhotos.length" class="text-text-muted text-xs mb-3">Aucune photo pour cette plante.</div>
        <div v-else class="grid grid-cols-4 gap-2 mb-3">
          <div v-for="m in plantPhotos" :key="m.id"
            class="aspect-square rounded overflow-hidden bg-bg-hard relative group cursor-pointer"
            @click="lightbox = m">
            <img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
            <div v-if="m.identified_common"
              class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">
              {{ m.identified_common }}
            </div>
            <button @click.stop="deletePhoto(m)" class="hidden group-hover:flex absolute top-1 right-1 bg-red/80 text-white text-xs rounded px-1">✕</button>
          </div>
        </div>

        <!-- Lier une photo existante de la bibliothèque -->
        <button @click="openLinkPhoto(p)" class="text-blue text-xs hover:underline">
          🔗 Lier une photo existante de la bibliothèque
        </button>
      </div>
    </div>

    <!-- Modal formulaire création / édition -->
    <div v-if="showForm || editPlant" 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">{{ editPlant ? 'Modifier la plante' : 'Nouvelle plante' }}</h2>
        <form @submit.prevent="submitPlant" class="flex flex-col gap-3">
          <input v-model="form.nom_commun" placeholder="Nom commun *" required
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <input v-model="form.nom_botanique" placeholder="Nom botanique"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <input v-model="form.variete" placeholder="Variété"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <input v-model="form.famille" placeholder="Famille botanique"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <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-green">
            <option value="">Catégorie</option>
            <option value="potager">Potager</option>
            <option value="fleur">Fleur</option>
            <option value="arbre">Arbre</option>
            <option value="arbuste">Arbuste</option>
            <option value="adventice">Adventice (mauvaise herbe)</option>
          </select>
          <select v-model="form.type_plante"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
            <option value="">Type</option>
            <option value="legume">Légume</option>
            <option value="fruit">Fruit</option>
            <option value="aromatique">Aromatique</option>
            <option value="fleur">Fleur</option>
            <option value="adventice">Adventice</option>
          </select>
          <select v-model="form.besoin_eau"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
            <option value="">Besoin en eau</option>
            <option value="faible">Faible</option>
            <option value="moyen">Moyen</option>
            <option value="élevé">Élevé</option>
          </select>
          <select v-model="form.besoin_soleil"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
            <option value="">Ensoleillement</option>
            <option value="ombre">Ombre</option>
            <option value="mi-ombre">Mi-ombre</option>
            <option value="plein soleil">Plein soleil</option>
          </select>
          <div class="flex gap-2">
            <input v-model.number="form.espacement_cm" type="number" placeholder="Espacement (cm)"
              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
            <input v-model.number="form.temp_min_c" type="number" placeholder="T° min (°C)"
              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
          </div>
          <input v-model="form.plantation_mois" placeholder="Mois plantation (ex: 3,4,5)"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <input v-model="form.recolte_mois" placeholder="Mois récolte (ex: 7,8,9)"
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
          <textarea v-model="form.notes" placeholder="Notes..."
            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-20" />
          <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-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
              {{ editPlant ? 'Enregistrer' : 'Créer' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Modal upload photo pour une plante -->
    <div v-if="uploadTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="uploadTarget = null">
      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
        <h3 class="text-text font-bold mb-4">Photo pour "{{ uploadTarget.nom_commun }}"</h3>
        <label class="block border-2 border-dashed border-bg-soft rounded-lg p-6 text-center cursor-pointer hover:border-green transition-colors">
          <input type="file" accept="image/*" class="hidden" @change="uploadPhoto" />
          <div class="text-text-muted text-sm">📷 Choisir une image</div>
        </label>
        <button @click="uploadTarget = null" class="mt-3 w-full text-text-muted hover:text-text text-sm">Annuler</button>
      </div>
    </div>

    <!-- Modal lier photo existante -->
    <div v-if="linkTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="linkTarget = null">
      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-2xl border border-bg-soft max-h-[80vh] flex flex-col">
        <h3 class="text-text font-bold mb-3">Lier une photo à "{{ linkTarget.nom_commun }}"</h3>
        <p class="text-text-muted text-xs mb-3">Sélectionne une photo de la bibliothèque (non liée à une plante)</p>
        <div v-if="!unlinkPhotos.length" class="text-text-muted text-sm py-4 text-center">Aucune photo disponible.</div>
        <div v-else class="grid grid-cols-4 gap-2 overflow-y-auto flex-1">
          <div v-for="m in unlinkPhotos" :key="m.id"
            class="aspect-square rounded overflow-hidden bg-bg-hard relative cursor-pointer group border-2 transition-colors"
            :class="selectedLinkPhoto === m.id ? 'border-green' : 'border-transparent'"
            @click="selectedLinkPhoto = m.id">
            <img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
            <div v-if="m.identified_common" class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">{{ m.identified_common }}</div>
          </div>
        </div>
        <div class="flex gap-2 justify-end mt-3">
          <button @click="linkTarget = null" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
          <button @click="confirmLink" :disabled="!selectedLinkPhoto"
            class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-40">
            Lier la photo
          </button>
        </div>
      </div>
    </div>

    <!-- Lightbox -->
    <div v-if="lightbox" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4" @click.self="lightbox = null">
      <div class="max-w-lg w-full">
        <img :src="lightbox.url" class="w-full rounded-xl" />
        <div v-if="lightbox.identified_species" class="text-center mt-3 text-text-muted text-sm">
          <div class="text-green font-semibold text-base">{{ lightbox.identified_common }}</div>
          <div class="italic">{{ lightbox.identified_species }}</div>
          <div class="text-xs mt-1">Confiance : {{ Math.round((lightbox.identified_confidence || 0) * 100) }}% — via {{ lightbox.identified_source }}</div>
        </div>
        <button class="mt-4 w-full text-text-muted hover:text-text text-sm" @click="lightbox = null">Fermer</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import axios from 'axios'
import { usePlantsStore } from '@/stores/plants'
import type { Plant } from '@/api/plants'

const plantsStore = usePlantsStore()
const showForm = ref(false)
const editPlant = ref<Plant | null>(null)
const selectedCat = ref('')
const openId = ref<number | null>(null)
const plantPhotos = ref<Media[]>([])
const loadingPhotos = ref(false)
const uploadTarget = ref<Plant | null>(null)
const linkTarget = ref<Plant | null>(null)
const unlinkPhotos = ref<Media[]>([])
const selectedLinkPhoto = ref<number | null>(null)
const lightbox = ref<Media | null>(null)

interface Media {
  id: number; entity_type: string; entity_id: number
  url: string; thumbnail_url?: string; titre?: string
  identified_species?: string; identified_common?: string
  identified_confidence?: number; identified_source?: string
}

const categories = [
  { val: '', label: 'Toutes' },
  { val: 'potager', label: '🥕 Potager' },
  { val: 'fleur', label: '🌸 Fleur' },
  { val: 'arbre', label: '🌳 Arbre' },
  { val: 'arbuste', label: '🌿 Arbuste' },
  { val: 'adventice', label: '🌾 Adventices' },
]

const form = reactive({
  nom_commun: '', nom_botanique: '', variete: '', famille: '',
  categorie: '', type_plante: '', besoin_eau: '', besoin_soleil: '',
  espacement_cm: undefined as number | undefined,
  temp_min_c: undefined as number | undefined,
  plantation_mois: '', recolte_mois: '', notes: '',
})

const filteredPlants = computed(() =>
  selectedCat.value ? plantsStore.plants.filter(p => p.categorie === selectedCat.value) : plantsStore.plants
)

const catClass = (cat: string) => ({
  potager: 'bg-green/20 text-green',
  fleur: 'bg-orange/20 text-orange',
  arbre: 'bg-blue/20 text-blue',
  arbuste: 'bg-yellow/20 text-yellow',
  adventice: 'bg-red/20 text-red',
}[cat] || 'bg-bg text-text-muted')

const catLabel = (cat: string) => ({
  potager: '🥕 Potager', fleur: '🌸 Fleur', arbre: '🌳 Arbre',
  arbuste: '🌿 Arbuste', adventice: '🌾 Adventice',
}[cat] || cat)

async function toggleDetail(id: number) {
  if (openId.value === id) { openId.value = null; return }
  openId.value = id
  await fetchPhotos(id)
}

async function fetchPhotos(plantId: number) {
  loadingPhotos.value = true
  try {
    const { data } = await axios.get<Media[]>('/api/media', {
      params: { entity_type: 'plante', entity_id: plantId }
    })
    plantPhotos.value = data
  } finally {
    loadingPhotos.value = false
  }
}

function startEdit(p: Plant) {
  editPlant.value = p
  Object.assign(form, {
    nom_commun: p.nom_commun || '', nom_botanique: (p as any).nom_botanique || '',
    variete: p.variete || '', famille: p.famille || '',
    categorie: p.categorie || '', type_plante: p.type_plante || '',
    besoin_eau: p.besoin_eau || '', besoin_soleil: p.besoin_soleil || '',
    espacement_cm: p.espacement_cm, temp_min_c: p.temp_min_c,
    plantation_mois: p.plantation_mois || '', recolte_mois: p.recolte_mois || '',
    notes: p.notes || '',
  })
}

function closeForm() {
  showForm.value = false
  editPlant.value = null
  Object.assign(form, {
    nom_commun: '', nom_botanique: '', variete: '', famille: '', categorie: '',
    type_plante: '', besoin_eau: '', besoin_soleil: '',
    espacement_cm: undefined, temp_min_c: undefined,
    plantation_mois: '', recolte_mois: '', notes: '',
  })
}

async function submitPlant() {
  if (editPlant.value) {
    await axios.put(`/api/plants/${editPlant.value.id}`, { ...form })
    await plantsStore.fetchAll()
  } else {
    await plantsStore.create({ ...form })
  }
  closeForm()
}

async function removePlant(id: number) {
  if (confirm('Supprimer cette plante ?')) {
    await plantsStore.remove(id)
    if (openId.value === id) openId.value = null
  }
}

function openUpload(p: Plant) { uploadTarget.value = p }

async function uploadPhoto(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (!file || !uploadTarget.value) return
  const fd = new FormData()
  fd.append('file', file)
  const { data: uploaded } = await axios.post('/api/upload', fd)
  await axios.post('/api/media', {
    entity_type: 'plante', entity_id: uploadTarget.value.id,
    url: uploaded.url, thumbnail_url: uploaded.thumbnail_url,
  })
  uploadTarget.value = null
  if (openId.value) await fetchPhotos(openId.value)
}

async function deletePhoto(m: Media) {
  if (!confirm('Supprimer cette photo ?')) return
  await axios.delete(`/api/media/${m.id}`)
  if (openId.value) await fetchPhotos(openId.value)
}

async function openLinkPhoto(p: Plant) {
  linkTarget.value = p
  selectedLinkPhoto.value = null
  const { data } = await axios.get<Media[]>('/api/media/all')
  // Photos non liées à une plante (bibliothèque ou autres)
  unlinkPhotos.value = data.filter(m => m.entity_type !== 'plante')
}

async function confirmLink() {
  if (!selectedLinkPhoto.value || !linkTarget.value) return
  await axios.patch(`/api/media/${selectedLinkPhoto.value}`, {
    entity_type: 'plante', entity_id: linkTarget.value.id,
  })
  const pid = linkTarget.value.id
  linkTarget.value = null
  selectedLinkPhoto.value = null
  if (openId.value === pid) await fetchPhotos(pid)
}

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