@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.customer-search-section {
  margin-top: $CAP_SPACE_08;
  display: flex;
  gap: $CAP_SPACE_04;
  padding: 0;
  position: relative;

  .customer-search-label {
    font-weight: bold;
    margin-bottom: $CAP_SPACE_04;
    font-size: $CAP_SPACE_16;
  }

  .search-container {
    position: relative;
  }

  .search-dropdown-container {
    position: absolute;
    width: 100%;
    z-index: 1000;
  }

  .search-result-card {
    width: 100%;
    margin: 0;
    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
    border-radius: $CAP_SPACE_08;
    border: 1px solid #d9d9d9;

    .ant-card-body {
      padding: $CAP_SPACE_08;
    }
  }

  .link-result {
    .ant-row.ant-row-flex {
      padding: $CAP_SPACE_08 $CAP_SPACE_12;
      border-radius: $CAP_SPACE_06;

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }

  .customer-common-profile {
    width: $CAP_SPACE_40;
    height: $CAP_SPACE_40;
    border-radius: 50%;
    background-color: #E7D0FB;
    color: $CAP_PURPLE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: $CAP_SPACE_16;
  }

  .search-text {
    &.ant-typography {
      font-weight: bold;
      color: #262626;
      margin-bottom: 0;
    }
  }


  .identifiers-text {
    margin-top: -0.6rem;
    color: #8c8c8c;
    .highlight-background-color {
      background-color: transparent;
      font-weight: bold;
    }
  }
  .identifier-desc {
    margin-top: 0.6rem;
  }

  .link-result-divider {
    margin: 0 $CAP_SPACE_12;
  }
  
  .selected-customer-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $CAP_SPACE_04 $CAP_SPACE_12;
    border: 1px solid #d9d9d9;
    border-radius: $CAP_SPACE_06;
    background-color: $CAP_WHITE;
    height: $CAP_SPACE_40;
    cursor: default;

    .customer-common-profile {
      width: $CAP_SPACE_24;
      height: $CAP_SPACE_24;
      font-size: $CAP_SPACE_12;
    }

    .search-text, .identifiers-text {
      margin-bottom: 0;
    }
    .multiple-identifiers {
      margin: 0.25rem 0;
    }

    .clear-icon {
      cursor: pointer;
      color: #8c8c8c;
    }
  }

  .search-input-container {
    position: relative;
    .search-error {
      margin-top: $CAP_SPACE_08;
    }
  }

  .validation-card {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_08 -2px rgba(9, 30, 66, 0.25),
      0 0 1px 0 rgba(9, 30, 66, 0.31);
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    border-top-color: transparent;
    .ant-card-body {
      padding: $CAP_SPACE_12 $CAP_SPACE_20;
    }
  }

  .search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 0 0 $CAP_SPACE_06 $CAP_SPACE_06;
    box-shadow: 0 $CAP_SPACE_02 $CAP_SPACE_08 rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1050;

    &.no-results {
      .no-results-message {
        display: flex;
        align-items: center;
        gap: $CAP_SPACE_08;
        padding: $CAP_SPACE_16;
        color: #8c8c8c;
        font-size: 1rem;
        
        .cap-icon {
          color: #d9d9d9;
        }
      }
    }
  }

  .customer-result-item {
    display: flex;
    align-items: center;
    gap: $CAP_SPACE_12;
    padding: $CAP_SPACE_12 $CAP_SPACE_16;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #f5f5f5;
    }

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

    .customer-avatar {
      flex-shrink: 0;
    }

    .customer-details {
      flex: 1;
      min-width: 0;

      .customer-name {
        font-weight: 500;
        font-size: 1rem;
        color: #262626;
        margin-bottom: 2px;
      }

      .customer-email {
        font-size: $CAP_SPACE_12;
        color: #8c8c8c;
        margin-bottom: 2px;
      }

      .customer-phone {
        font-size: $CAP_SPACE_12;
        color: #8c8c8c;
      }
    }

    .customer-id {
      flex-shrink: 0;
      font-size: $CAP_SPACE_12;
      color: #8c8c8c;
      font-weight: 500;
    }
  }

  .selected-customer {
    display: flex;
    flex-direction: column;
    gap: $CAP_SPACE_16;
    padding: $CAP_SPACE_16;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: $CAP_SPACE_06;

    .selected-customer-info {
      display: flex;
      align-items: center;
      gap: $CAP_SPACE_12;

      .customer-details {
        flex: 1;

        .customer-name {
          font-weight: 500;
          font-size: 1rem;
          color: #262626;
          margin-bottom: $CAP_SPACE_04;
        }

        .customer-email {
          font-size: $CAP_SPACE_12;
          color: #8c8c8c;
          margin-bottom: $CAP_SPACE_04;
        }

        .customer-id {
          font-size: $CAP_SPACE_12;
          color: #8c8c8c;
          font-weight: 500;
        }
      }
    }

    .selected-customer-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .tag-extraction-success {
      .extraction-summary {
        display: flex;
        align-items: center;
        gap: $CAP_SPACE_08;
        margin-bottom: $CAP_SPACE_12;
        font-size: 1rem;
        font-weight: 500;
        color: #52c41a;
      }

      .required-tags,
      .optional-tags {
        margin-bottom: $CAP_SPACE_12;

        .tag-category {
          display: flex;
          align-items: center;
          gap: $CAP_SPACE_08;
          margin-bottom: $CAP_SPACE_08;
          font-size: 13px;
          font-weight: 500;
        }

        .tag-list {
          display: flex;
          flex-wrap: wrap;
          gap: $CAP_SPACE_06;
        }
      }

      .required-tags .tag-category {
        color: #fa8c16;
      }

      .optional-tags .tag-category {
        color: #52c41a;
      }

      .api-warnings {
        margin-top: $CAP_SPACE_08;
      }
    }
  }
}