<template>
  <div class="my-6">
    <!-- Divider -->
    <hr class="border-B mb-5" />

    <!-- Filter Section -->
    <div class="flex flex-col lg:flex-row my-3 gap-3 lg:gap-5">
      <!-- Date Range Filter -->
      <div class="w-full lg:w-1/3">
        <DatePicker 
          v-model="dateRange"
          label="Filter Tanggal"
          placeholder="Pilih rentang tanggal"
          :max-days="31"
          @change="handleDateChange"
        />
      </div>

      <!-- Search Section - Improved Responsiveness -->
      <div class="flex flex-col sm:flex-row w-full gap-2 lg:gap-3">
        <!-- Search Input Container -->
        <div class="flex-1 min-w-0">
          <InputField 
            placeholder="Cari kode transaksi..." 
            v-model="searchQuery" 
            class="w-full"
            @input="handleSearch"
          />
        </div>
        
        <!-- Reset Button -->
        <div class="flex-shrink-0">
          <button
            @click="handleResetFilter"
            class="w-full sm:w-auto px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors whitespace-nowrap text-sm font-medium"
          >
            Reset
          </button>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-6 overflow-x-auto">
      <div class="bg-white rounded-md border border-C overflow-hidden">
        <table class="w-full">
          <thead>
            <tr class="bg-C text-D">
              <th class="border-x border-C px-3 py-3 text-left">
                <button @click="handleSort('created_at')"
                  class="flex items-center justify-between w-full text-left hover:text-D/80 transition-colors">
                  <span>Tanggal & Waktu</span>
                  <i :class="getSortIcon('created_at')" class="ml-2"></i>
                </button>
              </th>
              <th class="border-x border-C px-3 py-3 text-left">
                <button @click="handleSort('kode_transaksi')"
                  class="flex items-center justify-between w-full text-left hover:text-D/80 transition-colors">
                  <span>Kode Transaksi</span>
                  <i :class="getSortIcon('kode_transaksi')" class="ml-2"></i>
                </button>
              </th>
              <th class="border-x border-C px-3 py-3 text-left">
                <button @click="handleSort('total_harga')"
                  class="flex items-center justify-between w-full hover:text-D/80 transition-colors">
                  <span>Nama Pembeli</span>
                  <i :class="getSortIcon('total_harga')" class="ml-2"></i>
                </button>
              </th>
              <th class="border-x border-C px-3 py-3 text-left">
                <button @click="handleSort('total_harga')"
                  class="flex items-center justify-center w-full hover:text-D/80 transition-colors">
                  <span>Total</span>
                  <i :class="getSortIcon('total_harga')" class="ml-2"></i>
                </button>
              </th>
              <th class="border-x border-C px-3 py-3 text-center">
                <span>Jml</span>
              </th>
              <th class="border-r border-C px-3 py-3 text-center">
                <span>Aksi</span>
              </th>
            </tr>
          </thead>
          
          <tbody class="divide-y divide-C/20">
            <!-- Loading Row -->
            <tr v-if="loading">
              <td :colspan="tableColumns" class="p-8 text-center">
                <div class="flex items-center justify-center">
                  <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-D"></div>
                  <span class="ml-2 text-D/70">Memuat riwayat transaksi...</span>
                </div>
              </td>
            </tr>

            <!-- Empty State Row -->
            <tr v-else-if="filteredTransaksi.length === 0 && !loading">
              <td :colspan="tableColumns" class="p-12 text-center">
                <div class="text-D/50 space-y-2">
                  <svg class="w-16 h-16 mx-auto text-D/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
                      d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                  </svg>
                  <div class="space-y-1">
                    <p class="text-sm font-medium">Tidak ada transaksi ditemukan.</p>
                  </div>
                </div>
              </td>
            </tr>

            <!-- Data Rows -->
            <template v-else v-for="trx in sortedTransaksi" :key="trx.id">
              <tr class="hover:bg-A/50 transition-colors">
                <!-- Tanggal & Waktu -->
                <td class="border-x border-C px-3 py-3">
                  <div class="flex flex-row text-sm gap-2">
                    <div class="text-D">{{ formatDate(trx.created_at) }},</div>
                    <div class="text-D/60"> {{ formatTime(trx.created_at) }}</div>
                  </div>
                </td>

                <!-- Kode Transaksi -->
                <td class="text-sm border-x border-C px-3 py-3">
                    {{ trx.kode_transaksi }}
                </td>

                <td class="text-sm border-x border-C px-3 py-3">
                    {{ trx.nama_pembeli }}
                </td>

                <!-- Total -->
                <td class="text-sm border-x border-C px-3 py-3 text-center">
                    Rp{{ (trx.total_harga || 0).toLocaleString() }}
                </td>

                <!-- Jumlah Item -->
                <td class="text-sm border-x border-C px-3 py-3 text-center">
                    {{ trx.total_items || 0 }}
                </td>

                <!-- Aksi -->
                <td class="border-r border-C px-3 py-3 text-center">
                  <button
                    @click="lihatDetail(trx)"
                    class="inline-flex items-center px-3 py-1.5 bg-C hover:bg-C/80 text-D rounded-md text-xs font-medium transition-colors"
                    :disabled="isDetailLoading"
                  >
                    <i v-if="isDetailLoading && selectedTransaksi.id === trx.id" 
                       class="fas fa-spinner fa-spin mr-1"></i>
                    <span>Lihat Detail</span>
                  </button>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div v-if="pagination && pagination.total > 0 && pagination.last_page > 1" 
         class="flex items-center justify-between gap-4 mt-6 px-1">
      <div class="text-sm text-D/70">
        Menampilkan {{ pagination.from }} - {{ pagination.to }} dari {{ pagination.total }} transaksi
        <span v-if="filteredTransaksi.length !== pagination.per_page" class="ml-2 text-blue-600">
          ({{ filteredTransaksi.length }} sesuai filter)
        </span>
      </div>
      
      <div class="flex items-center gap-2">
        <button 
          @click="goToPage(pagination.current_page - 1)" 
          :disabled="pagination.current_page === 1 || loading"
          class="px-3 py-2 text-sm font-medium border rounded-md bg-A border-C disabled:opacity-50 disabled:cursor-not-allowed hover:bg-C/50 transition-colors"
        >
          <i class="fas fa-chevron-left mr-1"></i>
          Sebelumnya
        </button>
        
        <span class="text-sm text-D/70 px-3">
          Halaman {{ pagination.current_page }} dari {{ pagination.last_page }}
        </span>
        
        <button 
          @click="goToPage(pagination.current_page + 1)"
          :disabled="pagination.current_page === pagination.last_page || loading"
          class="px-3 py-2 text-sm font-medium border rounded-md bg-A border-C disabled:opacity-50 disabled:cursor-not-allowed hover:bg-C/50 transition-colors"
        >
          Berikutnya
          <i class="fas fa-chevron-right ml-1"></i>
        </button>
      </div>
    </div>

    <!-- Modal Detail Transaksi -->
    <StrukView
      :is-open="isDetailOpen"
      :transaksi="selectedTransaksi"
      @close="closeDetail"
    />

    <!-- Loading Overlay for Detail -->
    <div v-if="isDetailLoading" class="fixed inset-0 bg-black/60 flex items-center justify-center z-[9999] p-4">
      <div class="bg-white rounded-lg p-6 flex items-center gap-3 shadow-xl max-w-md w-full">
        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-D"></div>
        <span class="text-D/80">Memuat detail transaksi...</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import DatePicker from '@/components/DatePicker.vue'
import InputField from '@/components/InputField.vue'
import StrukView from '@/components/StrukView.vue'

// Props & Emits
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({ data: [], pagination: null })
  }
})

// Reactive State
const transaksi = ref(props.initialData.data || [])
const pagination = ref(props.initialData.pagination || null)
const loading = ref(false)
const isDetailLoading = ref(false)

// Filter State
const dateRange = ref({
  start: new Date().toISOString().split('T')[0],
  end: new Date().toISOString().split('T')[0]
})
const statusDipilih = ref('')
const pembayaranDipilih = ref('')
const searchQuery = ref('')

// Sort State
const sortField = ref('created_at')
const sortDirection = ref('desc')

// Modal State
const isDetailOpen = ref(false)
const selectedTransaksi = ref({})

// Computed
const filteredTransaksi = computed(() => {
  let filtered = [...transaksi.value]
  
  // Date filter
  if (dateRange.value.start && dateRange.value.end) {
    const startDate = new Date(dateRange.value.start)
    const endDate = new Date(dateRange.value.end)
    endDate.setHours(23, 59, 59, 999)
    
    filtered = filtered.filter(trx => {
      const trxDate = new Date(trx.created_at)
      return trxDate >= startDate && trxDate <= endDate
    })
  }
  
  // Status filter
  if (statusDipilih.value) {
    filtered = filtered.filter(trx => trx.status === statusDipilih.value)
  }
  
  // Payment method filter
  if (pembayaranDipilih.value) {
    filtered = filtered.filter(trx => trx.metode_pembayaran === pembayaranDipilih.value)
  }
  
  // Search filter
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(trx => 
      trx.kode_transaksi.toLowerCase().includes(query) ||
      (trx.nama_pelanggan && trx.nama_pelanggan.toLowerCase().includes(query))
    )
  }
  
  return filtered
})

const sortedTransaksi = computed(() => {
  return [...filteredTransaksi.value].sort((a, b) => {
    let aVal = a[sortField.value] || ''
    let bVal = b[sortField.value] || ''
    
    // Handle numeric fields
    if (['total_harga', 'total_items'].includes(sortField.value)) {
      aVal = parseFloat(aVal) || 0
      bVal = parseFloat(bVal) || 0
    }
    
    if (aVal < bVal) return sortDirection.value === 'asc' ? -1 : 1
    if (aVal > bVal) return sortDirection.value === 'asc' ? 1 : -1
    return 0
  })
})

const tableColumns = computed(() => 7)

// Methods
const fetchTransaksi = async (page = 1) => {
  try {
    loading.value = true
    
    const params = new URLSearchParams({
      page,
      limit: 10,
      start_date: dateRange.value.start,
      end_date: dateRange.value.end,
      status: statusDipilih.value,
      search: searchQuery.value,
    })

    const response = await axios.get(`/api/transaksi?${params}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`
      }
    })

    transaksi.value = response.data.data || []
    pagination.value = response.data.pagination || null

    console.log("trans:", transaksi.value);
    
    
  } catch (error) {
    console.error('Error fetching transaksi:', error)
    alert('Gagal memuat data transaksi: ' + (error.response?.data?.message || error.message))
    transaksi.value = []
  } finally {
    loading.value = false
  }
}

const handleDateChange = (newRange) => {
  dateRange.value = newRange
  pagination.value = null // Reset pagination
  fetchTransaksi(1)
}

const handleSearch = () => {
  // Debounce search (optional)
  clearTimeout(window.searchTimeout)
  window.searchTimeout = setTimeout(() => {
    pagination.value = null
    fetchTransaksi(1)
  }, 300)
}

const handleSort = (field) => {
  if (sortField.value === field) {
    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortField.value = field
    sortDirection.value = 'asc'
  }
  
  fetchTransaksi(1)
}

const getSortIcon = (field) => {
  if (sortField.value !== field) return 'fas fa-sort text-D/40'
  
  if (sortDirection.value === 'asc') return 'fas fa-sort-up text-D'
  return 'fas fa-sort-down text-D'
}

const goToPage = (page) => {
  if (page >= 1 && page <= (pagination.value?.last_page || 1)) {
    fetchTransaksi(page)
  }
}

const lihatDetail = async (trx) => {
  try {
    isDetailLoading.value = true
    selectedTransaksi.value = trx // Show loading state first
    
    const response = await axios.get(`/api/transaksi/${trx.id}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`
      }
    })

    selectedTransaksi.value = {
      ...response.data,
      total_items: response.data.itemTransaksi?.length || 0
    }
    isDetailOpen.value = true

  } catch (error) {
    console.error('Error fetching detail:', error)
    alert('Gagal memuat detail transaksi: ' + (error.response?.data?.message || error.message))
  } finally {
    isDetailLoading.value = false
  }
}

const closeDetail = () => {
  isDetailOpen.value = false
  selectedTransaksi.value = {}
}

const handleResetFilter = () => {
  const today = new Date().toISOString().split('T')[0]
  dateRange.value = { start: today, end: today }
  statusDipilih.value = ''
  pembayaranDipilih.value = ''
  searchQuery.value = ''
  fetchTransaksi(1)
}

// Helper Functions
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('id-ID', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  })
}

const formatTime = (dateString) => {
  return new Date(dateString).toLocaleTimeString('id-ID', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// Lifecycle
onMounted(() => {
  fetchTransaksi()
})

// Watchers
import { watch } from 'vue'

watch([statusDipilih, pembayaranDipilih], () => {
  pagination.value = null
  fetchTransaksi(1)
}, { deep: true })
</script>