<template>
  <div class="appeals">
    <section class="page-hero">
      <div class="container">
        <h1>Обращения</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div v-if="!isAuthenticated" class="appeals__guest">
          <p class="body-text--gray">Войдите, чтобы создать обращение</p>
          <NuxtLink to="/auth/login" class="btn btn--primary btn--md">
            Войти
          </NuxtLink>
        </div>

        <form v-else @submit.prevent="handleSubmit" class="appeals__form">
          <div class="form-group">
            <label class="form-label">Тема обращения</label>
            <select v-model="form.subject" class="form-select" required>
              <option value="">Выберите тему</option>
              <option value="bug">Ошибка на сайте</option>
              <option value="suggestion">Предложение</option>
              <option value="question">Вопрос</option>
              <option value="other">Другое</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Сообщение</label>
            <textarea
              v-model="form.message"
              class="form-input"
              rows="6"
              placeholder="Опишите ваше обращение"
              required
            ></textarea>
          </div>

          <button type="submit" class="btn btn--primary btn--md" :disabled="sending">
            {{ sending ? 'Отправка...' : 'Отправить' }}
          </button>

          <p v-if="success" class="appeals__success">
            Обращение отправлено
          </p>
          <p v-if="error" class="appeals__error">{{ error }}</p>
        </form>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Обращения',
})

const { isAuthenticated } = useAuth()

const form = reactive({
  subject: '',
  message: '',
})
const sending = ref(false)
const success = ref(false)
const error = ref('')

async function handleSubmit() {
  sending.value = true
  success.value = false
  error.value = ''
  try {
    const api = useApi()
    await api.post('/appeals', {
      subject: form.subject,
      message: form.message,
    })
    success.value = true
    form.subject = ''
    form.message = ''
  } catch (e: any) {
    error.value = e.message || 'Ошибка отправки'
  } finally {
    sending.value = false
  }
}
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.appeals__guest {
  text-align: center;
  padding: 60px 0;
}

.appeals__form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.appeals__success {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-green-accent);
  padding: 8px;
  background: var(--color-bg-success);
  border-radius: var(--radius-sm);
}

.appeals__error {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-red);
  padding: 8px;
  background: var(--color-bg-error);
  border-radius: var(--radius-sm);
}
</style>
