<template>
  <div class="search-header">
    <h1 class="page-title">{{ $t('search.title') }}</h1>
    <div class="search-bar">
      <el-input
        v-model="keyword"
        class="search-input"
        :placeholder="$t('search-placeholder')"
        :prefix-icon="Search"
        clearable
        @keyup.enter="navigateToQuery(keyword)"
        @clear="handleClear"
      />
      <el-button
        type="primary"
        class="search-button"
        @click="navigateToQuery(keyword)"
      >
        {{ $t('search.search-button') }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue';

  const keyword = defineModel<string>({ default: '' });
  const localePath = useLocalePath();
  const router = useRouter();

  const navigateToQuery = (value: string) => {
    const trimmed = value.trim();
    if (!trimmed) return;
    navigateTo({
      path: localePath('/search'),
      query: { query: trimmed },
    });
  };

  const handleClear = () => {
    keyword.value = '';
    router.replace(localePath({ path: '/search' }));
  };
</script>

<style scoped>
  .search-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .page-title {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .search-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 16px;
  }

  .search-input {
    flex: 1;
    height: 50px;
  }

  .search-button {
    height: 50px;
    width: 100px;
    font-size: 16px;
  }
</style>
