<template>
  <div class="page-wrapper">

    <main class="help-page">
      <div class="container">
        <!-- Заголовок страницы -->
        <div class="page-header">
          <h1 class="page-title">Помощь и поддержка</h1>
          <p class="page-subtitle">
            Мы всегда готовы помочь вам! Выберите удобный способ связи или найдите ответ в часто задаваемых вопросах.
          </p>
        </div>

        <div class="help-content">
          <!-- Контактная форма -->
          <div class="contact-section">
            <div class="card">
              <div class="card-header">
                <h2 class="card-title">Написать в поддержку</h2>
                <p class="card-description">
                  Отправьте нам сообщение через Telegram, и мы ответим в ближайшее время
                </p>
              </div>
              
              <div class="card-body">
                <form @submit.prevent="sendMessage" class="contact-form">
                  <div class="form-group">
                    <label for="name" class="form-label">Ваше имя</label>
                    <input
                      id="name"
                      v-model="form.name"
                      type="text"
                      class="form-input"
                      placeholder="Как к вам обращаться?"
                      required
                    />
                  </div>

                  <div class="form-group">
                    <label for="email" class="form-label">Email для ответа</label>
                    <input
                      id="email"
                      v-model="form.email"
                      type="email"
                      class="form-input"
                      placeholder="your@email.com"
                      required
                    />
                  </div>

                  <div class="form-group">
                    <label for="category" class="form-label">Тема обращения</label>
                    <select
                      id="category"
                      v-model="form.category"
                      class="form-select"
                      required
                    >
                      <option value="" disabled>Выберите тему</option>
                      <option value="technical">Техническая проблема</option>
                      <option value="account">Вопросы аккаунта</option>
                      <option value="payment">Оплата и тарифы</option>
                      <option value="feature">Предложение по улучшению</option>
                      <option value="other">Другое</option>
                    </select>
                  </div>

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

                  <div class="form-actions">
                    <button
                      type="submit"
                      class="btn btn-primary btn-large"
                      :disabled="loading"
                    >
                      <span v-if="loading" class="btn-loading">
                        <span class="btn-spinner"></span>
                        Отправка...
                      </span>
                      <span v-else class="btn-with-icon">
                        <span class="btn-icon">📤</span>
                        Отправить через Telegram
                      </span>
                    </button>

                    <!-- Быстрая отправка через промпт -->
                    <button
                      type="button"
                      class="btn btn-outline"
                      @click="sendQuickMessage"
                      :disabled="loading"
                    >
                      <span class="btn-with-icon">
                        <span class="btn-icon">⚡</span>
                        Быстрое сообщение
                      </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <!-- Альтернативные способы связи -->
          <div class="contact-methods">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Другие способы связи</h3>
              </div>
              
              <div class="card-body">
                <div class="contact-cards">
                  <div class="contact-card">
                    <div class="contact-card__icon">📞</div>
                    <div class="contact-card__content">
                      <h4 class="contact-card__title">Телефон</h4>
                      <p class="contact-card__description">
                        Позвоните нам для срочной помощи
                      </p>
                      <a href="tel:+79625439343" class="contact-card__link">
                        +7 (962) 543-93-43
                      </a>
                    </div>
                  </div>

                  <div class="contact-card">
                    <div class="contact-card__icon">✉️</div>
                    <div class="contact-card__content">
                      <h4 class="contact-card__title">Email</h4>
                      <p class="contact-card__description">
                        Напишите на почту для детального ответа
                      </p>
                      <a href="mailto:valitovgaziz@yandex.ru" class="contact-card__link">
                        valitovgaziz@yandex.ru
                      </a>
                    </div>
                  </div>

                  <div class="contact-card">
                    <div class="contact-card__icon">💬</div>
                    <div class="contact-card__content">
                      <h4 class="contact-card__title">Telegram чат</h4>
                      <p class="contact-card__description">
                        Написать напрямую в Telegram
                      </p>
                      <a 
                        href="https://t.me/+oYymS0r6qG9lYWJi" 
                        target="_blank" 
                        class="contact-card__link"
                      >
                        Перейти в чат
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- FAQ секция -->
          <div class="faq-section">
            <div class="card">
              <div class="card-header">
                <h2 class="card-title">Часто задаваемые вопросы</h2>
              </div>
              
              <div class="card-body">
                <div class="faq-list">
                  <div 
                    v-for="(faq, index) in faqs" 
                    :key="index" 
                    class="faq-item"
                    :class="{ 'faq-item--active': activeFaq === index }"
                  >
                    <button 
                      class="faq-question"
                      @click="toggleFaq(index)"
                    >
                      <span class="faq-question__text">{{ faq.question }}</span>
                      <span class="faq-question__icon">
                        {{ activeFaq === index ? '−' : '+' }}
                      </span>
                    </button>
                    
                    <div class="faq-answer">
                      <p>{{ faq.answer }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

  </div>
</template>

<script setup lang="ts">

// Используем существующий композибл
const { sendMessageToTelegram, sendMessageWithPrompt } = useTelegram()

// Состояние формы
const form = reactive({
  name: '',
  email: '',
  category: '',
  message: ''
})

const loading = ref(false)
const activeFaq = ref<number | null>(null)

// FAQ данные
const faqs = [
  {
    question: 'Как создать сайт на вашей платформе?',
    answer: 'Зарегистрируйтесь на платформе, добавьте информацию о своих услугах в личном кабинете, и система автоматически создаст для вас готовый сайт.'
  },
  {
    question: 'Сколько стоит использование платформы?',
    answer: 'У нас есть несколько тарифных планов, включая бесплатный вариант. Подробности можно посмотреть в разделе "Тарифы".'
  },
  {
    question: 'Можно ли изменить дизайн сайта?',
    answer: 'Да, в личном кабинете доступны различные настройки внешнего вида вашего сайта, включая цвета, шрифты и расположение блоков.'
  },
  {
    question: 'Как добавить новые услуги?',
    answer: 'В разделе "Мои объекты" вы можете добавлять, редактировать и удалять услуги. Все изменения сразу отображаются на вашем сайте.'
  },
  {
    question: 'Техническая поддержка работает круглосуточно?',
    answer: 'Мы отвечаем на обращения в рабочее время (Пн-Пт 9:00-18:00), но срочные технические проблемы решаем оперативно в любое время.'
  }
]

// Методы
const toggleFaq = (index: number) => {
  activeFaq.value = activeFaq.value === index ? null : index
}

const sendMessage = async () => {
  if (loading.value) return

  loading.value = true

  try {
    // Формируем сообщение для Telegram
    const telegramMessage = `
🆘 Новое обращение в поддержку

👤 Имя: ${form.name}
📧 Email: ${form.email}
🏷️ Тема: ${getCategoryLabel(form.category)}
📝 Сообщение:
${form.message}
    `.trim()

    // Отправляем сообщение через существующий композибл
    const result = await sendMessageToTelegram(telegramMessage)

    if (result.success) {
      // Очищаем форму после успешной отправки
      form.name = ''
      form.email = ''
      form.category = ''
      form.message = ''
      
      // Показываем уведомление об успехе
      alert('Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.')
    } else {
      throw new Error(result.error || 'Ошибка отправки')
    }
  } catch (error) {
    console.error('Ошибка отправки сообщения:', error)
    alert('Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте еще раз или используйте другой способ связи.')
  } finally {
    loading.value = false
  }
}

// Быстрая отправка через промпт (используем существующий метод)
const sendQuickMessage = () => {
  sendMessageWithPrompt()
}

const getCategoryLabel = (category: string) => {
  const categories: { [key: string]: string } = {
    technical: 'Техническая проблема',
    account: 'Вопросы аккаунта',
    payment: 'Оплата и тарифы',
    feature: 'Предложение по улучшению',
    other: 'Другое'
  }
  return categories[category] || category
}

// Устанавливаем мета-информацию для страницы
definePageMeta({
  title: 'Помощь и поддержка'
})

useSeoMeta({
  title: 'Помощь и поддержка - EasySite',
  description: 'Получите помощь по использованию платформы EasySite. Техническая поддержка, часто задаваемые вопросы и контакты.'
})
</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.help-page {
  flex: 1;
  padding: 2rem 0;
  background: var(--bg-secondary);
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.help-content {
  display: grid;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-section,
.faq-section {
  grid-column: 1 / -1;
}

.contact-methods {
  grid-column: 1 / -1;
}

.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.card-description {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.card-body {
  padding: var(--space-xl);
}

/* Стили формы */
.contact-form {
  max-width: 600px;
}

.form-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
}

.btn-primary {
  background: var(--primary-500);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--border-medium);
  color: var(--text-secondary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--primary-500);
  color: var(--primary-500);
  transform: translateY(-2px);
}

.btn-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  font-size: 1.2rem;
}

/* Стили контактных карточек */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.contact-card:hover {
  border-color: var(--primary-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-card__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.contact-card__content {
  flex: 1;
}

.contact-card__title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.contact-card__description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
  line-height: var(--leading-relaxed);
}

.contact-card__link {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color 0.3s ease;
}

.contact-card__link:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

/* Стили FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item--active {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: 1.5rem;
  background: var(--bg-primary);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: var(--bg-secondary);
}

.faq-question__text {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  flex: 1;
}

.faq-question__icon {
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  color: var(--primary-500);
  flex-shrink: 0;
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item--active .faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-height: 500px;
}

.faq-answer p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Адаптивность */
@media (max-width: 768px) {
  .help-page {
    padding: 1.5rem 0;
  }

  .page-title {
    font-size: var(--text-3xl);
  }

  .page-subtitle {
    font-size: var(--text-base);
  }

  .card-header,
  .card-body {
    padding: var(--space-lg);
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-card {
    flex-direction: column;
    text-align: center;
  }

  .faq-question {
    padding: 1.25rem;
  }

  .faq-question__text {
    font-size: var(--text-base);
  }

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

  .btn,
  .btn-large {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .help-page {
    padding: 1rem 0;
  }

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

  .page-title {
    font-size: var(--text-2xl);
  }

  .card-title {
    font-size: var(--text-xl);
  }

  .contact-card {
    padding: 1.25rem;
  }
}
</style>