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

      <h1>Signaler un problème</h1>
      <p class="signaler-subtitle">
        Un bug, un contenu inapproprié, ou une suggestion ? Décris le problème ci-dessous.
      </p>

      <!-- Succès -->
      <div v-if="success" class="success-block" role="status">
        <div class="success-icon">✓</div>
        <h2>Merci pour ton retour !</h2>
        <p>Le signalement a été envoyé. On s'en occupe.</p>
        <button type="button" class="btn-secondary" @click="reset">Envoyer un autre signalement</button>
      </div>

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

        <!-- Catégorie -->
        <div class="field-group">
          <fieldset>
            <legend>Ça concerne</legend>
            <div class="radio-group">
              <label
                v-for="cat in CATEGORIES"
                :key="cat"
                class="radio-label"
                :class="{ active: form.category === cat }"
              >
                <input type="radio" :value="cat" v-model="form.category" name="category" />
                {{ cat }}
              </label>
            </div>
          </fieldset>
        </div>

        <!-- Description -->
        <div class="field-group">
          <label for="description">Description</label>
          <textarea
            id="description"
            v-model="form.description"
            rows="4"
            placeholder="Décris le problème..."
          />
        </div>

        <!-- Email (optionnel) -->
        <div class="field-group">
          <label for="email">
            Ton email
            <span class="label-hint">(optionnel — pour un suivi)</span>
          </label>
          <input id="email" v-model="form.email" type="email" placeholder="ton@email.fr" />
        </div>

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

        <div class="form-actions">
          <NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
          <button
            type="submit"
            class="btn-primary"
            :disabled="submitting || !form.category || !form.description.trim()"
          >
            {{ submitting ? 'Envoi...' : 'Envoyer le signalement' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
const CATEGORIES = ['Une fiche', 'Le chatbot', 'La carte', 'Autre'] as const

const form = reactive({
  category: '' as string,
  description: '',
  email: '',
})

const submitting = ref(false)
const success = ref(false)
const serverError = ref('')

async function submit() {
  serverError.value = ''
  submitting.value = true
  try {
    await $fetch('/api/report-general', {
      method: 'POST',
      body: {
        category: form.category,
        description: form.description,
        email: form.email || undefined,
      },
    })
    success.value = true
  } catch (e: any) {
    serverError.value = e?.data?.message || 'Erreur lors de l\'envoi. Réessaie.'
  } finally {
    submitting.value = false
  }
}

function reset() {
  Object.assign(form, { category: '', description: '', email: '' })
  success.value = false
  serverError.value = ''
}

useHead({ title: 'Signaler un problème — AEP' })
</script>

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

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

.signaler-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 ─────────────────────────────────────────────────────────────────── */

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

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

/* ── 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 1rem;
  line-height: 1.5;
}

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

.signaler-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;
}

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

.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;
}

/* ── Radio (Catégorie) ────────────────────────────────────────────────────────── */

.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);
}

/* ── 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);
}

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

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

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

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