<template>
  <div class="contribuer-page">
    <div class="contribuer-inner">
      <!-- Retour -->
      <NuxtLink to="/" class="back-link">
        ← Retour à la carte
      </NuxtLink>

      <!-- En-tête -->
      <div class="contribuer-header">
        <h1>Proposer une ressource</h1>
        <p class="contribuer-subtitle">
          Tu connais une organisation utile aux architectes qui n'est pas encore référencée ?
          Soumets-la ici — une IA enrichira la fiche et on validera sous 7 jours.
        </p>
        <p class="contribuer-hint">
          Si tu n'as pas le temps de tout remplir, laisse-nous juste le lien — on extraira les infos du site.
          Mais une description de toi, c'est toujours plus vivant et plus précis.
        </p>
      </div>

      <!-- Message succès -->
      <div v-if="success" class="success-block" role="status" aria-live="polite">
        <div class="success-icon">✓</div>
        <h2>Merci !</h2>
        <p>Ta fiche est en cours de traitement.</p>
        <p class="success-detail">
          Une IA va scraper le site et enrichir la description.
          Jules (et bientôt une équipe de modération) valide sous 7 jours.
        </p>
        <button type="button" class="btn-secondary" @click="reset">
          Proposer une autre fiche
        </button>
      </div>

      <!-- Formulaire -->
      <form v-else @submit.prevent="submit" class="contribuer-form" novalidate>

        <!-- Nom -->
        <div class="field-group" :class="{ 'field-error': errors.nom }">
          <label for="nom">Nom de l'organisation <span class="required">*</span></label>
          <input
            id="nom"
            v-model="form.nom"
            type="text"
            placeholder="Ex : UNSFA, Maison de l'Architecture..."
            autocomplete="organization"
            @blur="validateField('nom')"
          />
          <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
        </div>

        <!-- URL -->
        <div class="field-group" :class="{ 'field-error': errors.url }">
          <label for="url">
            Site web
            <span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span>
          </label>
          <input
            id="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>

        <!-- Description -->
        <div class="field-group" :class="{ 'field-error': errors.description_user }">
          <label for="description_user">
            Description courte <span class="required">*</span>
            <span class="label-hint">(50 à 500 caractères)</span>
          </label>
          <textarea
            id="description_user"
            v-model="form.description_user"
            rows="4"
            placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..."
            @blur="validateField('description_user')"
          />
          <div class="field-meta">
            <span v-if="errors.description_user" class="error-msg" role="alert">
              {{ errors.description_user }}
            </span>
            <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">
              {{ form.description_user.length }}/500
            </span>
          </div>
        </div>

        <!-- Échelle -->
        <div class="field-group" :class="{ 'field-error': errors.echelle }">
          <fieldset>
            <legend>
              Échelle <span class="required">*</span>
              <span class="label-hint">(une seule)</span>
            </legend>
            <div class="radio-group">
              <label
                v-for="opt in ECHELLES"
                :key="opt"
                class="radio-label"
                :class="{ active: form.echelle === opt }"
              >
                <input
                  type="radio"
                  :value="opt"
                  v-model="form.echelle"
                  name="echelle"
                  @change="validateField('echelle')"
                />
                {{ opt }}
              </label>
            </div>
          </fieldset>
          <span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
        </div>

        <!-- Fonctions -->
        <div class="field-group" :class="{ 'field-error': errors.fonctions }">
          <fieldset>
            <legend>
              Fonctions <span class="required">*</span>
              <span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span>
            </legend>
            <div class="checkbox-grid">
              <label
                v-for="fn in FONCTIONS"
                :key="fn"
                class="checkbox-label"
                :class="{
                  active: form.fonctions.includes(fn),
                  disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5,
                }"
              >
                <input
                  type="checkbox"
                  :value="fn"
                  :checked="form.fonctions.includes(fn)"
                  :disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5"
                  @change="toggleFonction(fn)"
                />
                <span class="fn-order" v-if="form.fonctions.includes(fn)">
                  {{ form.fonctions.indexOf(fn) + 1 }}
                </span>
                {{ fn }}
              </label>
            </div>
          </fieldset>
          <span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
        </div>

        <!-- Territoire -->
        <div class="field-group" :class="{ 'field-error': errors.territoire }">
          <fieldset>
            <legend>
              Territoire <span class="required">*</span>
            </legend>
            <div class="radio-group">
              <label
                v-for="t in TERRITOIRES"
                :key="t"
                class="radio-label"
                :class="{ active: form.territoire === t }"
              >
                <input
                  type="radio"
                  :value="t"
                  v-model="form.territoire"
                  name="territoire"
                  @change="validateField('territoire')"
                />
                {{ t }}
              </label>
            </div>
          </fieldset>
          <span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
        </div>

        <!-- Ville -->
        <div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
          <label for="localisation_ville">
            Ville principale
            <span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span>
          </label>
          <input
            id="localisation_ville"
            v-model="form.localisation_ville"
            type="text"
            placeholder="Ex : Paris, Lyon, Bordeaux..."
          />
          <span v-if="errors.localisation_ville" class="error-msg" role="alert">
            {{ errors.localisation_ville }}
          </span>
        </div>

        <!-- Email -->
        <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
          <label for="submitted_by_email">
            Ton email
            <span class="label-hint">(optionnel — pour le suivi de modération)</span>
          </label>
          <input
            id="submitted_by_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>

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

        <!-- Actions -->
        <div class="form-actions">
          <NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
          <button
            type="submit"
            class="btn-primary"
            :disabled="submitting"
          >
            {{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}
          </button>
        </div>

        <p class="form-note">
          Ta fiche sera examinée par l'équipe avant publication.
        </p>
      </form>
    </div>
  </div>
</template>

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

// ── Constantes ────────────────────────────────────────────────────────────────

const ECHELLES = ['National', 'Régional', 'Local'] as const
const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
const FONCTIONS = [
  'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
  'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
] as const

// ── Schéma Zod (côté client — miroir du serveur) ──────────────────────────────

const SubmitSchema = z.object({
  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
  url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
  echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
  fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
  territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
  localisation_ville: z.string().max(100).optional(),
  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
})

// ── État du formulaire ────────────────────────────────────────────────────────

const form = reactive({
  nom: '',
  url: '',
  description_user: '',
  echelle: '' as typeof ECHELLES[number] | '',
  fonctions: [] as string[],
  territoire: '' as typeof TERRITOIRES[number] | '',
  localisation_ville: '',
  submitted_by_email: '',
})

const errors = reactive<Record<string, string>>({})
const submitting = ref(false)
const success = ref(false)
const serverError = ref('')
const trackingUrl = ref<string | null>(null)

// ── Validation champ par champ ────────────────────────────────────────────────

function validateField(field: string) {
  const partial = SubmitSchema.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 = SubmitSchema.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
}

// ── Gestion fonctions (ordre de clic = priorité) ──────────────────────────────

function toggleFonction(fn: string) {
  const idx = form.fonctions.indexOf(fn)
  if (idx >= 0) {
    form.fonctions.splice(idx, 1)
  } else if (form.fonctions.length < 5) {
    form.fonctions.push(fn)
  }
  validateField('fonctions')
}

// ── Soumission ────────────────────────────────────────────────────────────────

async function submit() {
  serverError.value = ''

  if (!validateAll()) {
    // Scroll vers la première erreur
    await nextTick()
    const firstError = document.querySelector('.field-error')
    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
    return
  }

  submitting.value = true

  try {
    const result: any = await $fetch('/api/submit', {
      method: 'POST',
      body: {
        nom: form.nom,
        url: form.url || undefined,
        description_user: form.description_user,
        echelle: form.echelle,
        fonctions: form.fonctions,
        territoire: form.territoire,
        localisation_ville: form.localisation_ville || undefined,
        submitted_by_email: form.submitted_by_email || undefined,
      },
    })

    trackingUrl.value = result.trackingUrl ?? null
    success.value = true
  } 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) {
      // Erreurs Zod serveur → mapper sur le formulaire
      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
  }
}

function reset() {
  Object.assign(form, {
    nom: '', url: '', description_user: '', echelle: '',
    fonctions: [], territoire: '', localisation_ville: '', submitted_by_email: '',
  })
  Object.keys(errors).forEach(k => delete errors[k])
  success.value = false
  serverError.value = ''
  trackingUrl.value = null
}

// ── Meta ──────────────────────────────────────────────────────────────────────

useHead({ title: 'Proposer une ressource — AEP' })
</script>

<style scoped>
/* ── Layout ─────────────────────────────────────────────────────────────────── */

.contribuer-page {
  min-height: 100vh;
  background: var(--nav-bg);
  padding: 1.5rem 1rem 4rem;
}

.contribuer-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* ── Retour ──────────────────────────────────────────────────────────────────── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--nav-primary-solid);
  opacity: 0.7;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: opacity 0.15s;
}

.back-link:hover {
  opacity: 1;
}

/* ── En-tête ─────────────────────────────────────────────────────────────────── */

.contribuer-header {
  margin-bottom: 2rem;
}

.contribuer-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nav-text);
  margin: 0 0 0.5rem;
}

.contribuer-subtitle {
  font-size: 0.9rem;
  color: var(--nav-text-muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.contribuer-hint {
  font-size: 0.82rem;
  color: var(--nav-text-muted);
  opacity: 0.75;
  line-height: 1.5;
  margin: 0;
}

/* ── Succès ──────────────────────────────────────────────────────────────────── */

.success-block {
  background: var(--nav-surface);
  border: 1px solid rgba(26, 34, 56, 0.15);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.success-icon {
  width: 48px;
  height: 48px;
  background: rgba(26, 34, 56, 0.1);
  color: var(--nav-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

.success-block h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nav-text);
  margin: 0 0 0.5rem;
}

.success-block p {
  font-size: 0.9rem;
  color: var(--nav-text-muted);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.success-detail {
  font-size: 0.85rem !important;
}

.success-tracking {
  font-size: 0.85rem !important;
  margin-top: 1rem !important;
}

.tracking-link {
  color: var(--nav-primary-solid);
  font-size: 0.8rem;
  word-break: break-all;
}

/* ── Formulaire ──────────────────────────────────────────────────────────────── */

.contribuer-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Champ générique ─────────────────────────────────────────────────────────── */

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field-group label,
.field-group legend {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-text);
  display: block;
}

.field-group fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.required {
  color: #c0392b;
}

.label-hint {
  font-weight: 400;
  color: var(--nav-text-muted);
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

.field-group input[type="text"],
.field-group input[type="url"],
.field-group input[type="email"],
.field-group textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(26, 34, 56, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--nav-text);
  background: var(--nav-surface);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.field-group input:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--nav-primary-solid);
  box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
}

.field-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Erreur champ */

.field-error input,
.field-error textarea {
  border-color: #c0392b !important;
}

.error-msg {
  font-size: 0.8rem;
  color: #c0392b;
}

.field-meta {
  display: flex;
  justify-content: flex-end;
}

.char-count {
  font-size: 0.75rem;
  color: var(--nav-text-muted);
}

.char-warn {
  color: #e67e22;
}

/* ── Radio (Échelle + Territoire) ────────────────────────────────────────────── */

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(26, 34, 56, 0.2);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--nav-text);
  background: var(--nav-surface);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-label:hover {
  border-color: var(--nav-primary-solid);
  background: var(--nav-bg-alt);
}

.radio-label.active {
  background: var(--nav-primary);
  border-color: transparent;
  color: var(--nav-text-on-primary);
}

/* ── Checkboxes (Fonctions) ──────────────────────────────────────────────────── */

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

@media (max-width: 400px) {
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(26, 34, 56, 0.2);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--nav-text);
  background: var(--nav-surface);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  position: relative;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-label:hover:not(.disabled) {
  border-color: var(--nav-primary-solid);
  background: var(--nav-bg-alt);
}

.checkbox-label.active {
  background: var(--nav-primary);
  border-color: transparent;
  color: var(--nav-text-on-primary);
}

.checkbox-label.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fn-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--nav-accent);
  color: var(--nav-text);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Erreur serveur ──────────────────────────────────────────────────────────── */

.server-error {
  padding: 0.875rem 1rem;
  background: #fdf0ee;
  border: 1px solid #e74c3c;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #c0392b;
}

/* ── Actions ──────────────────────────────────────────────────────────────────── */

.form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--nav-primary);
  color: var(--nav-text-on-primary);
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s;
}

.btn-primary:hover:not(:disabled) {
  background: rgba(26, 34, 56, 0.75);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 0.75rem 1.25rem;
  background: transparent;
  color: var(--nav-text-muted);
  border: 1px solid rgba(26, 34, 56, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}

.btn-secondary:hover {
  border-color: var(--nav-primary-solid);
  color: var(--nav-text);
}

.form-note {
  font-size: 0.75rem;
  color: var(--nav-text-muted);
  text-align: center;
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .contribuer-page {
    padding: 1rem 0.75rem 3rem;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
</style>
