<!--
  Copyright (c) 2024-2026 Тарабанов Александр Викторович
  All rights reserved.
  
  This software is proprietary and confidential.
  Unauthorized copying, modification, or distribution is prohibited.
  
  For licensing inquiries: info@hb3-accelerator.com
  Website: https://hb3-accelerator.com
  GitHub: https://github.com/VC-HB3-Accelerator
-->

<template>
  <BaseLayout
    :is-authenticated="isAuthenticated"
    :identities="identities"
    :token-balances="tokenBalances"
    :is-loading-tokens="isLoadingTokens"
    @auth-action-completed="$emit('auth-action-completed')"
  >
    <div class="content-create-page">
      <!-- Основной контент с тенью -->
      <div class="content-block">
        <form class="content-form" @submit.prevent="handleSubmit">
          <!-- Параметры документа -->
          <div class="form-section">
            <h2>Параметры документа</h2>
            <div class="form-group">
              <label for="visibility">Видимость</label>
              <select v-model="form.visibility" id="visibility" class="form-select">
                <option value="public">Публичный</option>
                <option value="internal">Внутренний</option>
              </select>
            </div>
            <div class="form-group" v-if="form.visibility === 'internal'">
              <label for="required-permission">Уровень доступа к документу</label>
              <select
                v-model="form.requiredPermission"
                id="required-permission"
                class="form-select"
              >
                <option value="">— Выберите роль —</option>
                <option :value="PERMISSIONS.VIEW_BASIC_DOCS">Пользователь</option>
                <option :value="PERMISSIONS.VIEW_LEGAL_DOCS">Читатель</option>
                <option :value="PERMISSIONS.MANAGE_LEGAL_DOCS">Редактор</option>
              </select>
            </div>
            <div class="form-group">
              <label for="format">Формат</label>
              <select v-model="form.format" id="format" class="form-select">
                <option value="html">HTML (встроенный)</option>
                <option value="pdf" disabled>PDF (загрузка файла) — скоро</option>
                <option value="image" disabled>Изображение (PNG/JPG) — скоро</option>
              </select>
            </div>
            <div class="form-group" v-if="form.visibility === 'public'">
              <label class="checkbox-label">
                <input
                  v-model="form.showInBlog"
                  type="checkbox"
                  class="form-checkbox"
                />
                <span>Показывать в блоге</span>
              </label>
              <p class="form-hint">
                Если отмечено, страница будет отображаться на странице блога (/blog)
              </p>
            </div>
            <p class="form-hint">
              Для HTML-постов переменные подставляются при рендере. Реквизиты заполняются на странице настроек контента.
            </p>
          </div>
          <!-- Основная информация -->
          <div class="form-section">
            <h2>Основная информация</h2>
            <div class="form-group">
              <label for="title">Заголовок страницы *</label>
              <input 
                v-model="form.title" 
                id="title" 
                type="text" 
                required 
                placeholder="Введите заголовок страницы"
                class="form-input"
              />
            </div>
            <div class="form-group">
              <label for="summary">Краткое описание *</label>
              <textarea 
                v-model="form.summary" 
                id="summary" 
                required 
                rows="3" 
                placeholder="Краткое описание страницы"
                class="form-textarea"
              />
            </div>
            <div class="form-group">
              <label for="category">Раздел</label>
              <div class="category-select-wrapper">
                <select 
                  v-model="form.category" 
                  id="category" 
                  class="form-select"
                >
                  <option value="">— Без раздела —</option>
                  <option v-for="cat in categories" :key="cat" :value="cat">
                    {{ cat }}
                  </option>
                </select>
                <button 
                  type="button" 
                  class="btn btn-outline btn-add-section"
                  @click="handleAddSection"
                >
                  <i class="fas fa-plus"></i>
                  Добавить раздел
                </button>
              </div>
            </div>
          </div>

          <!-- Контент -->
          <div class="form-section">
            <h2>Содержание</h2>
            <div class="form-group" v-if="form.format === 'html'">
              <label for="content">Основной контент *</label>
              <RichTextEditor
                v-model="form.content"
                placeholder="Введите основной контент страницы"
              />
              <div class="content-stats">
                <span>Слов: {{ wordCount }}</span>
                <span>Символов: {{ characterCount }}</span>
              </div>
            </div>
            <div class="form-group" v-else>
              <label for="file">Файл (PDF/PNG/JPG) *</label>
              <input id="file" type="file" accept="application/pdf,image/png,image/jpeg" @change="onFileChange" class="form-input" />
              <p class="form-hint" v-if="fileName">Выбран файл: {{ fileName }}</p>
            </div>
          </div>

          <!-- SEO настройки -->
          <div class="form-section">
            <h2>SEO настройки</h2>
            <div class="form-group">
              <label for="seo-title">Meta Title</label>
              <input 
                v-model="form.seo.title" 
                id="seo-title" 
                type="text" 
                placeholder="SEO заголовок (если отличается от основного)"
                class="form-input"
              />
            </div>
            <div class="form-group">
              <label for="seo-description">Meta Description</label>
              <textarea 
                v-model="form.seo.description" 
                id="seo-description" 
                rows="3" 
                placeholder="SEO описание для поисковых систем"
                class="form-textarea"
              />
            </div>
            <div class="form-group">
              <label for="seo-keywords">Keywords</label>
              <input 
                v-model="form.seo.keywords" 
                id="seo-keywords" 
                type="text" 
                placeholder="Ключевые слова через запятую"
                class="form-input"
              />
            </div>
          </div>


          <!-- Кнопки действий -->
          <div class="form-actions">
            <button type="button" class="btn btn-outline" @click="goBack">
              <i class="fas fa-times"></i>
              Отмена
            </button>
            <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
              <i class="fas fa-globe"></i>
              {{ isSubmitting ? 'Публикация...' : 'Опубликовать' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </BaseLayout>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import BaseLayout from '../components/BaseLayout.vue';
import RichTextEditor from '../components/editor/RichTextEditor.vue';
import pagesService from '../services/pagesService';
import { PERMISSIONS } from './permissions.js';
import { useAuthContext } from '../composables/useAuth';
import { usePermissions } from '../composables/usePermissions';

// Props
const props = defineProps({
  isAuthenticated: {
    type: Boolean,
    default: false
  },
  identities: {
    type: Array,
    default: () => []
  },
  tokenBalances: {
    type: Object,
    default: () => ({})
  },
  isLoadingTokens: {
    type: Boolean,
    default: false
  }
});

// Emits
const emit = defineEmits(['auth-action-completed']);

const router = useRouter();
const route = useRoute();
const PERMISSIONS_REF = PERMISSIONS; // для шаблона

// Проверка прав доступа
const { address } = useAuthContext();
const { hasPermission } = usePermissions();
const canManageLegalDocs = computed(() => hasPermission(PERMISSIONS.MANAGE_LEGAL_DOCS));

// Режим редактирования
const isEditMode = computed(() => !!route.query.edit);
const editId = computed(() => route.query.edit);

// Состояние формы
const form = ref({
  title: '',
  summary: '',
  content: '',
  seo: {
    title: '',
    description: '',
    keywords: ''
  },
  settings: {
    autoPublish: false
  },
  status: 'published',
  visibility: 'public',
  requiredPermission: '',
  format: 'html',
  category: '',
  showInBlog: false
});

// Список категорий
const categories = ref([]);

const isSubmitting = ref(false);
const fileBlob = ref(null);
const fileName = ref('');

// Вычисляемые свойства
const wordCount = computed(() => {
  return form.value.content ? form.value.content.split(/\s+/).length : 0;
});

const characterCount = computed(() => {
  return form.value.content ? form.value.content.length : 0;
});

// Методы
function goBack() {
  router.push({ name: 'content-list' });
}

async function deletePage() {
  if (!isEditMode.value || !editId.value) {
    return;
  }
  
  if (!confirm('Вы уверены, что хотите удалить эту страницу? Это действие нельзя отменить. Все связанные файлы также будут удалены.')) {
    return;
  }
  
  try {
    await pagesService.deletePage(editId.value);
    router.push({ name: 'content-list' });
  } catch (error) {
    console.error('Ошибка удаления страницы:', error);
    alert('Ошибка при удалении страницы: ' + (error?.response?.data?.error || error?.message || 'Неизвестная ошибка'));
  }
}

function onFileChange(e) {
  const f = e.target.files && e.target.files[0];
  if (f) {
    fileBlob.value = f;
    fileName.value = f.name;
  } else {
    fileBlob.value = null;
    fileName.value = '';
  }
}

// Загрузка категорий
async function loadCategories() {
  try {
    const cats = await pagesService.getCategories();
    categories.value = cats || [];
  } catch (error) {
    console.error('Ошибка загрузки категорий:', error);
    categories.value = [];
  }
}

// Обработка добавления нового раздела
async function handleAddSection() {
  const newCategory = prompt('Введите название нового раздела:');
  if (!newCategory || !newCategory.trim()) {
    return;
  }
  
  const trimmedCategory = newCategory.trim();
  const normalizedCategory = trimmedCategory.toLowerCase();
  
  // Проверяем, не существует ли уже такая категория
  if (categories.value.includes(normalizedCategory)) {
    alert('Раздел с таким названием уже существует');
    form.value.category = normalizedCategory;
    return;
  }
  
  try {
    // Создаем категорию через API
    const createdCategory = await pagesService.createCategory(
      normalizedCategory,
      trimmedCategory, // display_name
      null, // description
      0 // order_index
    );
    
    console.log('[ContentPageView] Категория создана:', createdCategory);
    
    // Обновляем список категорий
    await loadCategories();
    
    // Устанавливаем созданную категорию в форму
    form.value.category = normalizedCategory;
    
    alert(`Раздел "${trimmedCategory}" успешно создан`);
  } catch (error) {
    console.error('[ContentPageView] Ошибка создания раздела:', error);
    const errorMessage = error.response?.data?.error || error.message || 'Неизвестная ошибка';
    
    // Если категория уже существует на сервере, просто добавляем её в список
    if (errorMessage.includes('уже существует') || error.response?.status === 409) {
      await loadCategories();
      form.value.category = normalizedCategory;
      alert('Раздел с таким названием уже существует');
    } else {
      alert('Ошибка создания раздела: ' + errorMessage);
    }
  }
}

// Загрузка данных для редактирования
async function loadPageForEdit() {
  if (!isEditMode.value || !editId.value) return;
  
  try {
    const page = await pagesService.getPage(editId.value);
    if (page) {
      form.value.title = page.title || '';
      form.value.summary = page.summary || '';
      form.value.content = page.content || '';
      form.value.seo.title = page.seo?.title || '';
      form.value.seo.description = page.seo?.description || '';
      form.value.seo.keywords = page.seo?.keywords || '';
      form.value.status = page.status || 'draft';
      form.value.visibility = page.visibility || 'public';
      form.value.requiredPermission = page.required_permission || '';
      form.value.format = page.format || 'html';
      form.value.category = page.category || '';
      form.value.showInBlog = page.show_in_blog === true || page.show_in_blog === 'true';
    }
  } catch (error) {
    console.error('Ошибка загрузки страницы для редактирования:', error);
    alert('Ошибка загрузки данных страницы');
  }
}

async function handleSubmit() {
  if (!form.value.title.trim()) {
    alert('Заполните заголовок страницы!');
    return;
  }

  if (!form.value.summary.trim()) {
    alert('Заполните описание страницы!');
    return;
  }

  if (form.value.format === 'html') {
    // Проверяем, что контент не пустой (учитываем только видимый текст, без HTML тегов)
    const textContent = form.value.content.replace(/<[^>]*>/g, '').trim();
    if (!textContent) {
      alert('Заполните контент страницы!');
      return;
    }
  } else {
    if (!fileBlob.value) {
      alert('Загрузите файл документа!');
      return;
    }
  }

  try {
    isSubmitting.value = true;
    
    let page;
    if (isEditMode.value) {
      // Режим редактирования
      if (form.value.format === 'html') {
        const pageData = {
          title: form.value.title.trim(),
          summary: form.value.summary.trim(),
          // Сохраняем контент без обрезки пробелов в начале/конце, чтобы сохранить форматирование
          // Удаляем только пробелы в самом начале и конце, но сохраняем пробелы внутри
          content: form.value.content.replace(/^\s+/, '').replace(/\s+$/, ''),
          seo: form.value.seo,
          status: form.value.status,
          settings: form.value.settings,
          visibility: form.value.visibility,
          required_permission: form.value.visibility === 'internal' && form.value.requiredPermission
            ? form.value.requiredPermission.trim()
            : null,
          format: form.value.format,
          mime_type: 'text/html',
          storage_type: 'embedded',
          category: form.value.category || null,
          show_in_blog: form.value.visibility === 'public' ? form.value.showInBlog : false
        };
        page = await pagesService.updatePage(editId.value, pageData);
      } else {
        // Отправляем как FormData для редактирования
        const fd = new FormData();
        fd.append('title', form.value.title.trim());
        fd.append('summary', form.value.summary.trim());
        fd.append('seo', JSON.stringify(form.value.seo));
        fd.append('status', form.value.status);
        fd.append('settings', JSON.stringify(form.value.settings));
        fd.append('visibility', form.value.visibility);
        // Всегда отправляем required_permission:
        // - Если visibility = public, отправляем пустую строку (будет установлен null на бэкенде)
        // - Если visibility = internal, отправляем значение или пустую строку
        if (form.value.visibility === 'internal' && form.value.requiredPermission) {
          fd.append('required_permission', form.value.requiredPermission.trim());
        } else {
          // Явно устанавливаем пустое значение для public страниц
          fd.append('required_permission', '');
        }
        fd.append('format', form.value.format);
        if (form.value.visibility === 'public') {
          fd.append('show_in_blog', form.value.showInBlog ? 'true' : 'false');
        } else {
          fd.append('show_in_blog', 'false');
        }
        if (fileBlob.value) {
          fd.append('file', fileBlob.value);
        }
        page = await pagesService.updatePage(editId.value, fd, true);
      }
    } else {
      // Режим создания
      if (form.value.format === 'html') {
        const pageData = {
          title: form.value.title.trim(),
          summary: form.value.summary.trim(),
          // Сохраняем контент без обрезки пробелов в начале/конце, чтобы сохранить форматирование
          // Удаляем только пробелы в самом начале и конце, но сохраняем пробелы внутри
          content: form.value.content.replace(/^\s+/, '').replace(/\s+$/, ''),
          seo: form.value.seo,
          status: form.value.status,
          settings: form.value.settings,
          visibility: form.value.visibility,
          required_permission: form.value.visibility === 'internal' && form.value.requiredPermission
            ? form.value.requiredPermission.trim()
            : null,
          format: form.value.format,
          mime_type: 'text/html',
          storage_type: 'embedded',
          category: form.value.category || null,
          show_in_blog: form.value.visibility === 'public' ? form.value.showInBlog : false
        };
        page = await pagesService.createPage(pageData);
      } else {
        // Отправляем как FormData
        const fd = new FormData();
        fd.append('title', form.value.title.trim());
        fd.append('summary', form.value.summary.trim());
        fd.append('seo', JSON.stringify(form.value.seo));
        fd.append('status', form.value.status);
        fd.append('settings', JSON.stringify(form.value.settings));
        fd.append('visibility', form.value.visibility);
        // Всегда отправляем required_permission:
        // - Если visibility = public, отправляем пустую строку (будет установлен null на бэкенде)
        // - Если visibility = internal, отправляем значение или пустую строку
        if (form.value.visibility === 'internal' && form.value.requiredPermission) {
          fd.append('required_permission', form.value.requiredPermission.trim());
        } else {
          // Явно устанавливаем пустое значение для public страниц
          fd.append('required_permission', '');
        }
        fd.append('format', form.value.format);
        if (form.value.visibility === 'public') {
          fd.append('show_in_blog', form.value.showInBlog ? 'true' : 'false');
        } else {
          fd.append('show_in_blog', 'false');
        }
        fd.append('file', fileBlob.value);
        page = await pagesService.createPage(fd, true);
      }
    }
    
    if (!page || !page.id) {
      throw new Error(isEditMode.value ? 'Страница не была обновлена' : 'Страница не была создана');
    }

    // Перенаправляем на список страниц
    router.push({ name: 'content-list' });
  } catch (error) {
    console.error('Ошибка при создании страницы:', error);
    alert('Ошибка при создании страницы: ' + (error?.message || error));
  } finally {
    isSubmitting.value = false;
  }
}

// Следим за изменением видимости и сбрасываем showInBlog для internal страниц
watch(() => form.value.visibility, (newVisibility) => {
  if (newVisibility === 'internal') {
    form.value.showInBlog = false;
  }
});

// Загрузка данных при монтировании
onMounted(async () => {
  // Проверяем права доступа
  if (!canManageLegalDocs.value || !address.value) {
    router.push({ name: 'content-list' });
    return;
  }
  
  // Загружаем категории
  await loadCategories();
  
  if (isEditMode.value) {
    await loadPageForEdit();
  }
});
</script>

<style scoped>
.content-create-page {
  padding: 20px;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.header-content {
  flex: 1;
}

.header-content h1 {
  color: var(--color-primary);
  font-size: 2.5rem;
  margin: 0 0 10px 0;
}

.header-content p {
  color: var(--color-grey-dark);
  font-size: 1.1rem;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-grey-dark);
  cursor: pointer;
  padding: 0 10px;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: var(--color-primary);
}

.content-block {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-form {
  background: white;
  border-radius: var(--radius-sm);
  padding: 30px;
  border: 1px solid #e9ecef;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.form-section {
  margin-bottom: 30px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h2 {
  color: var(--color-primary);
  margin: 0 0 20px 0;
  font-size: 1.3rem;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-grey-dark);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 114, 217, 0.1);
}

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

.content-stats {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-grey-dark);
}

/* Стили для видео в редакторе */
.content-form :deep(video) {
  max-width: 100%;
  width: 100%;
  height: auto;
  min-height: 400px;
  border-radius: 8px;
  margin: 1.5rem 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #000;
}

.content-form :deep(video.ql-video) {
  width: 100%;
  max-width: 100%;
  min-height: 400px;
}

.content-form :deep(video:focus) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Стили для iframe в редакторе (для внешних видео) */
.content-form :deep(iframe) {
  max-width: 100%;
  width: 100%;
  height: auto;
  min-height: 400px;
  border-radius: 8px;
  margin: 1.5rem 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #000;
  border: none;
}

.content-form :deep(iframe.ql-video) {
  min-height: 400px;
  aspect-ratio: 16 / 9;
}

.content-form :deep(iframe:focus) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Стили для изображений в редакторе */
.content-form :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-select-wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.category-select-wrapper .form-select {
  flex: 1;
}

.btn-add-section {
  white-space: nowrap;
  padding: 12px 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: normal;
}

.form-checkbox {
  width: auto;
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.btn-outline {
  background: white;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .content-stats {
    flex-direction: column;
    gap: 5px;
  }
}
</style> 