@import './icons.scss';

.reference-image-manager {
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  // ==================== 顶部标题栏 ====================
  .manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;

      .manager-title {
        font-size: 24px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;

        i {
          color: #6366f1;
          font-size: 28px;
        }
      }

      .image-count {
        padding: 4px 12px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
      }
    }

    .header-right {
      display: flex;
      gap: 12px;

      .btn-view-mode {
        padding: 8px 16px;
        border: 1px solid #e5e7eb;
        background: white;
        color: #6b7280;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s;

        &:hover {
          border-color: #6366f1;
          color: #6366f1;
          background: #f5f3ff;
        }

        &.active {
          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
          color: white;
          border-color: transparent;
        }
      }

      .btn-upload {
        padding: 10px 20px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }

  // ==================== 分类筛选标签 ====================
  .category-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;

    .filter-tag {
      padding: 8px 16px;
      border: 2px solid #e5e7eb;
      background: white;
      color: #6b7280;
      border-radius: 24px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s;

      i {
        font-size: 16px;
      }

      &:hover {
        border-color: #6366f1;
        background: #f5f3ff;
        color: #6366f1;
      }

      &.active {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
      }

      &.filter-tag-lighting.active {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
      }

      &.filter-tag-furniture.active {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      }

      &.filter-tag-atmosphere.active {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
      }

      &.filter-tag-structure.active {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      }

      &.filter-tag-uncategorized.active {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      }
    }
  }

  // ==================== 网格视图 ====================
  .images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;

    .image-card {
      background: white;
      border: 2px solid #f0f0f0;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        border-color: #6366f1;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
        transform: translateY(-4px);
      }

      &.selected {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      }

      .image-container {
        position: relative;
        width: 100%;
        padding-top: 75%; // 4:3 aspect ratio
        background: #f9fafb;
        overflow: hidden;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          opacity: 0;
          transition: opacity 0.3s;

          .btn-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            border: none;
            color: #6b7280;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;

            &:hover {
              background: #6366f1;
              color: white;
              transform: scale(1.1);
            }
          }
        }

        &:hover .image-overlay {
          opacity: 1;
        }
      }

      .image-info {
        padding: 16px;

        .image-name {
          font-size: 15px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 12px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .image-categories {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-bottom: 12px;

          .category-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            
            &.category-lighting {
              background: #fef3c7;
              color: #d97706;
            }

            &.category-furniture {
              background: #d1fae5;
              color: #059669;
            }

            &.category-atmosphere {
              background: #fce7f3;
              color: #db2777;
            }

            &.category-structure {
              background: #dbeafe;
              color: #2563eb;
            }

            &.category-uncategorized {
              background: #fee2e2;
              color: #dc2626;
            }
          }
        }

        .image-description {
          font-size: 13px;
          color: #6b7280;
          line-height: 1.5;
          margin: 0 0 12px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .btn-ai-assist {
          width: 100%;
          padding: 8px 12px;
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          color: white;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
          }

          i {
            font-size: 16px;
          }
        }
      }
    }
  }

  // ==================== 列表视图 ====================
  .images-list {
    .list-header {
      display: grid;
      grid-template-columns: 100px 1fr 200px 2fr 120px;
      gap: 16px;
      padding: 12px 16px;
      background: #f9fafb;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .list-row {
      display: grid;
      grid-template-columns: 100px 1fr 200px 2fr 120px;
      gap: 16px;
      padding: 16px;
      background: white;
      border: 2px solid #f0f0f0;
      border-radius: 8px;
      margin-bottom: 12px;
      align-items: center;
      transition: all 0.3s;

      &:hover {
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
      }

      &.selected {
        border-color: #6366f1;
        background: #f5f3ff;
      }

      .col-preview {
        img {
          width: 80px;
          height: 60px;
          object-fit: cover;
          border-radius: 6px;
          cursor: pointer;
          transition: transform 0.3s;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      .col-name {
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
      }

      .col-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        .category-badge {
          padding: 4px 10px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 500;
          
          &.category-lighting {
            background: #fef3c7;
            color: #d97706;
          }

          &.category-furniture {
            background: #d1fae5;
            color: #059669;
          }

          &.category-atmosphere {
            background: #fce7f3;
            color: #db2777;
          }

          &.category-structure {
            background: #dbeafe;
            color: #2563eb;
          }

          &.category-uncategorized {
            background: #fee2e2;
            color: #dc2626;
          }
        }
      }

      .col-description {
        p {
          font-size: 13px;
          color: #6b7280;
          line-height: 1.5;
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .text-muted {
          color: #9ca3af;
          font-size: 13px;
        }
      }

      .col-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;

        .btn-icon {
          width: 36px;
          height: 36px;
          border-radius: 6px;
          background: #f3f4f6;
          border: none;
          color: #6b7280;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s;

          &:hover {
            background: #6366f1;
            color: white;
          }
        }
      }
    }
  }

  // ==================== 空状态 ====================
  .empty-state {
    text-align: center;
    padding: 60px 20px;

    .empty-icon {
      i {
        font-size: 64px;
        color: #d1d5db;
      }
    }

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #6b7280;
      margin: 20px 0 8px 0;
    }

    p {
      font-size: 14px;
      color: #9ca3af;
      margin: 0 0 24px 0;
    }

    .btn-primary {
      padding: 12px 24px;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
      }
    }
  }

  // ==================== 对话框样式 ====================
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .modal-dialog {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s;

    &.modal-dialog-large {
      max-width: 900px;
    }

    &.modal-dialog-ai {
      max-width: 1000px;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .modal-header {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        color: #6366f1;
      }
    }

    .btn-close {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: #f3f4f6;
      border: none;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: #ef4444;
        color: white;
      }
    }
  }

  .modal-body {
    padding: 24px;
    max-height: calc(90vh - 160px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f3f4f6;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 4px;

      &:hover {
        background: #9ca3af;
      }
    }
  }

  .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    button {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &.btn-secondary {
        background: #f3f4f6;
        color: #6b7280;
        border: none;

        &:hover {
          background: #e5e7eb;
        }
      }

      &.btn-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          transform: none;
        }
      }
    }
  }

  // ==================== 上传区域 ====================
  .upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    transition: all 0.3s;

    &.dragging {
      border-color: #6366f1;
      background: #f5f3ff;
    }

    i {
      font-size: 48px;
      color: #9ca3af;
      display: block;
      margin-bottom: 16px;
    }

    p {
      font-size: 14px;
      color: #6b7280;
      margin: 0 0 16px 0;
    }

    .btn-select-file {
      padding: 10px 20px;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
      }
    }
  }

  .selected-files {
    margin-top: 24px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 16px 0;
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: #f9fafb;
      border-radius: 8px;
      margin-bottom: 8px;

      img {
        width: 60px;
        height: 45px;
        object-fit: cover;
        border-radius: 4px;
      }

      .file-info {
        flex: 1;

        .file-name {
          font-size: 14px;
          font-weight: 500;
          color: #1a1a1a;
          margin: 0 0 4px 0;
        }

        .file-size {
          font-size: 12px;
          color: #9ca3af;
          margin: 0;
        }
      }

      .btn-remove {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: #fee2e2;
        border: none;
        color: #dc2626;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        &:hover {
          background: #dc2626;
          color: white;
        }
      }
    }
  }

  // ==================== 编辑表单 ====================
  .edit-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;

    .edit-preview {
      img {
        width: 100%;
        border-radius: 8px;
      }
    }

    .edit-form {
      .form-group {
        margin-bottom: 20px;

        label {
          display: block;
          font-size: 14px;
          font-weight: 600;
          color: #374151;
          margin-bottom: 8px;

          .label-tip {
            font-size: 12px;
            font-weight: 400;
            color: #9ca3af;
            margin-left: 8px;
          }
        }

        .form-control {
          width: 100%;
          padding: 10px 12px;
          border: 1px solid #d1d5db;
          border-radius: 8px;
          font-size: 14px;
          color: #1a1a1a;
          transition: all 0.3s;
          font-family: inherit;

          &:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
          }
        }

        .category-checkboxes {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;

          .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            transition: all 0.3s;

            &:hover {
              border-color: #6366f1;
              background: #f5f3ff;
            }

            input[type="checkbox"] {
              cursor: pointer;

              &:checked + .checkbox-text {
                color: #6366f1;
                font-weight: 600;
              }
            }

            .checkbox-text {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 14px;
              color: #6b7280;
              transition: all 0.3s;

              i {
                font-size: 16px;
              }
            }
          }
        }

        .tags-input {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          padding: 8px;
          border: 1px solid #d1d5db;
          border-radius: 8px;
          min-height: 42px;
          transition: all 0.3s;

          &:focus-within {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
          }

          .tag {
            padding: 4px 10px;
            background: #6366f1;
            color: white;
            border-radius: 12px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;

            .tag-close {
              background: none;
              border: none;
              color: white;
              cursor: pointer;
              font-size: 16px;
              line-height: 1;
              padding: 0;
              width: 16px;
              height: 16px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:hover {
                opacity: 0.8;
              }
            }
          }

          .tag-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            min-width: 120px;
            padding: 4px 0;
          }
        }

        .form-help {
          font-size: 12px;
          color: #9ca3af;
          margin: 6px 0 0 0;
        }
      }
    }
  }

  // ==================== AI助手 ====================
  .ai-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;

    .ai-image-preview {
      img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 12px;
      }

      .image-meta {
        .image-name {
          font-size: 14px;
          font-weight: 500;
          color: #6b7280;
          margin: 0;
        }
      }
    }

    .ai-analysis {
      .analysis-section {
        margin-bottom: 24px;

        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 16px 0;
          display: flex;
          align-items: center;
          gap: 8px;

          i {
            color: #6366f1;
          }
        }

        .status-info {
          .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: #f9fafb;
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 14px;

            i {
              font-size: 18px;
              color: #ef4444;

              &.icon-check-circle {
                color: #10b981;
              }

              &.icon-alert-circle {
                color: #ef4444;
              }
            }

            &.completed {
              background: #d1fae5;
              color: #059669;
            }
          }
        }

        .ai-questions {
          .question-card {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 16px;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              border-color: #6366f1;
              background: #f5f3ff;
              transform: translateX(4px);

              .btn-apply {
                background: #6366f1;
                color: white;
              }
            }

            .question-icon {
              width: 40px;
              height: 40px;
              border-radius: 10px;
              background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              i {
                font-size: 20px;
              }
            }

            .question-content {
              flex: 1;

              h5 {
                font-size: 15px;
                font-weight: 600;
                color: #1a1a1a;
                margin: 0 0 6px 0;
              }

              p {
                font-size: 13px;
                color: #6b7280;
                margin: 0 0 10px 0;
                line-height: 1.5;
              }

              .question-example {
                padding: 10px 12px;
                background: #f9fafb;
                border-left: 3px solid #6366f1;
                border-radius: 6px;
                font-size: 13px;
                color: #374151;
                line-height: 1.5;

                strong {
                  color: #6366f1;
                  font-weight: 600;
                  display: block;
                  margin-bottom: 4px;
                }
              }
            }

            .btn-apply {
              width: 32px;
              height: 32px;
              border-radius: 6px;
              background: #f3f4f6;
              border: none;
              color: #6b7280;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s;
              flex-shrink: 0;
            }
          }
        }

        .btn-send-question {
          margin-top: 12px;
          width: 100%;
          padding: 12px;
          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
          }
        }
      }
    }
  }

  // ==================== 图片预览 ====================
  .preview-dialog {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;

    .btn-close {
      position: absolute;
      top: -40px;
      right: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      color: #1a1a1a;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: #ef4444;
        color: white;
        transform: rotate(90deg);
      }
    }

    img {
      max-width: 100%;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
  }

  // ==================== 响应式设计 ====================
  @media (max-width: 1024px) {
    .images-grid {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .edit-content {
      grid-template-columns: 1fr;

      .edit-preview {
        img {
          max-width: 300px;
          margin: 0 auto;
          display: block;
        }
      }
    }

    .ai-content {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .manager-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-right {
        width: 100%;
        
        .btn-view-mode,
        .btn-upload {
          flex: 1;
        }
      }
    }

    .images-grid {
      grid-template-columns: 1fr;
    }

    .images-list {
      .list-header {
        display: none;
      }

      .list-row {
        grid-template-columns: 1fr;
        gap: 12px;

        .col-preview {
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }
}

