<template>
  <div class="table-container">
    <table class="table" :class="tableClass">
      <caption v-if="$slots.caption || caption">
        <slot name="caption">{{ caption }}</slot>
      </caption>
      <thead :class="{ 'sticky-header': stickyHeader }">
        <tr>
          <th
            v-for="header in headers"
            :key="header.key"
            :class="header.headerClass"
            scope="col"
          >
            <slot :name="`header.${header.key}`" :header="header">
              {{ header.label }}
            </slot>
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-if="items.length === 0 && $slots['empty-state']">
          <tr>
            <td :colspan="headers.length || 1"> {/* Fallback colspan if headers is empty */}
              <slot name="empty-state"></slot>
            </td>
          </tr>
        </template>
        <template v-else>
          <template v-for="(item, rowIndex) in items" :key="rowIndex">
            <slot name="item" :item="item" :rowIndex="rowIndex">
              <tr>
                <td
                  v-for="header in headers"
                  :key="header.key"
                  :class="header.cellClass"
                >
                  <slot :name="`item.${header.key}`" :item="item" :value="item[header.key]" :rowIndex="rowIndex">
                    {{ item[header.key] }}
                  </slot>
                </td>
              </tr>
            </slot>
          </template>
        </template>
      </tbody>
      <tfoot v-if="$slots.footer" :class="{ 'sticky-footer': stickyFooter }">
        <slot name="footer"></slot>
      </tfoot>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue';

interface TableHeader {
  key: string;
  label: string;
  sortable?: boolean;
  headerClass?: string | string[] | Record<string, boolean>;
  cellClass?: string | string[] | Record<string, boolean>;
}

// Using defineProps with generic type for items is complex.
// Using `any` for items for now, can be refined if specific item structure is enforced.
const props = defineProps({
  headers: {
    type: Array as PropType<TableHeader[]>,
    required: true,
    default: () => [],
  },
  items: {
    type: Array as PropType<any[]>,
    required: true,
    default: () => [],
  },
  stickyHeader: {
    type: Boolean,
    default: false,
  },
  stickyFooter: {
    type: Boolean,
    default: false,
  },
  tableClass: {
    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
    default: '',
  },
  caption: {
    type: String,
    default: null,
  },
});

// No specific reactive logic needed in setup for this version,
// but setup script is used for type imports and defineProps.
</script>

<style lang="scss" scoped>
// These styles should align with valerie-ui.scss or be defined here.
// Assuming standard table styling from a global scope or valerie-ui.scss.
// For demonstration, some basic table styles are included.

.table-container {
  width: 100%;
  overflow-x: auto; // Enable horizontal scrolling if table is wider than container
  // For sticky header/footer to work correctly, the container might need a defined height
  // or be within a scrollable viewport.
  // max-height: 500px; // Example max height for sticky demo
}

.table {
  width: 100%;
  border-collapse: collapse; // Standard table practice
  // Example base styling, should come from valerie-ui.scss ideally
  font-size: 0.9rem;
  color: var(--table-text-color, #333);
  background-color: var(--table-bg-color, #fff);

  caption {
    padding: 0.5em 0;
    caption-side: bottom; // Or top, depending on preference/standard
    font-size: 0.85em;
    color: var(--table-caption-color, #666);
    text-align: left;
  }

  th, td {
    padding: 0.75em 1em; // Example padding
    text-align: left;
    border-bottom: 1px solid var(--table-border-color, #dee2e6);
  }

  thead th {
    font-weight: 600; // Bolder for header cells
    background-color: var(--table-header-bg, #f8f9fa);
    border-bottom-width: 2px; // Thicker border under header
  }

  tbody tr:hover {
    background-color: var(--table-row-hover-bg, #f1f3f5);
  }

  // Sticky styles
  .sticky-header th {
    position: sticky;
    top: 0;
    z-index: 10; // Ensure header is above body content during scroll
    background-color: var(--table-header-sticky-bg, #f0f2f5); // Might need distinct bg
  }

  .sticky-footer { // Applied to tfoot
    td, th { // Assuming footer might contain th or td
      position: sticky;
      bottom: 0;
      z-index: 10; // Ensure footer is above body
      background-color: var(--table-footer-sticky-bg, #f0f2f5);
    }
  }
  // If both stickyHeader and stickyFooter are used, ensure z-indexes are managed.
  // Also, for sticky to work on thead/tfoot, the table-container needs to be the scrollable element,
  // or the window itself if the table is large enough.
}

// Example of custom classes from props (these would be defined by user)
// .custom-header-class { background-color: lightblue; }
// .custom-cell-class { font-style: italic; }
// .custom-table-class { border: 2px solid blue; }
</style>
