/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Data Display Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles complets pour DataTable, DataView et composants de données
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #16-17
 * ═══════════════════════════════════════════════════════════
 */

@import '../variables';
@import '../mixins';

// ============================================
// 📊 DATATABLE BASE STYLES
// ============================================

.ui-datatable {
  @include lions-card;
  overflow: hidden;

  // Table wrapper
  .ui-datatable-tablewrapper {
    overflow-x: auto;
  }

  // Table element
  table {
    width: 100%;
    border-collapse: collapse;
    background: $lions-white;
    @include lions-font-size('base');
  }

  // Header
  .ui-datatable-thead {
    background: linear-gradient(135deg, rgba($lions-blue-50, 0.5) 0%, rgba($lions-blue-100, 0.3) 100%);
    border-bottom: 2px solid $lions-blue-500;

    th {
      padding: $lions-spacing-4 $lions-spacing-5;
      text-align: left;
      @include lions-font-weight('bold');
      color: $lions-text-primary;
      border-bottom: 1px solid $lions-gray-300;
      white-space: nowrap;
      @include lions-transition();

      // Sortable column
      &.ui-sortable-column {
        cursor: pointer;

        &:hover {
          background: rgba($lions-blue-100, 0.5);
          color: $lions-blue-700;
        }

        .ui-sortable-column-icon {
          margin-left: $lions-spacing-2;
          color: $lions-gray-500;
          @include lions-transition();
        }

        &.ui-state-active {
          background: rgba($lions-blue-200, 0.6);
          color: $lions-blue-700;

          .ui-sortable-column-icon {
            color: $lions-blue-600;
          }
        }
      }

      // Filter inputs in header
      .ui-column-filter {
        width: 100%;
        margin-top: $lions-spacing-2;
        @include lions-input-base;
        @include lions-input-size('sm');
      }
    }
  }

  // Body
  .ui-datatable-data {
    tr {
      border-bottom: 1px solid $lions-gray-200;
      @include lions-transition();

      &:hover {
        background: rgba($lions-blue-50, 0.4);
      }

      &.ui-state-highlight {
        background: rgba($lions-blue-100, 0.6);
        color: $lions-blue-900;
      }

      // Striped rows
      &:nth-child(even) {
        background: rgba($lions-gray-50, 0.3);

        &:hover {
          background: rgba($lions-blue-50, 0.5);
        }
      }

      td {
        padding: $lions-spacing-4 $lions-spacing-5;
        color: $lions-text-primary;
        vertical-align: middle;
        border-bottom: 1px solid $lions-gray-200;

        // Row editor controls
        .ui-row-editor {
          display: flex;
          gap: $lions-spacing-2;

          .ui-icon {
            cursor: pointer;
            color: $lions-blue-500;
            padding: $lions-spacing-1;
            @include lions-rounded('sm');
            @include lions-transition();

            &:hover {
              background: rgba($lions-blue-100, 0.8);
              color: $lions-blue-700;
            }
          }
        }
      }
    }
  }

  // Empty message
  .ui-datatable-empty-message {
    td {
      text-align: center;
      padding: $lions-spacing-8 !important;
      color: $lions-text-secondary;
      @include lions-font-size('lg');
    }
  }

  // Small size variant
  &.ui-datatable-sm {
    th, td {
      padding: $lions-spacing-2 $lions-spacing-3;
      @include lions-font-size('sm');
    }
  }

  // Large size variant
  &.ui-datatable-lg {
    th, td {
      padding: $lions-spacing-5 $lions-spacing-6;
      @include lions-font-size('lg');
    }
  }

  // Gridlines variant
  &.ui-datatable-gridlines {
    td, th {
      border: 1px solid $lions-gray-300;
    }
  }
}

// ============================================
// 📄 DATATABLE PAGINATOR
// ============================================

.ui-paginator {
  background: linear-gradient(135deg, rgba($lions-gray-50, 0.8) 0%, rgba($lions-gray-100, 0.5) 100%);
  border-top: 1px solid $lions-gray-300;
  padding: $lions-spacing-3 $lions-spacing-5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: $lions-spacing-3;

  // Current page report
  .ui-paginator-current {
    @include lions-font-size('sm');
    color: $lions-text-secondary;
    margin-right: auto;
  }

  // Page links container
  .ui-paginator-pages {
    display: flex;
    gap: $lions-spacing-1;
  }

  // Page link buttons
  .ui-paginator-page,
  .ui-paginator-first,
  .ui-paginator-prev,
  .ui-paginator-next,
  .ui-paginator-last {
    @include lions-button-base;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    @include lions-flex-center;
    background: $lions-white;
    border: 1px solid $lions-gray-300;
    color: $lions-text-primary;
    @include lions-transition();

    &:hover:not(.ui-state-disabled):not(.ui-state-active) {
      background: $lions-blue-50;
      border-color: $lions-blue-500;
      color: $lions-blue-700;
    }

    &.ui-state-active {
      @include lions-gradient-blue;
      border-color: $lions-blue-700;
      color: $lions-white;
      font-weight: $lions-font-bold;
    }

    &.ui-state-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // Rows per page dropdown
  .ui-paginator-rpp-options {
    @include lions-input-base;
    @include lions-input-size('sm');
    min-width: 80px;
  }
}

// ============================================
// 🔍 DATATABLE SELECTION
// ============================================

.ui-datatable {
  // Checkbox selection column
  .ui-selection-column {
    width: 3rem;
    text-align: center;

    .ui-chkbox {
      @include lions-flex-center;
    }
  }

  // Radio selection column
  .ui-radiobutton-column {
    width: 3rem;
    text-align: center;

    .ui-radiobutton {
      @include lions-flex-center;
    }
  }
}

// ============================================
// 📋 DATAVIEW BASE STYLES
// ============================================

.ui-dataview {
  .ui-dataview-header {
    background: linear-gradient(135deg, rgba($lions-blue-50, 0.5) 0%, rgba($lions-blue-100, 0.3) 100%);
    border-bottom: 2px solid $lions-blue-500;
    padding: $lions-spacing-4 $lions-spacing-5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ui-dataview-layout-options {
      display: flex;
      gap: $lions-spacing-1;

      .ui-button {
        @include lions-button-base;
        @include lions-button-size('sm');
        background: $lions-white;
        border: 1px solid $lions-gray-300;
        color: $lions-text-primary;

        &:hover {
          background: $lions-blue-50;
          border-color: $lions-blue-500;
          color: $lions-blue-700;
        }

        &.ui-state-active {
          @include lions-gradient-blue;
          border-color: $lions-blue-700;
          color: $lions-white;
        }
      }
    }
  }

  .ui-dataview-content {
    padding: $lions-spacing-5;
    background: $lions-white;
  }

  // List layout
  .ui-dataview-list {
    .ui-dataview-row {
      padding: $lions-spacing-4;
      border-bottom: 1px solid $lions-gray-200;
      @include lions-transition();

      &:hover {
        background: rgba($lions-blue-50, 0.4);
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  // Grid layout
  .ui-dataview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: $lions-spacing-5;

    @media (max-width: $lions-breakpoint-md) {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: $lions-spacing-4;
    }

    @media (max-width: $lions-breakpoint-sm) {
      grid-template-columns: 1fr;
    }
  }

  // Empty message
  .ui-dataview-emptymessage {
    text-align: center;
    padding: $lions-spacing-8;
    color: $lions-text-secondary;
    @include lions-font-size('lg');
  }
}

// ============================================
// 📊 SCROLLABLE DATATABLE
// ============================================

.ui-datatable-scrollable {
  .ui-datatable-scrollable-header,
  .ui-datatable-scrollable-footer {
    background: linear-gradient(135deg, rgba($lions-blue-50, 0.5) 0%, rgba($lions-blue-100, 0.3) 100%);
    border-bottom: 2px solid $lions-blue-500;
  }

  .ui-datatable-scrollable-body {
    overflow: auto;

    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: $lions-gray-100;
    }

    &::-webkit-scrollbar-thumb {
      background: $lions-gray-400;
      @include lions-rounded('full');

      &:hover {
        background: $lions-blue-500;
      }
    }
  }
}

// ============================================
// 🔄 RESIZABLE & REORDERABLE COLUMNS
// ============================================

.ui-datatable {
  // Column resizer
  .ui-column-resizer {
    width: 2px;
    background: $lions-blue-500;
    cursor: col-resize;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    opacity: 0;
    @include lions-transition();

    &:hover {
      opacity: 1;
    }
  }

  th:hover .ui-column-resizer {
    opacity: 0.5;
  }

  // Reorderable column indicator
  .ui-datatable-reorderablerow-handle {
    cursor: move;
    color: $lions-gray-500;
    padding: 0 $lions-spacing-2;

    &:hover {
      color: $lions-blue-500;
    }
  }
}

// ============================================
// 🎯 ROW EXPANSION
// ============================================

.ui-datatable {
  .ui-row-toggler {
    cursor: pointer;
    color: $lions-blue-500;
    @include lions-transition();

    &:hover {
      color: $lions-blue-700;
    }
  }

  .ui-expanded-row-content {
    td {
      background: rgba($lions-blue-50, 0.2);
      border-left: 4px solid $lions-blue-500;
    }
  }
}

// ============================================
// 📱 RESPONSIVE DATATABLE
// ============================================

@media (max-width: $lions-breakpoint-md) {
  .ui-datatable {
    th, td {
      padding: $lions-spacing-3 $lions-spacing-4;
      @include lions-font-size('sm');
    }
  }

  .ui-paginator {
    flex-direction: column;
    align-items: stretch;

    .ui-paginator-current {
      text-align: center;
      margin: 0 0 $lions-spacing-2 0;
    }

    .ui-paginator-pages {
      justify-content: center;
    }
  }

  .ui-dataview-grid {
    grid-template-columns: 1fr;
  }
}

// ============================================
// ♿ ACCESSIBILITY ENHANCEMENTS
// ============================================

.ui-datatable,
.ui-dataview {
  // Focus visible
  th:focus-visible,
  td:focus-visible,
  .ui-paginator-page:focus-visible {
    @include lions-focus-ring();
  }

  // High contrast mode
  @media (prefers-contrast: high) {
    border-width: 2px !important;

    th, td {
      border-width: 2px !important;
    }
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    tr, th, td, .ui-paginator-page {
      transition: none !important;
    }
  }
}

// ============================================
// 🎨 DATATABLE SEVERITY ROW STYLES
// ============================================

.ui-datatable-data {
  tr {
    &.row-success {
      background: rgba($lions-success-50, 0.3);
      border-left: 4px solid $lions-success-500;
    }

    &.row-warning {
      background: rgba($lions-warning-50, 0.3);
      border-left: 4px solid $lions-warning-500;
    }

    &.row-danger {
      background: rgba($lions-danger-50, 0.3);
      border-left: 4px solid $lions-danger-500;
    }

    &.row-info {
      background: rgba($lions-info-50, 0.3);
      border-left: 4px solid $lions-info-500;
    }
  }
}
