@use 'ui-design-system/src/styles/semantic' as *;

.ui-enhanced-table-container {
  position: relative;
  width: 100%;
  background: $semantic-color-surface-primary;
  border-radius: $semantic-border-card-radius;
  box-shadow: $semantic-shadow-elevation-1;
  overflow: hidden;
  
  // Variants
  &--striped {
    .ui-enhanced-table__row:nth-child(even),
    .ui-enhanced-table__virtual-row:nth-child(even) {
      background: $semantic-color-surface-secondary;
    }
  }
  
  &--bordered {
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    
    .ui-enhanced-table__header-cell,
    .ui-enhanced-table__cell,
    .ui-enhanced-table__virtual-cell {
      border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
    }
  }
  
  &--minimal {
    box-shadow: none;
    border-radius: 0;
    
    .ui-enhanced-table__header {
      border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    }
  }
  
  // Size variants
  &--compact {
    .ui-enhanced-table__header-cell,
    .ui-enhanced-table__cell,
    .ui-enhanced-table__virtual-cell {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      font-size: map-get($semantic-typography-body-small, font-size);
      line-height: map-get($semantic-typography-body-small, line-height);
    }
  }
  
  &--comfortable {
    .ui-enhanced-table__header-cell,
    .ui-enhanced-table__cell,
    .ui-enhanced-table__virtual-cell {
      padding: $semantic-spacing-component-lg $semantic-spacing-component-md;
      font-size: map-get($semantic-typography-body-large, font-size);
      line-height: map-get($semantic-typography-body-large, line-height);
    }
  }
  
  // States
  &--sticky-header {
    .ui-enhanced-table__header {
      position: sticky;
      top: 0;
      z-index: $semantic-z-index-dropdown;
      background: $semantic-color-surface-elevated;
      box-shadow: $semantic-shadow-elevation-1;
    }
  }
  
  &--loading {
    pointer-events: none;
    
    .ui-enhanced-table__loading-overlay {
      opacity: 1;
      visibility: visible;
    }
  }
  
  &--virtual {
    .ui-enhanced-table__scroll-container {
      overflow-y: auto;
    }
  }
}

// Filter Row
.ui-enhanced-table__filter-row {
  display: flex;
  background: $semantic-color-surface-secondary;
  border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
  padding: $semantic-spacing-component-sm 0;
  gap: $semantic-spacing-component-xs;
}

.ui-enhanced-table__filter-cell {
  padding: 0 $semantic-spacing-component-sm;
  flex-shrink: 0;
}

.ui-enhanced-table__filter-input,
.ui-enhanced-table__filter-select {
  width: 100%;
  padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-input-radius;
  background: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  font-size: map-get($semantic-typography-body-small, font-size);
  font-family: map-get($semantic-typography-body-small, font-family);
  line-height: map-get($semantic-typography-body-small, line-height);
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  &:focus {
    outline: none;
    border-color: $semantic-color-focus;
    box-shadow: 0 0 0 2px $semantic-color-focus;
  }
  
  &::placeholder {
    color: $semantic-color-text-tertiary;
  }
}

// Scroll Container
.ui-enhanced-table__scroll-container {
  position: relative;
  overflow-x: auto;
  max-height: 600px;
}

// Header
.ui-enhanced-table__header {
  background: $semantic-color-surface-elevated;
  border-bottom: $semantic-border-width-2 solid $semantic-color-border-primary;
}

.ui-enhanced-table__header-row {
  display: flex;
  min-width: 100%;
}

.ui-enhanced-table__header-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-elevated;
  border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
  font-weight: $semantic-typography-font-weight-semibold;
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-family: map-get($semantic-typography-body-medium, font-family);
  line-height: map-get($semantic-typography-body-medium, line-height);
  color: $semantic-color-text-primary;
  flex-shrink: 0;
  user-select: none;
  
  &--sortable {
    cursor: pointer;
    transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      background: $semantic-color-surface-secondary;
    }
  }
  
  &--sorted {
    background: $semantic-color-surface-secondary;
  }
  
  &--draggable {
    cursor: grab;
    
    &:active {
      cursor: grabbing;
    }
  }
  
  &:last-child {
    border-right: none;
  }
}

.ui-enhanced-table__header-content {
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
  flex: 1;
}

.ui-enhanced-table__header-text {
  font-weight: $semantic-typography-font-weight-semibold;
}

.ui-enhanced-table__sort-indicators {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-enhanced-table__sort-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: $semantic-color-primary;
  font-weight: $semantic-typography-font-weight-bold;
  
  sup {
    font-size: 8px;
    margin-left: 2px;
  }
  
  &[data-direction="asc"] {
    color: $semantic-color-success;
  }
  
  &[data-direction="desc"] {
    color: $semantic-color-danger;
  }
}

// Resize Handle
.ui-enhanced-table__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 20px;
    background: $semantic-color-border-secondary;
    opacity: 0;
    transition: opacity $semantic-motion-duration-fast $semantic-motion-easing-ease;
  }
  
  &:hover::before {
    opacity: 1;
  }
}

// Virtual Viewport
.ui-enhanced-table__virtual-viewport {
  position: relative;
  overflow-y: auto;
}

// Rows (Traditional and Virtual)
.ui-enhanced-table__body {
  background: $semantic-color-surface-primary;
}

.ui-enhanced-table__row,
.ui-enhanced-table__virtual-row {
  display: flex;
  min-width: 100%;
  transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  &--hover:hover {
    background: $semantic-color-surface-secondary;
  }
  
  &--selected {
    background: rgba($semantic-color-primary, 0.1);
    border-left: 3px solid $semantic-color-primary;
  }
  
  &--striped {
    background: $semantic-color-surface-secondary;
  }
}

// Cells
.ui-enhanced-table__cell,
.ui-enhanced-table__virtual-cell {
  display: flex;
  align-items: center;
  padding: $semantic-spacing-component-md;
  border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-family: map-get($semantic-typography-body-medium, font-family);
  line-height: map-get($semantic-typography-body-medium, line-height);
  color: $semantic-color-text-primary;
  flex-shrink: 0;
  overflow: hidden;
}

.ui-enhanced-table__cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Empty State
.ui-enhanced-table__empty-row {
  display: flex;
  justify-content: center;
  padding: $semantic-spacing-layout-section-lg;
}

.ui-enhanced-table__empty-cell {
  text-align: center;
}

.ui-enhanced-table__empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $semantic-spacing-component-md;
}

.ui-enhanced-table__empty-text {
  font-size: map-get($semantic-typography-body-large, font-size);
  font-family: map-get($semantic-typography-body-large, font-family);
  color: $semantic-color-text-tertiary;
}

// Loading Overlay
.ui-enhanced-table__loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($semantic-color-backdrop, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $semantic-spacing-component-md;
  opacity: 0;
  visibility: hidden;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  z-index: $semantic-z-index-overlay;
  backdrop-filter: blur(2px);
}

.ui-enhanced-table__loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid $semantic-color-border-subtle;
  border-top: 3px solid $semantic-color-primary;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ui-enhanced-table__loading-text {
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-family: map-get($semantic-typography-body-medium, font-family);
  color: $semantic-color-text-primary;
  font-weight: $semantic-typography-font-weight-medium;
}

// Column Reorder Ghost
.ui-enhanced-table__column-ghost {
  position: fixed;
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  background: $semantic-color-primary;
  color: $semantic-color-on-primary;
  border-radius: $semantic-border-input-radius;
  font-size: map-get($semantic-typography-body-small, font-size);
  font-family: map-get($semantic-typography-body-small, font-family);
  font-weight: $semantic-typography-font-weight-medium;
  box-shadow: $semantic-shadow-elevation-3;
  pointer-events: none;
  z-index: $semantic-z-index-modal;
  transform: translate(-50%, -100%);
  opacity: 0.9;
}

// Animations
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Responsive Design
@media (max-width: 768px) {
  .ui-enhanced-table-container {
    font-size: map-get($semantic-typography-body-small, font-size);
    
    .ui-enhanced-table__header-cell,
    .ui-enhanced-table__cell,
    .ui-enhanced-table__virtual-cell {
      padding: $semantic-spacing-component-sm;
    }
    
    .ui-enhanced-table__filter-row {
      padding: $semantic-spacing-component-xs 0;
    }
    
    .ui-enhanced-table__resize-handle {
      width: 8px; // Larger touch target
    }
  }
  
  .ui-enhanced-table__scroll-container {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

// Accessibility
@media (prefers-reduced-motion: reduce) {
  .ui-enhanced-table__header-cell,
  .ui-enhanced-table__row,
  .ui-enhanced-table__virtual-row,
  .ui-enhanced-table__cell,
  .ui-enhanced-table__virtual-cell,
  .ui-enhanced-table__filter-input,
  .ui-enhanced-table__filter-select,
  .ui-enhanced-table__loading-overlay,
  .ui-enhanced-table__resize-handle::before {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
  
  .ui-enhanced-table__loading-spinner {
    animation: none;
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .ui-enhanced-table-container {
    border: $semantic-border-width-2 solid $semantic-color-text-primary;
  }
  
  .ui-enhanced-table__header-cell,
  .ui-enhanced-table__cell,
  .ui-enhanced-table__virtual-cell {
    border-color: $semantic-color-text-primary;
  }
  
  .ui-enhanced-table__filter-input,
  .ui-enhanced-table__filter-select {
    border-color: $semantic-color-text-primary;
  }
}

// Print styles
@media print {
  .ui-enhanced-table-container {
    box-shadow: none;
    border: $semantic-border-width-1 solid $semantic-color-text-primary;
  }
  
  .ui-enhanced-table__filter-row,
  .ui-enhanced-table__loading-overlay,
  .ui-enhanced-table__resize-handle,
  .ui-enhanced-table__column-ghost {
    display: none !important;
  }
  
  .ui-enhanced-table__header {
    background: white !important;
  }
  
  .ui-enhanced-table__row,
  .ui-enhanced-table__virtual-row {
    break-inside: avoid;
  }
}

// Focus management for keyboard navigation
.ui-enhanced-table__header-cell:focus-visible,
.ui-enhanced-table__row:focus-visible,
.ui-enhanced-table__virtual-row:focus-visible {
  outline: 2px solid $semantic-color-focus;
  outline-offset: -2px;
}