<script setup lang="ts">
export interface TableColumn {
  key: string
  label: string
  sortable?: boolean
  align?: 'left' | 'center' | 'right'
  width?: string
}

type TableSize = 'xs' | 'sm' | 'md' | 'xl'

interface Props {
  columns: TableColumn[]
  data: Record<string, any>[]
  size?: TableSize
  striped?: boolean
  hoverable?: boolean
  bordered?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  striped: true,
  hoverable: true,
  bordered: false,
  loading: false
})

const sizeClasses: Record<TableSize, { cell: string; text: string }> = {
  xs: { cell: 'px-2 py-1', text: 'text-xs' },
  sm: { cell: 'px-3 py-2', text: 'text-sm' },
  md: { cell: 'px-4 py-3', text: 'text-base' },
  xl: { cell: 'px-6 py-4', text: 'text-lg' }
}

const alignClasses: Record<string, string> = {
  left: 'text-left',
  center: 'text-center',
  right: 'text-right'
}
</script>

<template>
  <div class="w-full overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
    <table class="w-full">
      <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
          <th
            v-for="col in props.columns"
            :key="col.key"
            :class="[
              'font-semibold text-gray-700 dark:text-gray-300',
              'border-b border-gray-200 dark:border-gray-700',
              sizeClasses[props.size].cell,
              sizeClasses[props.size].text,
              alignClasses[col.align || 'left']
            ]"
            :style="col.width ? { width: col.width } : {}"
          >
            {{ col.label }}
          </th>
        </tr>
      </thead>
      <tbody v-if="!props.loading">
        <tr
          v-for="(row, index) in props.data"
          :key="index"
          :class="[
            'transition-colors',
            props.striped && index % 2 === 1 ? 'bg-gray-50 dark:bg-gray-800/50' : 'bg-white dark:bg-gray-900',
            props.hoverable ? 'hover:bg-flux-50 dark:hover:bg-flux-900/20' : '',
            props.bordered ? 'border-b border-gray-200 dark:border-gray-700' : ''
          ]"
        >
          <td
            v-for="col in props.columns"
            :key="col.key"
            :class="[
              'text-gray-900 dark:text-gray-100',
              sizeClasses[props.size].cell,
              sizeClasses[props.size].text,
              alignClasses[col.align || 'left']
            ]"
          >
            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
              {{ row[col.key] }}
            </slot>
          </td>
        </tr>
        <tr v-if="props.data.length === 0">
          <td
            :colspan="props.columns.length"
            :class="[
              'text-center text-gray-500 dark:text-gray-400',
              sizeClasses[props.size].cell,
              sizeClasses[props.size].text
            ]"
          >
            Keine Daten vorhanden
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td
            :colspan="props.columns.length"
            :class="[
              'text-center',
              sizeClasses[props.size].cell
            ]"
          >
            <div class="flex items-center justify-center gap-2 text-gray-500">
              <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Laden...
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
