<template>
  <div class="settings-page">
    <section class="page-hero">
      <div class="container">
        <h1>Настройки профиля</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <form @submit.prevent="handleUpdate" class="settings-page__form">
          <div class="form-group">
            <label class="form-label">Имя</label>
            <input
              v-model="form.name"
              type="text"
              class="form-input"
              required
            />
          </div>

          <div class="form-group">
            <label class="form-label">Email</label>
            <input
              v-model="form.email"
              type="email"
              class="form-input"
              required
            />
          </div>

          <div class="form-group">
            <label class="form-label">Телефон</label>
            <input
              v-model="form.phone"
              type="tel"
              class="form-input"
              placeholder="+7 (XXX) XXX-XX-XX"
            />
          </div>

          <button type="submit" class="btn btn--primary btn--md" :disabled="saving">
            {{ saving ? 'Сохранение...' : 'Сохранить' }}
          </button>

          <p v-if="success" class="settings-page__success">Профиль обновлён</p>
          <p v-if="error" class="settings-page__error">{{ error }}</p>
        </form>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Настройки',
  middleware: 'auth',
})

const { user, fetchUser } = useAuth()

const form = reactive({
  name: user.value?.name || '',
  email: user.value?.email || '',
  phone: user.value?.phone || '',
})
const saving = ref(false)
const success = ref(false)
const error = ref('')

watch(user, (u) => {
  if (u) {
    form.name = u.name
    form.email = u.email
    form.phone = u.phone || ''
  }
})

async function handleUpdate() {
  saving.value = true
  success.value = false
  error.value = ''
  try {
    const api = useApi()
    await api.put('/me', {
      name: form.name,
      email: form.email,
      phone: form.phone || undefined,
    })
    success.value = true
    await fetchUser()
  } catch (e: any) {
    error.value = e.message || 'Ошибка обновления'
  } finally {
    saving.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);
}

.settings-page__form {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

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

.settings-page__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>
