/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Chart Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Charts (visualisation de données avec Chart.js)
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: MOYENNE #44
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 📊 CHART CONTAINER STYLES
// ============================================

.ui-chart {
  position: relative;
  display: block;
  width: 100%;
  @include lions-rounded('lg');
  background: $lions-white;
  padding: $lions-spacing-5;
  border: 1px solid $lions-gray-200;
  @include lions-shadow('sm');

  // Canvas element
  canvas {
    max-width: 100%;
    height: auto !important;
  }

  // Chart title
  .ui-chart-title {
    @include lions-font-size('lg');
    @include lions-font-weight('bold');
    color: $lions-text-primary;
    margin-bottom: $lions-spacing-4;
    text-align: center;
  }

  // Chart subtitle
  .ui-chart-subtitle {
    @include lions-font-size('sm');
    @include lions-font-weight('medium');
    color: $lions-gray-600;
    margin-bottom: $lions-spacing-3;
    text-align: center;
  }

  // Loading state
  &.ui-chart-loading {
    position: relative;
    min-height: 300px;

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

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 3rem;
      height: 3rem;
      border: 3px solid $lions-gray-200;
      border-top-color: $lions-blue-500;
      border-radius: 50%;
      animation: lions-chart-spin 1s linear infinite;
      z-index: 11;
    }
  }

  // Size variants
  &.ui-chart-sm {
    padding: $lions-spacing-3;

    canvas {
      max-height: 200px;
    }
  }

  &.ui-chart-lg {
    padding: $lions-spacing-6;

    canvas {
      min-height: 400px;
    }
  }

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

// ============================================
// 🎨 LIONS.DEV COLOR PALETTE FOR CHARTS
// ============================================

// Palette de couleurs Lions.dev pour les datasets
$lions-chart-colors: (
  primary: $lions-blue-500,
  secondary: $lions-gray-500,
  success: $lions-success-500,
  info: $lions-info-500,
  warning: $lions-warning-500,
  danger: $lions-danger-500,
  gold: $lions-gold-500,
  purple: #9333EA,
  pink: #EC4899,
  teal: #14B8A6,
  indigo: #6366F1,
  orange: #F97316
);

// Couleurs avec transparence pour les zones (area charts)
$lions-chart-colors-alpha: (
  primary: rgba($lions-blue-500, 0.2),
  secondary: rgba($lions-gray-500, 0.2),
  success: rgba($lions-success-500, 0.2),
  info: rgba($lions-info-500, 0.2),
  warning: rgba($lions-warning-500, 0.2),
  danger: rgba($lions-danger-500, 0.2),
  gold: rgba($lions-gold-500, 0.2),
  purple: rgba(#9333EA, 0.2),
  pink: rgba(#EC4899, 0.2),
  teal: rgba(#14B8A6, 0.2),
  indigo: rgba(#6366F1, 0.2),
  orange: rgba(#F97316, 0.2)
);

// ============================================
// 🏷️ CHART LEGEND STYLES
// ============================================

.chartjs-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: $lions-spacing-3;
  margin-top: $lions-spacing-4;
  padding: $lions-spacing-3;
  background: $lions-gray-50;
  @include lions-rounded('md');

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $lions-spacing-3;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: flex;
    align-items: center;
    gap: $lions-spacing-2;
    cursor: pointer;
    @include lions-transition();

    &:hover {
      opacity: 0.8;
    }

    &.hidden {
      opacity: 0.4;
      text-decoration: line-through;
    }

    span {
      @include lions-font-size('sm');
      @include lions-font-weight('medium');
      color: $lions-text-primary;
    }

    .legend-color {
      width: 1rem;
      height: 1rem;
      @include lions-rounded('sm');
      border: 2px solid transparent;
      @include lions-transition();

      &:hover {
        border-color: $lions-gray-400;
      }
    }
  }
}

// ============================================
// 💬 CHART TOOLTIP STYLES
// ============================================

.chartjs-tooltip {
  position: absolute;
  background: rgba($lions-gray-900, 0.95);
  color: $lions-white;
  @include lions-rounded('md');
  @include lions-shadow('lg');
  padding: $lions-spacing-3 $lions-spacing-4;
  pointer-events: none;
  z-index: 1000;
  @include lions-transition();
  opacity: 0;
  transform: translateY(10px);

  &.active {
    opacity: 1;
    transform: translateY(0);
  }

  .tooltip-title {
    @include lions-font-size('sm');
    @include lions-font-weight('bold');
    color: $lions-white;
    margin-bottom: $lions-spacing-2;
    padding-bottom: $lions-spacing-2;
    border-bottom: 1px solid rgba($lions-white, 0.2);
  }

  .tooltip-body {
    @include lions-font-size('sm');
    color: $lions-white;

    .tooltip-item {
      display: flex;
      align-items: center;
      gap: $lions-spacing-2;
      margin-bottom: $lions-spacing-1;

      &:last-child {
        margin-bottom: 0;
      }

      .tooltip-color {
        width: 0.75rem;
        height: 0.75rem;
        @include lions-rounded('sm');
        flex-shrink: 0;
      }

      .tooltip-label {
        @include lions-font-weight('medium');
        color: rgba($lions-white, 0.9);
      }

      .tooltip-value {
        @include lions-font-weight('bold');
        color: $lions-white;
        margin-left: auto;
      }
    }
  }
}

// ============================================
// 📈 CHART TYPE SPECIFIC STYLES
// ============================================

// Line Chart
.ui-chart-line {
  canvas {
    min-height: 300px;
  }
}

// Bar Chart
.ui-chart-bar {
  canvas {
    min-height: 300px;
  }
}

// Pie/Doughnut Chart
.ui-chart-pie,
.ui-chart-doughnut {
  canvas {
    max-width: 400px;
    margin: 0 auto;
  }

  .chartjs-legend {
    margin-top: $lions-spacing-5;
  }
}

// Radar Chart
.ui-chart-radar {
  canvas {
    max-width: 400px;
    margin: 0 auto;
  }
}

// Polar Area Chart
.ui-chart-polararea {
  canvas {
    max-width: 400px;
    margin: 0 auto;
  }
}

// ============================================
// 📊 CHART WRAPPER & GRID
// ============================================

.ui-chart-wrapper {
  position: relative;
  display: block;
  width: 100%;

  // Chart header avec actions
  .ui-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $lions-spacing-4;
    padding-bottom: $lions-spacing-3;
    border-bottom: 1px solid $lions-gray-200;

    .ui-chart-title {
      @include lions-font-size('lg');
      @include lions-font-weight('bold');
      color: $lions-text-primary;
      margin: 0;
    }

    .ui-chart-actions {
      display: flex;
      gap: $lions-spacing-2;

      button {
        @include lions-button-base;
        padding: $lions-spacing-2 $lions-spacing-3;
        @include lions-rounded('md');
        background: $lions-gray-100;
        border: 1px solid $lions-gray-300;
        color: $lions-gray-700;
        cursor: pointer;
        @include lions-transition();

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

        i {
          font-size: 1rem;
        }
      }
    }
  }

  // Chart footer avec légende ou infos
  .ui-chart-footer {
    margin-top: $lions-spacing-4;
    padding-top: $lions-spacing-3;
    border-top: 1px solid $lions-gray-200;
    @include lions-font-size('sm');
    color: $lions-gray-600;
    text-align: center;
  }
}

// Chart Grid (multiple charts)
.ui-chart-grid {
  display: grid;
  gap: $lions-spacing-5;

  &.ui-chart-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.ui-chart-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  &.ui-chart-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: $lions-breakpoint-lg) {
    &.ui-chart-grid-3,
    &.ui-chart-grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: $lions-breakpoint-md) {
    &.ui-chart-grid-2,
    &.ui-chart-grid-3,
    &.ui-chart-grid-4 {
      grid-template-columns: 1fr;
    }
  }
}

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

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

@keyframes lions-chart-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui-chart {
  animation: lions-chart-fade-in 0.4s ease-out;
}

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

@media (max-width: $lions-breakpoint-md) {
  .ui-chart {
    padding: $lions-spacing-4;

    canvas {
      min-height: 250px !important;
    }

    &.ui-chart-sm canvas {
      max-height: 180px;
    }

    &.ui-chart-lg canvas {
      min-height: 300px !important;
    }
  }

  .ui-chart-pie,
  .ui-chart-doughnut,
  .ui-chart-radar,
  .ui-chart-polararea {
    canvas {
      max-width: 100% !important;
    }
  }

  .chartjs-legend {
    padding: $lions-spacing-2;

    ul {
      gap: $lions-spacing-2;
    }

    li {
      @include lions-font-size('xs');

      .legend-color {
        width: 0.875rem;
        height: 0.875rem;
      }
    }
  }

  .ui-chart-wrapper {
    .ui-chart-header {
      flex-direction: column;
      align-items: flex-start;
      gap: $lions-spacing-3;

      .ui-chart-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}

@media (max-width: $lions-breakpoint-sm) {
  .ui-chart {
    padding: $lions-spacing-3;

    canvas {
      min-height: 200px !important;
    }
  }

  .chartjs-tooltip {
    padding: $lions-spacing-2 $lions-spacing-3;
    @include lions-font-size('xs');

    .tooltip-title {
      @include lions-font-size('xs');
    }
  }
}

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

.ui-chart {
  // Focus visible for interactive elements
  button:focus-visible {
    @include lions-focus-ring();
  }

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

    .chartjs-legend li {
      border: 2px solid currentColor;
      padding: $lions-spacing-1 $lions-spacing-2;
      @include lions-rounded('md');
    }
  }

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

    * {
      transition: none !important;
      animation: none !important;
    }
  }

  // Screen reader only text for data
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

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

// Chart with gradient background
.ui-chart-gradient {
  background: linear-gradient(135deg, rgba($lions-blue-50, 0.5) 0%, rgba($lions-white, 1) 100%);
}

// Chart with dark theme
.ui-chart-dark {
  background: $lions-gray-900;
  border-color: $lions-gray-700;

  .ui-chart-title,
  .ui-chart-subtitle {
    color: $lions-white;
  }

  .ui-chart-header {
    border-bottom-color: $lions-gray-700;

    .ui-chart-title {
      color: $lions-white;
    }
  }

  .ui-chart-footer {
    border-top-color: $lions-gray-700;
    color: $lions-gray-400;
  }

  .chartjs-legend {
    background: rgba($lions-gray-800, 0.5);

    li span {
      color: $lions-white;
    }
  }
}

// Chart full height
.ui-chart-fullheight {
  height: 100%;

  canvas {
    height: 100% !important;
  }
}

// Chart with hover effect
.ui-chart-hoverable {
  @include lions-transition();

  &:hover {
    @include lions-shadow('md');
    transform: translateY(-2px);
  }
}

// Chart export button
.ui-chart-export {
  position: absolute;
  top: $lions-spacing-3;
  right: $lions-spacing-3;

  button {
    @include lions-button-base;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    @include lions-flex-center;
    background: $lions-white;
    border: 1px solid $lions-gray-300;
    @include lions-rounded('md');
    @include lions-shadow('sm');
    color: $lions-gray-600;
    cursor: pointer;
    @include lions-transition();

    &:hover {
      background: $lions-blue-50;
      border-color: $lions-blue-300;
      color: $lions-blue-600;
      @include lions-shadow('md');
    }

    i {
      font-size: 1rem;
    }
  }
}
