nav-carte/components/FormReferences.vue

<template>
  <form @submit.prevent="submit" class="proposer-form" novalidate>
    <div class="field-group" :class="{ 'field-error': errors.titre }">
      <label for="ref-titre">Titre du livre / document <span class="required">*</span></label>
      <input id="ref-titre" v-model="form.titre" type="text" placeholder="Ex : Repenser l'architecture..." @blur="validateField('titre')" />
      <span v-if="errors.titre" class="error-msg" role="alert">{{ errors.titre }}</span>
    </div>

    <div class="field-group" :class="{ 'field-error': errors.auteur }">
      <label for="ref-auteur">Auteur·ice(s) <span class="required">*</span></label>
      <input id="ref-auteur" v-model="form.auteur" type="text" placeholder="Ex : Philippe Rahm, Doina Petrescu..." @blur="validateField('auteur')" />
      <span v-if="errors.auteur" class="error-msg" role="alert">{{ errors.auteur }}</span>
    </div>

    <div class="field-group" :class="{ 'field-error': errors.url }">
      <label for="ref-url">Lien <span class="label-hint">(optionnel — éditeur, статье, PDF…)</span></label>
      <input id="ref-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
    </div>

    <div class="field-group" :class="{ 'field-error': errors.description }">
      <label for="ref-desc">Description de l'ouvrage <span class="required">*</span> <span class="label-hint">(50 à 1000 caractères)</span></label>
      <textarea id="ref-desc" v-model="form.description" rows="4" placeholder="Présente l'ouvrage : thèse principale, approche, pourquoi c'est important..." @blur="validateField('description')" />
      <div class="field-meta">
        <span v-if="errors.description" class="error-msg" role="alert">{{ errors.description }}</span>
        <span v-else class="char-count" :class="{ 'char-warn': form.description.length > 900 }">{{ form.description.length }}/1000</span>
      </div>
    </div>

    <div class="field-group">
      <label for="ref-pertinence">Pertinence pour le RAG <span class="label-hint">(optionnel — en quoi cette référence est utile ?)</span></label>
      <textarea id="ref-pertinence" v-model="form.pertinence_rag" rows="2" placeholder="Ex : Excellente source sur l'architecture participative..." maxlength="500" />
    </div>

    <div class="field-group">
      <label for="ref-hashtags">Hashtags <span class="label-hint">(optionnel — séparés par des virgules)</span></label>
      <input id="ref-hashtags" v-model="form.hashtags" type="text" placeholder="Ex : écologie, participation, matériaux bio..." />
    </div>

    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
      <label for="ref-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
      <input id="ref-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
    </div>

    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>

    <div class="form-actions">
      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer la référence →' }}</button>
    </div>
    <p class="form-note">Ta référence sera examinée avant d'être intégrée au fonds documentaire RAG.</p>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const Schema = z.object({
  titre: z.string().min(3, 'Minimum 3 caractères').max(200, 'Maximum 200 caractères').trim(),
  auteur: z.string().min(2, 'Minimum 2 caractères').max(200, 'Maximum 200 caractères').trim(),
  url: z.string().url('URL invalide').optional().or(z.literal('')),
  description: z.string().min(50, 'Minimum 50 caractères').max(1000, 'Maximum 1000 caractères').trim(),
  pertinence_rag: z.string().max(500).optional(),
  hashtags: z.string().max(300).optional(),
  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
})

const emit = defineEmits<{ success: [] }>()

const form = reactive({
  titre: '', auteur: '', url: '', description: '',
  pertinence_rag: '', hashtags: '', submitted_by_email: '',
})
const errors = reactive<Record<string, string>>({})
const submitting = ref(false)
const serverError = ref('')

function validateField(field: string) {
  const partial = Schema.partial()
  const result = partial.safeParse({ [field]: (form as any)[field] })
  if (!result.success) {
    const fieldErrors = result.error.flatten().fieldErrors
    errors[field] = fieldErrors[field]?.[0] ?? ''
  } else {
    delete errors[field]
  }
}

function validateAll(): boolean {
  const result = Schema.safeParse(form)
  if (!result.success) {
    const flat = result.error.flatten().fieldErrors
    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
    return false
  }
  Object.keys(errors).forEach(k => delete errors[k])
  return true
}

async function submit() {
  serverError.value = ''
  if (!validateAll()) {
    await nextTick()
    const firstError = document.querySelector('.field-error')
    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
    return
  }
  submitting.value = true
  try {
    await $fetch('/api/submit/reference', {
      method: 'POST',
      body: {
        titre: form.titre,
        auteur: form.auteur,
        url: form.url || undefined,
        description: form.description,
        pertinence_rag: form.pertinence_rag || undefined,
        hashtags: form.hashtags || undefined,
        submitted_by_email: form.submitted_by_email || undefined,
      },
    })
    emit('success')
  } catch (e: any) {
    const status = e?.status ?? e?.statusCode
    if (status === 429) {
      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
    } else if (status === 422 && e?.data) {
      const fieldErrors = e.data
      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
    } else {
      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
    }
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
@import './form-styles.css';
</style>