<template>
  <div>
    <!-- Search bar (optional) -->
    <SearchBar
      v-if="searchable"
      v-model="searchQuery"
      :id="searchId"
      :placeholder="searchPlaceholder"
      :left-icon="searchLeftIcon"
      :right-icon="searchRightIcon"
      @clear="searchQuery = ''"
    />

    <!-- Title + View All header -->
    <h3 class="fw_6 d-flex justify-content-between mt-3 align-items-center">
      <span>{{ title }}</span>
      <a
        v-if="viewAllText"
        href="javascript:void(0);"
        class="small fw_4 text-primary"
        @click="$emit('view-all')"
      >
        {{ viewAllText }}
      </a>
    </h3>

    <!-- Loading State -->
    <div v-if="loading" class="mt-3">
        <div v-for="i in 3" :key="i" class="d-flex align-items-center gap-3 mb-3 p-2">
            <SkeletonBlock width="40px" height="40px" border-radius="12px" />
            <div class="flex-grow-1">
                <SkeletonText width="60%" height="16px" class="mb-2" />
                <SkeletonText width="40%" height="12px" />
            </div>
        </div>
    </div>

    <!-- Empty State -->
    <div v-if="!loading && filteredItems.length === 0" class="text-center py-4">
      <i class="fas fa-inbox fa-2x text-muted opacity-50 mb-2"></i>
      <p class="text-muted small mb-0">{{ emptyText }}</p>
    </div>

    <!-- Searchable list items -->
    <ul v-if="!loading && filteredItems.length > 0" class="activity-list mt-3 mb-5 px-0">
      <SearchableListItem
        v-for="(item, index) in filteredItems"
        :key="index"
        :title="item.title"
        :subtitle="formatSubtitle(item)"
        :right-text="formatTimestamp(item.timestamp || item.rightText)"
        :search-class="item.searchClass || ''"
        :icon="item.icon || ''"
        :icon-width="item.iconWidth || 30"
        :icon-height="item.iconHeight || 30"
        @click="$emit('item-click', item, index)"
      />
    </ul>

    <!-- Optional arrow button list -->
    <slot name="arrow-buttons" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import SearchBar          from './SearchBar.vue'
import SearchableListItem from './SearchableListItem.vue'
import SkeletonText from '../Skeleton/SkeletonText.vue'
import SkeletonBlock from '../Skeleton/SkeletonBlock.vue'

const props = defineProps({
  title:             { type: String, default: '' },
  viewAllText:       { type: String, default: '' },
  searchable:        { type: Boolean, default: false },
  searchId:          { type: String, default: 'searchable-list' },
  searchPlaceholder: { type: String, default: 'Search' },
  searchLeftIcon:    { type: String, default: '' },
  searchRightIcon:   { type: String, default: '' },
  emptyText:         { type: String, default: 'No recent activity' },
  /**
   * Array of { title, subtitle?, rightText?, timestamp?, searchClass?, icon?, iconWidth?, iconHeight? }
   */
  items: { type: Array, required: true },
  loading: { type: Boolean, default: false },
})

defineEmits(['view-all', 'item-click'])

const searchQuery = ref('')

const filteredItems = computed(() => {
  if (!searchQuery.value) return props.items
  const q = searchQuery.value.toLowerCase()
  return props.items.filter(item => {
    const text = `${item.title} ${item.subtitle || ''}`.toLowerCase()
    return text.includes(q)
  })
})

const formatTimestamp = (ts) => {
  if (!ts) return ''
  try {
    const date = new Date(ts)
    const now = new Date()
    const diffMs = now - date
    const diffMins = Math.floor(diffMs / 60000)
    const diffHours = Math.floor(diffMins / 60)
    const diffDays = Math.floor(diffHours / 24)

    if (diffMins < 1) return 'Just now'
    if (diffMins < 60) return `${diffMins}m ago`
    if (diffHours < 24) return `${diffHours}h ago`
    if (diffDays < 7) return `${diffDays}d ago`
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  } catch {
    return ''
  }
}

const formatSubtitle = (item) => {
  if (item.subtitle) return item.subtitle
  if (item.type === 'transaction') return 'System transaction'
  return ''
}
</script>

<style scoped>
.activity-list {
  list-style: none;
  margin-bottom: 0;
}
</style>
