<template>
  <div
    class="archive-card"
    :class="{ 'has-label-color': cardLabelColor, mobile: isMobile }"
    :style="cardLabelColor ? { '--label-bg': cardLabelColor } : {}"
    @click="$emit('click')"
  >
    <!-- Desktop версия -->
    <template v-if="!isMobile">
      <!-- Аватарка -->
      <div class="card-assignee" v-if="card.assignee">
        <img 
          v-if="isAvatarUrl(card.assignee)" 
          :src="getFullUrl(card.assignee)" 
          alt="avatar"
          class="assignee-img"
        />
        <span v-else class="assignee-initials">{{ card.assignee }}</span>
      </div>

      <!-- Контент -->
      <div class="card-main">
        <div class="card-content">
          <h3 class="card-title">
            <span v-if="cardLabel" class="label-icon" :title="cardLabel.name_labels">{{ cardLabel.icon }}</span>
            {{ card.title }}
          </h3>
          <p v-if="card.description" class="card-description">{{ card.description }}</p>
        </div>
      </div>

      <!-- Центральная часть: мета-информация -->
      <div class="card-meta">
        <span 
          v-if="cardDepartment" 
          class="department-tag"
          :style="{ color: cardDepartment.color }"
        >
          {{ cardDepartment.name_departments }}
        </span>
        <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
          <i data-lucide="message-circle"></i>
          <span class="indicator-count">{{ card.comments_count }}</span>
        </span>
        <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' файлов'">
          <i data-lucide="image-plus"></i>
        </span>
      </div>

      <!-- Даты: создано и выполнено -->
      <div class="card-dates">
        <span class="date-created">{{ formatDateTime(card.dateCreate) }}</span>
        <span class="date-closed">{{ formatDateTime(card.dateClosed) }}</span>
      </div>

      <!-- Кнопки действий (всегда видны) -->
      <div class="card-actions">
        <button 
          class="btn-action btn-restore" 
          @click.stop="$emit('restore', card.id)"
          title="Вернуть из архива"
        >
          <i data-lucide="archive-restore"></i>
        </button>
        <button 
          class="btn-action btn-delete" 
          @click.stop="$emit('delete', card.id)"
          title="Удалить навсегда"
        >
          <i data-lucide="trash-2"></i>
        </button>
      </div>
    </template>

    <!-- Mobile версия (как Card.vue) -->
    <template v-else>
      <div class="card-header">
        <div class="tag-group">
          <span v-if="cardLabel" class="label-icon">{{ cardLabel.icon }}</span>
          <span 
            v-if="cardDepartment" 
            class="tag"
            :style="{ color: cardDepartment.color }"
          >
            {{ cardDepartment.name_departments }}
          </span>
        </div>
        <div class="header-right">
          <button 
            class="btn-action btn-restore" 
            @click.stop="$emit('restore', card.id)"
            title="Вернуть из архива"
          >
            <i data-lucide="archive-restore"></i>
          </button>
          <button 
            class="btn-action btn-delete" 
            @click.stop="$emit('delete', card.id)"
            title="Удалить навсегда"
          >
            <i data-lucide="trash-2"></i>
          </button>
          <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
            <i data-lucide="message-circle"></i>
            <span class="indicator-count">{{ card.comments_count }}</span>
          </span>
          <span v-if="card.files && card.files.length" class="files-indicator">
            <i data-lucide="image-plus"></i>
          </span>
          <div v-if="card.assignee" class="assignee">
            <img 
              v-if="isAvatarUrl(card.assignee)" 
              :src="getFullUrl(card.assignee)" 
              alt="avatar"
              class="assignee-img"
            />
            <span v-else>{{ card.assignee }}</span>
          </div>
        </div>
      </div>

      <h3 class="mobile-title">{{ card.title }}</h3>
      
      <p v-if="card.description" class="mobile-description">
        {{ card.description }}
      </p>

      <div class="card-footer">
        <span class="date-create">
          Создано: {{ formatShort(card.dateCreate) }}
        </span>
        <span v-if="card.dateClosed" class="date-closed">
          Закрыто: {{ closedDateText }}
        </span>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { getFullUrl } from '../api'
import { useMobile } from '../composables/useMobile'
import { useLucideIcons } from '../composables/useLucideIcons'
import { useDateFormat } from '../composables/useDateFormat'
import { useProjectsStore } from '../stores/projects'

const { isMobile } = useMobile()
const { formatShort, formatDateTime, formatRelative } = useDateFormat()
const store = useProjectsStore()

useLucideIcons()

const props = defineProps({
  card: Object
})

const emit = defineEmits(['click', 'restore', 'delete'])

// Получаем отдел по id
const cardDepartment = computed(() => {
  if (!props.card.departmentId) return null
  return store.departments.find(d => d.id === props.card.departmentId) || null
})

// Получаем лейбл по id
const cardLabel = computed(() => {
  if (!props.card.labelId) return null
  return store.labels.find(l => l.id === props.card.labelId) || null
})

// Цвет лейбла для акцента
const cardLabelColor = computed(() => {
  return cardLabel.value?.color || null
})

// Проверка на URL аватарки
const isAvatarUrl = (value) => {
  return value && (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/'))
}

// Даты через composable
const closedDateText = computed(() => formatRelative(props.card.dateClosed))
</script>

<style scoped>
/* ========== DESKTOP STYLES ========== */
.archive-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.archive-card:hover {
  background: var(--bg-card-hover);
}

.archive-card.has-label-color {
  border-left-color: var(--label-bg);
  background: color-mix(in srgb, var(--label-bg) 8%, var(--bg-card));
}

.archive-card.has-label-color:hover {
  background: color-mix(in srgb, var(--label-bg) 12%, var(--bg-card-hover));
}

/* Левая часть: аватарка + контент */
.card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Приоритет (иконка лейбла) — внутри заголовка */
.label-icon {
  font-size: 13px;
  margin-right: 6px;
}

.card-content {
  min-width: 0;
  flex: 1;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.card-description {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 0 0;
}

/* Мета-информация */
.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.department-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.comments-indicator,
.files-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.comments-indicator i,
.comments-indicator svg,
.files-indicator i,
.files-indicator svg {
  width: 14px;
  height: 14px;
}

.indicator-count {
  font-size: 11px;
}

/* Аватарка */
.card-assignee {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--blue, #3b82f6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.assignee-initials {
  font-size: 10px;
  font-weight: 600;
  color: white;
}

/* Даты */
.card-dates {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.date-created,
.date-closed {
  font-size: 12px;
  white-space: nowrap;
}

.date-created {
  color: var(--text-muted);
}

.date-closed {
  color: var(--green, #00d4aa);
}

/* Кнопки действий (всегда видны) */
.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action i,
.btn-action svg {
  width: 18px;
  height: 18px;
}

.btn-restore:hover {
  background: var(--orange, #ff9f43);
  color: #000;
}

.btn-delete:hover {
  background: var(--red, #ff4757);
  color: #fff;
}

/* ========== MOBILE STYLES ========== */
.archive-card.mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: none;
}

.archive-card.mobile.has-label-color {
  background: color-mix(in srgb, var(--label-bg) 15%, var(--bg-card));
  border-left: 3px solid var(--label-bg);
}

.archive-card.mobile .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.archive-card.mobile .tag-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.archive-card.mobile .tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.archive-card.mobile .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.archive-card.mobile .btn-action {
  width: 24px;
  height: 24px;
}

.archive-card.mobile .btn-action i,
.archive-card.mobile .btn-action svg {
  width: 14px;
  height: 14px;
}

.archive-card.mobile .comments-indicator,
.archive-card.mobile .files-indicator {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
}

.archive-card.mobile .comments-indicator i,
.archive-card.mobile .comments-indicator svg,
.archive-card.mobile .files-indicator i,
.archive-card.mobile .files-indicator svg {
  width: 14px;
  height: 14px;
}

.archive-card.mobile .indicator-count {
  font-size: 11px;
}

.archive-card.mobile .assignee {
  width: 24px;
  height: 24px;
  background: var(--blue);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: white;
  overflow: hidden;
}

.archive-card.mobile .mobile-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
}

.archive-card.mobile .mobile-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 8px;
}

.archive-card.mobile .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.archive-card.mobile .date-create {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}
</style>
