<template>
  <SlidePanel 
    :show="show" 
    @close="handleClose"
  >
    <template #header>
      <div class="editor-panel-header">
        <div v-if="avatarUrl" class="editor-author-avatar">
          <img :src="avatarUrl" alt="">
        </div>
        <div class="editor-header-text">
          <h2>{{ title }}</h2>
          <span v-if="subtitle" class="editor-author-name">{{ subtitle }}</span>
        </div>
      </div>
    </template>

    <div class="editor-panel-content">
      <!-- Редактор текста -->
      <div class="editor-form-section">
        <div class="editor-form-label">
          <span>{{ textLabel }}</span>
          <div class="format-buttons">
            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('bold')" title="Жирный">
              <i data-lucide="bold"></i>
            </button>
            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('italic')" title="Курсив">
              <i data-lucide="italic"></i>
            </button>
            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('underline')" title="Подчёркивание">
              <i data-lucide="underline"></i>
            </button>
          </div>
        </div>
        <RichTextEditor 
          :modelValue="localText"
          @update:modelValue="localText = $event"
          :placeholder="placeholder"
          :show-toolbar="false"
          ref="editorRef"
          class="editor-textarea"
        />
      </div>

      <!-- Файлы -->
      <div class="editor-form-section">
        <div class="editor-form-label">
          <span>Файлы</span>
        </div>
        <FileUploader
          :files="allFiles"
          :get-full-url="getFileFullUrl"
          dropzone-text="Перетащите файлы сюда"
          dropzone-subtext="или нажмите для выбора"
          @add="handleFileAdd"
          @remove="handleFileRemove"
          @preview="handleFilePreview"
          @error="handleFileError"
        />
      </div>
    </div>

    <template #footer>
      <ActionButtons
        :save-text="saveButtonText"
        save-icon="check"
        :loading="isSaving"
        :disabled="!canSave"
        @save="handleSave"
        @cancel="handleClose"
      />
    </template>
  </SlidePanel>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import SlidePanel from '../ui/SlidePanel.vue'
import RichTextEditor from '../ui/RichTextEditor.vue'
import FileUploader from '../ui/FileUploader.vue'
import ActionButtons from '../ui/ActionButtons.vue'
import { getFullUrl } from '../../api'
import { useLucideIcons } from '../../composables/useLucideIcons'

const props = defineProps({
  // Управление видимостью
  show: {
    type: Boolean,
    default: false
  },
  // Заголовок панели
  title: {
    type: String,
    default: 'Редактирование'
  },
  // Подзаголовок (например, имя автора)
  subtitle: {
    type: String,
    default: ''
  },
  // URL аватара (опционально)
  avatarUrl: {
    type: String,
    default: ''
  },
  // Начальный текст
  text: {
    type: String,
    default: ''
  },
  // Placeholder для редактора
  placeholder: {
    type: String,
    default: 'Введите текст...'
  },
  // Лейбл для поля текста
  textLabel: {
    type: String,
    default: 'Текст'
  },
  // Существующие файлы (для редактирования)
  existingFiles: {
    type: Array,
    default: () => []
  },
  // Функция получения URL файла
  fileUrlGetter: {
    type: Function,
    default: null
  },
  // Текст кнопки сохранения
  saveButtonText: {
    type: String,
    default: 'Сохранить'
  },
  // Состояние сохранения
  isSaving: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['save', 'close', 'update:show'])

const { refreshIcons } = useLucideIcons()

// Refs
const editorRef = ref(null)

// Local state
const localText = ref('')
const allFiles = ref([])

// Computed
const canSave = computed(() => {
  const hasText = localText.value.trim()
  const hasNewFiles = allFiles.value.some(f => f.isNew)
  return hasText || hasNewFiles
})

// Получить полный URL файла
const getFileFullUrl = (url) => {
  if (props.fileUrlGetter) {
    return props.fileUrlGetter(url)
  }
  return getFullUrl(url)
}

// File handlers
const handleFileAdd = (file) => {
  allFiles.value.push(file)
  refreshIcons()
}

const handleFileRemove = (index) => {
  const file = allFiles.value[index]
  if (file.isNew) {
    // Новый файл - удаляем сразу
    allFiles.value.splice(index, 1)
  } else {
    // Существующий файл - помечаем на удаление
    allFiles.value[index] = { ...file, toDelete: true }
  }
}

const handleFilePreview = (file) => {
  // Можно добавить emit для превью если нужно
  console.log('Preview file:', file.name)
}

const handleFileError = (message) => {
  console.warn(message)
}

// Format
const applyFormat = (command) => {
  editorRef.value?.applyFormat(command)
}

// Actions
const handleSave = () => {
  // Собираем новые файлы
  const newFiles = allFiles.value
    .filter(f => f.isNew)
    .map(f => ({
      name: f.name,
      data: f.preview
    }))
  
  // Собираем файлы на удаление
  const filesToDelete = allFiles.value
    .filter(f => f.toDelete)
    .map(f => f.name)
  
  emit('save', {
    text: localText.value,
    newFiles,
    filesToDelete
  })
}

const handleClose = () => {
  emit('close')
  emit('update:show', false)
}

// Reset state when panel opens
const resetState = () => {
  localText.value = props.text || ''
  
  // Преобразуем существующие файлы в формат FileUploader
  allFiles.value = (props.existingFiles || []).map(file => ({
    name: file.name,
    size: file.size || 0,
    preview: file.url,
    isNew: false,
    toDelete: false
  }))
  
  nextTick(() => {
    editorRef.value?.setContent(localText.value)
    refreshIcons()
  })
}

// Watch show prop
watch(() => props.show, (newVal) => {
  if (newVal) {
    resetState()
  }
})

// Watch text/existingFiles for external updates
watch(() => props.text, (newVal) => {
  if (props.show) {
    localText.value = newVal || ''
  }
})

watch(() => props.existingFiles, (newVal) => {
  if (props.show) {
    allFiles.value = (newVal || []).map(file => ({
      name: file.name,
      size: file.size || 0,
      preview: file.url,
      isNew: false,
      toDelete: false
    }))
  }
}, { deep: true })

// Expose
defineExpose({
  reset: resetState
})
</script>

<style scoped>
/* ========== Panel Header ========== */
.editor-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-panel-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.editor-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.editor-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-author-name {
  font-size: 13px;
  color: var(--text-muted);
}

/* ========== Content ========== */
.editor-panel-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editor-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editor-form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-buttons {
  display: flex;
  gap: 4px;
}

.format-btn {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.format-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.format-btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.format-btn i {
  width: 12px;
  height: 12px;
}

.editor-textarea {
  min-height: 120px;
}

.editor-textarea :deep(.editor-content) {
  min-height: 120px;
}

</style>
