<template>
  <div class="enhanced-table-wrapper">
    <div v-if="$slots.header || title" class="table-header">
      <div v-if="title" class="table-title">
        <h3 class="text-xl font-semibold">{{ title }}</h3>
        <p v-if="description" class="text-sm text-base-content/60">{{ description }}</p>
      </div>
      <slot name="header"></slot>
    </div>

    <div class="table-container" :class="{ 'max-h-96 overflow-y-auto': stickyHeader }">
      <table class="table w-full">
        <thead :class="{ 'sticky top-0 z-10 bg-base-200': stickyHeader }">
          <tr>
            <th v-for="column in columns" :key="column.key" :class="column.headerClass">
              {{ column.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(row, index) in data"
            :key="getRowKey(row, index)"
            class="hover:bg-base-200/50 transition-colors cursor-pointer"
            :class="{ 'bg-base-200/30': zebra && index % 2 === 1 }"
            @click="handleRowClick(row)"
          >
            <td v-for="column in columns" :key="column.key" :class="column.cellClass">
              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
                {{ row[column.key] }}
              </slot>
            </td>
          </tr>
          <tr v-if="!data || data.length === 0">
            <td :colspan="columns.length" class="text-center py-12">
              <slot name="empty">
                <div class="text-base-content/60">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 mx-auto mb-2 opacity-30">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                  </svg>
                  <p class="font-medium">No data available</p>
                </div>
              </slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="$slots.footer" class="table-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Column {
  key: string
  label: string
  headerClass?: string
  cellClass?: string
}

interface Props {
  columns: Column[]
  data: any[]
  title?: string
  description?: string
  stickyHeader?: boolean
  zebra?: boolean
  rowKey?: string
}

const props = withDefaults(defineProps<Props>(), {
  stickyHeader: false,
  zebra: false,
  rowKey: 'id'
})

const emit = defineEmits<{
  rowClick: [row: any]
}>()

const getRowKey = (row: any, index: number): string | number => {
  return row[props.rowKey] ?? index
}

const handleRowClick = (row: any) => {
  emit('rowClick', row)
}
</script>

<style scoped>
.enhanced-table-wrapper {
  @apply bg-neutral rounded-xl shadow-medium overflow-hidden;
}

.table-header {
  @apply p-6 border-b border-base-300 flex items-center justify-between;
}

.table-title {
  @apply flex-1;
}

.table-container {
  @apply overflow-x-auto;
}

.table {
  @apply border-collapse;
}

.table thead th {
  @apply bg-base-200 font-semibold text-left px-6 py-4 text-sm uppercase tracking-wider;
}

.table tbody td {
  @apply px-6 py-4 border-t border-base-300;
}

.table-footer {
  @apply p-4 border-t border-base-300 bg-base-200/50;
}

/* Sticky header shadow */
.table-container.max-h-96 thead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
