/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Tree Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Tree et TreeTable (affichage hiérarchique)
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: MOYENNE #31-32
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 🌳 TREE STYLES
// ============================================

.ui-tree {
  @include lions-rounded('lg');
  border: 1px solid $lions-gray-200;
  background: $lions-white;
  padding: $lions-spacing-3;
  @include lions-shadow('sm');

  .ui-tree-container {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-treenode {
    margin: 0;
    padding: 0;
    list-style: none;

    .ui-treenode-content {
      display: flex;
      align-items: center;
      gap: $lions-spacing-2;
      padding: $lions-spacing-2 $lions-spacing-3;
      @include lions-rounded('md');
      @include lions-transition();
      cursor: pointer;
      position: relative;

      &:hover {
        background: $lions-gray-50;
      }

      &.ui-treenode-selectable {
        &.ui-state-highlight {
          background: $lions-blue-50;
          color: $lions-blue-700;
          @include lions-font-weight('semibold');

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

      &:focus-visible {
        @include lions-focus-ring();
      }
    }

    .ui-tree-toggler {
      @include lions-button-base;
      width: 1.5rem;
      height: 1.5rem;
      min-width: 1.5rem;
      padding: 0;
      @include lions-flex-center;
      background: transparent;
      border: 1px solid transparent;
      @include lions-rounded('sm');
      color: $lions-gray-600;
      cursor: pointer;
      @include lions-transition();

      &:hover {
        background: $lions-gray-100;
        border-color: $lions-gray-300;
        color: $lions-blue-600;
      }

      .ui-tree-toggler-icon {
        font-size: 0.875rem;
        @include lions-transition();
      }

      &.ui-tree-toggler-expanded {
        .ui-tree-toggler-icon {
          transform: rotate(90deg);
        }
      }
    }

    .ui-treenode-icon {
      font-size: 1rem;
      color: $lions-gray-500;
      @include lions-transition();
    }

    .ui-treenode-label {
      flex: 1;
      @include lions-font-size('base');
      color: $lions-text-primary;
      @include lions-transition();
    }

    // Child nodes
    .ui-treenode-children {
      list-style: none;
      margin: 0;
      padding-left: $lions-spacing-6;
      position: relative;

      // Indent guide lines
      &::before {
        content: '';
        position: absolute;
        left: $lions-spacing-3;
        top: 0;
        bottom: $lions-spacing-2;
        width: 1px;
        background: $lions-gray-200;
      }
    }

    // Leaf nodes (no children)
    &.ui-treenode-leaf {
      .ui-tree-toggler {
        visibility: hidden;
      }
    }
  }

  // Drag & Drop support
  &.ui-tree-dragdrop {
    .ui-treenode-content {
      &.ui-treenode-droppable-active {
        background: rgba($lions-blue-50, 0.5);
        border: 2px dashed $lions-blue-400;
      }
    }

    .ui-treenode-droppoint {
      height: 2px;
      background: $lions-blue-500;
      margin: $lions-spacing-1 0;
      @include lions-rounded('full');
      opacity: 0;
      @include lions-transition();

      &.ui-treenode-droppoint-active {
        opacity: 1;
      }
    }
  }

  // Filter input
  .ui-tree-filter-container {
    margin-bottom: $lions-spacing-3;

    .ui-tree-filter {
      width: 100%;
      height: $lions-input-height-base;
      padding: $lions-spacing-3 $lions-spacing-4;
      padding-left: 2.5rem;
      @include lions-rounded('md');
      border: 1px solid $lions-gray-300;
      @include lions-font-size('base');
      color: $lions-text-primary;
      background: $lions-white;
      @include lions-transition();

      &::placeholder {
        color: $lions-gray-400;
      }

      &:focus {
        outline: none;
        border-color: $lions-blue-500;
        box-shadow: 0 0 0 3px rgba($lions-blue-500, 0.15);
      }
    }

    .ui-tree-filter-icon {
      position: absolute;
      left: $lions-spacing-3;
      top: 50%;
      transform: translateY(-50%);
      color: $lions-gray-500;
      font-size: 1rem;
    }
  }

  // Checkbox variant
  &.ui-tree-checkbox {
    .ui-chkbox {
      margin-right: $lions-spacing-2;

      .ui-chkbox-box {
        width: 1.125rem;
        height: 1.125rem;
        @include lions-rounded('sm');
        border: 2px solid $lions-gray-400;
        background: $lions-white;
        @include lions-transition();

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

          .ui-chkbox-icon {
            color: $lions-white;
            font-size: 0.75rem;
          }
        }
      }
    }
  }

  // Loading state
  &.ui-tree-loading {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba($lions-white, 0.8);
      @include lions-flex-center;
      z-index: 10;
    }
  }
}

// ============================================
// 📊 TREE TABLE STYLES
// ============================================

.ui-treetable {
  @include lions-rounded('lg');
  border: 1px solid $lions-gray-200;
  background: $lions-white;
  overflow: hidden;
  @include lions-shadow('sm');

  .ui-treetable-header {
    background: $lions-gray-100;
    border-bottom: 2px solid $lions-gray-300;
  }

  .ui-treetable-thead {
    th {
      padding: $lions-spacing-4;
      @include lions-font-size('sm');
      @include lions-font-weight('semibold');
      color: $lions-text-primary;
      text-align: left;
      background: $lions-gray-100;
      border-bottom: 2px solid $lions-gray-300;
      @include lions-transition();

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

        &:hover {
          background: $lions-gray-200;
        }
      }

      &.ui-state-active {
        background: $lions-blue-50;
        color: $lions-blue-700;

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

      .ui-sortable-column-icon {
        margin-left: $lions-spacing-2;
        color: $lions-gray-400;
        font-size: 0.875rem;
        @include lions-transition();
      }
    }
  }

  .ui-treetable-tbody {
    tr {
      @include lions-transition();

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

      &.ui-state-highlight {
        background: $lions-blue-50;

        td {
          color: $lions-blue-700;
          @include lions-font-weight('medium');
        }
      }

      &.ui-treetable-row-selected {
        background: $lions-blue-50;
        border-left: 3px solid $lions-blue-500;
      }
    }

    td {
      padding: $lions-spacing-4;
      border-bottom: 1px solid $lions-gray-200;
      @include lions-font-size('base');
      color: $lions-text-primary;
      @include lions-transition();

      &.ui-treetable-toggler {
        width: 3rem;
      }
    }

    .ui-treetable-toggler {
      @include lions-button-base;
      width: 1.75rem;
      height: 1.75rem;
      min-width: 1.75rem;
      padding: 0;
      @include lions-flex-center;
      background: transparent;
      border: 1px solid transparent;
      @include lions-rounded('md');
      color: $lions-gray-600;
      cursor: pointer;
      @include lions-transition();

      &:hover {
        background: $lions-gray-100;
        border-color: $lions-gray-300;
        color: $lions-blue-600;
      }

      .ui-treetable-toggler-icon {
        font-size: 0.875rem;
        @include lions-transition();
      }

      &.ui-icon-triangle-1-e {
        .ui-treetable-toggler-icon {
          transform: rotate(0deg);
        }
      }

      &.ui-icon-triangle-1-s {
        .ui-treetable-toggler-icon {
          transform: rotate(90deg);
        }
      }
    }

    // Indent for child rows
    tr[data-level="1"] .ui-treetable-indent {
      padding-left: $lions-spacing-6;
    }

    tr[data-level="2"] .ui-treetable-indent {
      padding-left: calc(#{$lions-spacing-6} * 2);
    }

    tr[data-level="3"] .ui-treetable-indent {
      padding-left: calc(#{$lions-spacing-6} * 3);
    }

    tr[data-level="4"] .ui-treetable-indent {
      padding-left: calc(#{$lions-spacing-6} * 4);
    }
  }

  .ui-treetable-footer {
    padding: $lions-spacing-4;
    background: $lions-gray-50;
    border-top: 1px solid $lions-gray-200;
    @include lions-font-size('sm');
    color: $lions-gray-600;
  }

  // Scrollable variant
  &.ui-treetable-scrollable {
    .ui-treetable-scrollable-header,
    .ui-treetable-scrollable-footer {
      overflow: hidden;
    }

    .ui-treetable-scrollable-body {
      overflow: auto;
      position: relative;
    }

    .ui-treetable-scrollable-header-box {
      border-right: 1px solid $lions-gray-200;
    }
  }

  // Striped rows
  &.ui-treetable-striped {
    .ui-treetable-tbody {
      tr:nth-child(odd) {
        background: $lions-gray-50;

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

  // Resizable columns
  &.ui-treetable-resizable {
    .ui-treetable-thead {
      th {
        position: relative;

        .ui-column-resizer {
          position: absolute;
          top: 0;
          right: 0;
          width: 8px;
          height: 100%;
          cursor: col-resize;
          background: transparent;
          @include lions-transition();

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

  // Checkbox selection
  &.ui-treetable-checkbox {
    .ui-chkbox {
      .ui-chkbox-box {
        width: 1.125rem;
        height: 1.125rem;
        @include lions-rounded('sm');
        border: 2px solid $lions-gray-400;
        background: $lions-white;
        @include lions-transition();

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

          .ui-chkbox-icon {
            color: $lions-white;
            font-size: 0.75rem;
          }
        }
      }
    }
  }

  // Loading overlay
  .ui-treetable-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba($lions-white, 0.8);
    @include lions-flex-center;
    z-index: 10;

    .ui-treetable-loading-icon {
      font-size: 2rem;
      color: $lions-blue-500;
      animation: lions-spin 1s linear infinite;
    }
  }

  // Empty message
  .ui-treetable-emptymessage {
    padding: $lions-spacing-8;
    text-align: center;
    color: $lions-gray-500;
    @include lions-font-size('base');
  }
}

// ============================================
// 🎬 ANIMATIONS
// ============================================

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

@keyframes lions-tree-expand {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Tree node expand animation
.ui-treenode-children {
  animation: lions-tree-expand 0.2s ease-out;
}

// ============================================
// 📱 RESPONSIVE ADJUSTMENTS
// ============================================

@media (max-width: $lions-breakpoint-md) {
  .ui-tree {
    .ui-treenode-content {
      padding: $lions-spacing-2;
    }

    .ui-treenode-children {
      padding-left: $lions-spacing-4;
    }

    .ui-tree-filter-container {
      .ui-tree-filter {
        @include lions-font-size('sm');
      }
    }
  }

  .ui-treetable {
    .ui-treetable-thead th,
    .ui-treetable-tbody td {
      padding: $lions-spacing-3;
      @include lions-font-size('sm');
    }

    // Responsive table mode
    &.ui-treetable-responsive {
      .ui-treetable-thead {
        display: none;
      }

      .ui-treetable-tbody {
        tr {
          display: block;
          margin-bottom: $lions-spacing-3;
          border: 1px solid $lions-gray-200;
          @include lions-rounded('md');
        }

        td {
          display: block;
          text-align: right;
          padding: $lions-spacing-3;
          border-bottom: 1px solid $lions-gray-100;

          &::before {
            content: attr(data-label);
            float: left;
            font-weight: $lions-font-semibold;
            color: $lions-gray-700;
          }

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

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

.ui-tree,
.ui-treetable {
  // Focus visible
  .ui-treenode-content:focus-visible,
  .ui-tree-toggler:focus-visible,
  .ui-treetable-toggler:focus-visible {
    @include lions-focus-ring();
  }

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

    .ui-treenode-content,
    .ui-tree-toggler,
    .ui-treetable-toggler,
    th,
    td {
      border-width: 2px !important;
    }
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }

    .ui-tree-toggler-icon,
    .ui-treetable-toggler-icon {
      transform: none !important;
    }
  }
}

// ============================================
// 🎨 UTILITY CLASSES
// ============================================

// Compact tree
.ui-tree-compact {
  .ui-treenode-content {
    padding: $lions-spacing-1 $lions-spacing-2;
  }

  .ui-treenode-label {
    @include lions-font-size('sm');
  }

  .ui-treenode-children {
    padding-left: $lions-spacing-4;
  }
}

// Large tree
.ui-tree-lg {
  .ui-treenode-content {
    padding: $lions-spacing-3 $lions-spacing-4;
  }

  .ui-treenode-label {
    @include lions-font-size('lg');
  }

  .ui-tree-toggler {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }
}

// Borderless tree
.ui-tree-borderless {
  border: none;
  box-shadow: none;
  padding: 0;
}
