<template>
  <div 
    class="comment"
    :class="{ 
      'comment--own': isOwn, 
      'comment--reply': level > 0,
      'is-mobile': isMobile
    }"
    :style="{ marginLeft: level * 24 + 'px' }"
  >
    <div class="comment-avatar" :class="{ 'comment-avatar--small': level > 0 }">
      <img v-if="comment.author_avatar" :src="getFullUrl(comment.author_avatar)" alt="">
      <i v-else data-lucide="user"></i>
    </div>
    
    <div class="comment-body">
      <div class="comment-header">
        <div class="comment-meta" :class="{ 'is-mobile': isMobile }">
          <span class="comment-author">{{ comment.author_name }}</span>
          <span class="comment-date">{{ formattedDate }}</span>
        </div>
        
        <div class="comment-actions">
          <IconButton 
            v-if="canReply"
            icon="reply" 
            variant="ghost" 
            small 
            title="Ответить"
            @click="$emit('reply', comment)"
          />
          <IconButton 
            v-if="canEdit"
            icon="pencil" 
            variant="ghost" 
            small 
            title="Редактировать"
            @click="$emit('edit', comment)"
          />
          <IconButton 
            v-if="canEdit"
            icon="trash-2" 
            variant="ghost" 
            small 
            title="Удалить"
            class="comment-btn-delete"
            @click="$emit('delete', comment)"
          />
        </div>
      </div>
      
      <!-- Текст комментария -->
      <div class="comment-text" v-html="comment.text"></div>
      
      <!-- Прикреплённые файлы -->
      <div v-if="comment.file_img && comment.file_img.length > 0" class="comment-files">
        <div 
          v-for="(file, index) in comment.file_img" 
          :key="file.name + '-' + index"
          class="comment-file"
          @click="!isArchiveFile(file) && openPreview(file)"
        >
          <template v-if="isArchiveFile(file)">
            <div class="comment-file-archive">
              <i data-lucide="archive"></i>
              <span class="comment-file-ext">.{{ getFileExt(file) }}</span>
            </div>
          </template>
          <img v-else :src="getFullUrl(file.url)" :alt="file.name">
          <a 
            class="comment-file-download" 
            :href="getFullUrl(file.url)" 
            :download="file.name"
            @click.stop
            title="Скачать"
          >
            <i data-lucide="download"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import IconButton from '../ui/IconButton.vue'
import { useMobile } from '../../composables/useMobile'
import { useLucideIcons } from '../../composables/useLucideIcons'
import { useDateFormat } from '../../composables/useDateFormat'

const { isMobile } = useMobile()
const { formatTimeAgo } = useDateFormat()

useLucideIcons()

const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 0
  },
  isOwn: {
    type: Boolean,
    default: false
  },
  canEdit: {
    type: Boolean,
    default: false
  },
  canReply: {
    type: Boolean,
    default: true
  },
  getFullUrl: {
    type: Function,
    required: true
  }
})

const emit = defineEmits(['reply', 'edit', 'delete', 'preview-file'])

const archiveExtensions = ['zip', 'rar']

// Получить расширение файла
const getFileExt = (file) => {
  return file.name?.split('.').pop()?.toLowerCase() || ''
}

// Проверка является ли файл архивом
const isArchiveFile = (file) => {
  return archiveExtensions.includes(getFileExt(file))
}

// Открыть превью файла
const openPreview = (file) => {
  emit('preview-file', file)
}

// Форматирование даты комментария (таймзона сервера учитывается автоматически)
const formattedDate = computed(() => formatTimeAgo(props.comment.date_create))
</script>

<style scoped>
.comment {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-radius: 10px;
}

.comment:hover {
  background: rgba(255, 255, 255, 0.04);
}

.comment--own {
  background: rgba(0, 212, 170, 0.05);
}

.comment--own:hover {
  background: rgba(0, 212, 170, 0.08);
}

.comment--reply {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 12px;
}

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

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

.comment-avatar i {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.comment-avatar--small {
  width: 28px;
  height: 28px;
}

.comment-avatar--small i {
  width: 14px;
  height: 14px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.comment-author {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.comment-date {
  font-size: 12px;
  color: var(--text-muted);
}

/* Mobile: дата под ником (MOBILE_BREAKPOINT из config.js) */
.comment-meta.is-mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.comment-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}

.comment-text :deep(b),
.comment-text :deep(strong) {
  font-weight: 600;
  color: var(--text-primary);
}

.comment-actions {
  display: flex;
  gap: 4px;
}

.comment-btn-delete:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: var(--red) !important;
}

/* Прикреплённые файлы в комментарии */
.comment-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.comment-file {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s;
}

.comment-file:hover {
  opacity: 0.85;
}

.comment-file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-file-archive {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: default;
}

.comment-file-archive i {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.comment-file-ext {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.6;
}

.comment-file-download {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: all 0.15s;
  text-decoration: none;
}

.comment-file:hover .comment-file-download {
  opacity: 1;
}

.comment-file-download:hover {
  background: var(--accent);
  color: #000;
}

.comment-file-download i {
  width: 12px;
  height: 12px;
}

/* Mobile: скрыть кнопку скачивания на миниатюре */
.comment.is-mobile .comment-file-download {
  display: none;
}
</style>
