<template>
  <div class="search-page">
    <div class="search-container">
      <div class="search-form" v-if="!showResult">
        <h2 class="search-title">{{ $t('message.searchLyrics') }}</h2>
        <div class="form-group">
          <label>{{ $t('message.trackName') }}</label>
          <input 
            type="text" 
            v-model="trackName" 
            :placeholder="$t('message.enterTrackName')"
            @keyup.enter="searchLyrics"
            class="search-input"
          >
        </div>
        <div class="form-group">
          <label>{{ $t('message.artist') }}</label>
          <input 
            type="text" 
            v-model="artist" 
            :placeholder="$t('message.enterArtistName')"
            @keyup.enter="searchLyrics"
            class="search-input"
          >
        </div>
        <button 
          class="search-btn" 
          @click="searchLyrics" 
          :disabled="isSearching"
        >
          {{ isSearching ? $t('message.searching') : $t('message.search') }}
        </button>
      </div>

      <!-- 搜索结果列表 -->
      <div class="search-results" v-else>
        <div class="search-results-header">
          <h2>{{ $t('message.searchResults') }}</h2>
          <button class="return-btn" @click="returnToSearch">
            {{ $t('message.back') }}
          </button>
        </div>
        <div class="results-list">
          <div 
            v-for="(result, index) in searchResults" 
            :key="index"
            class="result-item"
            :class="{ 'selected': selectedIndex === index }"
            @click="selectResult(index)"
          >
            <div class="result-info">
              <div class="track-name">{{ result.name }}</div>
              <div class="artist-name">{{ getArtistName(result.artists) }}</div>
            </div>
            <div class="result-actions">
              <button 
                class="select-btn"
                @click.stop="selectResult(index)"
              >
                {{ $t('message.select') }}
              </button>
            </div>
          </div>
          <div v-if="searchResults.length === 0">
            <p>{{ $t('message.noLyricsFound') }}</p>
          </div>
        </div>
        <!-- 错误提示 -->
        <div class="error-message" v-if="error">
          {{ error }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const trackName = ref('');
const artist = ref('');
const isSearching = ref(false);
const error = ref('');
const hasSearched = ref(false);
const selectedIndex = ref(-1);
const searchResults = ref([]);

const getArtistName = (artists) => {
  return artists.map(artist => artist.name).join(', ');
};

import request from '../utils/request';
import { useLyricsStore } from '../store';
const lyricsStore = useLyricsStore();
const showResult = ref(false);
const searchLyrics = async () => {
  if (!trackName.value && !artist.value) {
    error.value = t('message.enterTrackOrArtist');
    return;
  }

  isSearching.value = true;
  error.value = '';
  hasSearched.value = true;
  selectedIndex.value = -1;
  searchResults.value = [];

  try {
    const result = await request({
      url: '/lyrics/search',
      method: 'POST',
      data: {
        track_name: trackName.value,
        artist: artist.value
      }
    });
    console.log('result', result);

    if (result.status === 'success') {
      searchResults.value = result.songs;
      showResult.value = true;
    } else {
      error.value = result.message || t('message.noLyricsFound');
    }
  } catch (err) {
    console.error(t('message.searchError'), err);
    error.value = t('message.searchFailed');
  } finally {
    isSearching.value = false;
  }
};

const returnToSearch = () => {
  showResult.value = false;
}

const selectResult = (index) => {
  request({
    url: '/lyrics/getLyricsFromId',
    method: 'POST',
    data: {
      id: searchResults.value[index].id,
      track_name: lyricsStore.trackName,
      artist: lyricsStore.artist
    }
  });
};

const closeWindow = () => {
  if (window.electronAPI) {
    window.electronAPI.closeSearchWindow();
  }
};

onMounted(() => {
  // 监听主窗口数据
  if (window.electronAPI && window.electronAPI.onMainWindowData) {
    window.electronAPI.onMainWindowData((data) => {
      console.log('收到主窗口数据:', data);
      trackName.value = data.trackName;
      artist.value = data.artist;
      lyricsStore.$patch({
        'trackName': data.trackName,
        'artist': data.artist,
        'baseUrl': data.baseUrl
      })
    });
  }
});
</script>

<style scoped>
.search-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a24;
}

.search-container {
  background: #1e1e28;
  padding: 30px;
  border-radius: 12px;
  width: 600px;
  height: 600px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2.search-title {
  color: #fff;
  margin: 0;
  font-size: 24px;
}

.close-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.search-form {
  display: flex;
  flex-direction: column;
  width: 60%;
  gap: 20px;
  margin-bottom: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  color: #aaf;
  font-size: 14px;
}

.search-input {
  padding: 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #2a2a35;
  color: #fff;
  font-size: 16px;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #00e6ff;
  box-shadow: 0 0 0 2px rgba(0, 230, 255, 0.2);
}

.search-btn {
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #00e6ff;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-btn:hover:not(:disabled) {
  background: #00c4e0;
  transform: translateY(-1px);
}

.search-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.search-results {
  margin-top: 20px;
  width: 100%;
  height: 100%;
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

h2 {
  color: #fff;
  font-size: 18px;
}

.return-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 18px;
  cursor: pointer;
  width: 100px;
  line-height: 18px;
  height: 40px;
  border-radius: 6px;
  white-space: nowrap;
} 

.results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #2a2a35;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.result-item:hover {
  background: #333340;
}

.result-item.selected {
  background: #333340;
  border: 1px solid #00e6ff;
}

.result-info {
  flex: 1;
}

.track-name {
  color: #fff;
  font-size: 16px;
  margin-bottom: 4px;
}

.artist-name {
  color: #aaf;
  font-size: 14px;
}

.result-actions {
  margin-left: 15px;
}

.select-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #00e6ff;
  color: #000;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-btn:hover {
  background: #00c4e0;
}

.no-results {
  text-align: center;
  color: #666;
  padding: 30px 0;
}

.error-message {
  margin-top: 20px;
  padding: 12px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid #ff6b6b;
  border-radius: 6px;
  color: #ff6b6b;
  text-align: center;
}

/* 自定义滚动条样式 */
.results-list::-webkit-scrollbar {
  width: 8px;
}

.results-list::-webkit-scrollbar-track {
  background: #1e1e28;
  border-radius: 4px;
}

.results-list::-webkit-scrollbar-thumb {
  background: #333340;
  border-radius: 4px;
}

.results-list::-webkit-scrollbar-thumb:hover {
  background: #444450;
}
</style> 