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

.ui-file-upload {
  position: relative;
  width: 100%;

  // Size Variants
  &--sm {
    min-height: 36px;
    
    .ui-file-upload__dropzone {
      padding: $semantic-spacing-component-sm;
      font-size: 0.875rem;
    }
  }

  &--md {
    min-height: 48px;
    
    .ui-file-upload__dropzone {
      padding: $semantic-spacing-component-md;
      font-size: 1rem;
    }
  }

  &--lg {
    min-height: 56px;
    
    .ui-file-upload__dropzone {
      padding: $semantic-spacing-component-lg;
      font-size: 1.125rem;
    }
  }

  // Variant Styles
  &--outlined {
    .ui-file-upload__dropzone {
      background: $semantic-color-surface-primary;
      border: 1px solid $semantic-color-border-primary;
      border-radius: 0.375rem;
    }
  }

  &--filled {
    .ui-file-upload__dropzone {
      background: $semantic-color-surface-secondary;
      border: 1px solid transparent;
      border-radius: 0.375rem;
    }
  }

  &--underlined {
    .ui-file-upload__dropzone {
      background: transparent;
      border: none;
      border-bottom: 1px solid $semantic-color-border-primary;
      border-radius: 0;
    }
  }

  // State Styles
  &--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    
    .ui-file-upload__dropzone {
      pointer-events: none;
      background: $semantic-color-surface-primary;
      color: $semantic-color-text-disabled;
    }
  }

  &--error {
    .ui-file-upload__dropzone {
      border-color: $semantic-color-error;
      background: $semantic-color-error-container;
    }
  }

  &--success {
    .ui-file-upload__dropzone {
      border-color: $semantic-color-success;
      background: $semantic-color-surface-secondary;
    }
  }

  &--dragover {
    .ui-file-upload__dropzone {
      border-color: $semantic-color-primary;
      background: $semantic-color-surface-secondary;
      box-shadow: $semantic-shadow-elevation-2;
      transform: scale(1.02);
    }
  }

  // Label
  &__label {
    display: block;
    margin-bottom: $semantic-spacing-stack-xs;
    font-size: 0.875rem;
    font-weight: 500;
    color: $semantic-color-text-primary;

    &--required::after {
      content: ' *';
      color: $semantic-color-error;
    }
  }

  // Dropzone
  &__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s $semantic-motion-easing-ease-in-out;
    color: $semantic-color-text-secondary;

    &:hover:not(.ui-file-upload--disabled &) {
      border-color: $semantic-color-primary;
      background: $semantic-color-surface-secondary;
      box-shadow: $semantic-shadow-elevation-1;
    }

    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
  }

  // Hidden Input
  &__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  // Upload Icon
  &__icon {
    font-size: 1.5rem;
    margin-bottom: $semantic-spacing-stack-xs;
    color: $semantic-color-text-tertiary;
  }

  // Upload Text
  &__text {
    margin-bottom: $semantic-spacing-stack-xs;
    
    &-primary {
      font-weight: 600;
      color: $semantic-color-text-primary;
    }
    
    &-secondary {
      font-size: 0.875rem;
      color: $semantic-color-text-tertiary;
    }
  }

  // Browse Button
  &__browse-btn {
    display: inline-flex;
    align-items: center;
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s $semantic-motion-easing-ease-in-out;
    margin-top: $semantic-spacing-stack-xs;

    &:hover {
      background: $semantic-color-primary-hover;
      box-shadow: $semantic-shadow-elevation-2;
    }

    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
  }

  // File List
  &__file-list {
    margin-top: $semantic-spacing-stack-md;
  }

  // File Item
  &__file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $semantic-spacing-component-sm;
    background: $semantic-color-surface-secondary;
    border: 1px solid $semantic-color-border-subtle;
    border-radius: 0.25rem;
    margin-bottom: $semantic-spacing-stack-xs;
    transition: all 0.15s $semantic-motion-easing-ease-in-out;

    &:hover {
      box-shadow: $semantic-shadow-elevation-1;
    }

    &--uploading {
      opacity: 0.7;
      position: relative;
      overflow: hidden;
    }

    &--error {
      background: $semantic-color-error-container;
      border-color: $semantic-color-error;
    }

    &--success {
      background: $semantic-color-surface-secondary;
      border-color: $semantic-color-success;
    }
  }

  // File Info
  &__file-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  &__file-icon {
    font-size: 1.25rem;
    margin-right: $semantic-spacing-stack-xs;
    color: $semantic-color-text-tertiary;
  }

  &__file-details {
    min-width: 0;
    flex: 1;
  }

  &__file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: $semantic-color-text-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  &__file-size {
    font-size: 0.8125rem;
    color: $semantic-color-text-tertiary;
  }

  // File Actions
  &__file-actions {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-stack-xs;
  }

  // Remove Button
  &__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: $semantic-color-text-tertiary;
    cursor: pointer;
    transition: all 0.15s $semantic-motion-easing-ease-in-out;

    &:hover {
      background: $semantic-color-error-container;
      color: $semantic-color-error;
    }

    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
  }

  // Progress Bar
  &__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: $semantic-color-primary;
    border-radius: 0.125rem;
    transition: width 0.3s $semantic-motion-easing-ease-in-out;
  }

  // Helper Text
  &__helper-text {
    margin-top: $semantic-spacing-stack-xs;
    font-size: 0.875rem;
    
    &--default {
      color: $semantic-color-text-tertiary;
    }
    
    &--error {
      color: $semantic-color-error;
    }
    
    &--success {
      color: $semantic-color-success;
    }
  }

  // Loading State
  &--loading {
    .ui-file-upload__dropzone {
      cursor: wait;
      opacity: 0.7;
    }
  }

  // Responsive Design
  @media (max-width: $semantic-breakpoint-md - 1) {
    &__dropzone {
      padding: $semantic-spacing-component-sm;
    }
    
    &__file-name {
      font-size: 0.75rem;
    }
  }

  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__dropzone {
      padding: $semantic-spacing-component-xs;
    }
    
    &__text-primary {
      font-size: 0.875rem;
    }
    
    &__text-secondary {
      font-size: 0.8125rem;
    }
  }
}