<template>
  <div>
    <!-- Desktop Header -->
    <el-header class="header" v-if="!isMobile">
      <h1 @click="$emit('reset-view')" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
      <div class="actions">
        <div class="search-box">
          <el-input
              :model-value="searchKeyword"
              @update:model-value="handleSearchInput"
              placeholder="搜索笔记标题"
              class="search-input"
              @keyup.enter="$emit('search')"
              clearable
              @clear="handleClear"
          >
            <template #suffix>
              <el-icon class="search-icon" @click="$emit('search')"><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <div v-if="userStore.isLoggedIn" class="user-actions">
          <span class="welcome-text">欢迎, {{ userStore.userInfo?.username }}</span>
          <el-button type="danger" @click="$emit('logout')">退出</el-button>
          <el-button type="primary" @click="$emit('show-update-password')">修改密码</el-button>
          <el-button type="warning" @click="$emit('show-system-settings')">系统管理</el-button>
          <el-button type="primary" @click="$emit('show-create-note')">新建笔记</el-button>
          <el-upload
              class="upload-btn"
              action=""
              :show-file-list="false"
              :before-upload="handleUpload"
              accept=".md"
          >
            <el-button type="success">上传Markdown</el-button>
          </el-upload>
        </div>
        <div v-else class="guest-actions">
          <el-button type="primary" @click="goToLogin">登录</el-button>
          <el-button @click="goToRegister">注册</el-button>
        </div>
      </div>
    </el-header>

    <!-- Mobile Header -->
    <el-header class="header mobile-header" v-if="isMobile">
      <el-button @click="$emit('toggle-collapse')" text circle class="mobile-menu-toggle">
        <el-icon size="24"><Menu /></el-icon>
      </el-button>
      <h1 class="mobile-title" @click="$emit('reset-view')">我的笔记</h1>
      <el-button text circle class="mobile-search-toggle" @click="$emit('search')">
        <el-icon size="22"><Search /></el-icon>
      </el-button>
      <el-button v-if="!userStore.isLoggedIn" text circle class="mobile-login-toggle" @click="goToLogin">
        <el-icon size="24"><User /></el-icon>
      </el-button>
    </el-header>

    <!-- Mobile Search Bar -->
    <div v-if="isMobile" class="mobile-search-container">
      <el-input
          :model-value="searchKeyword"
          @update:model-value="handleSearchInput"
          placeholder="搜索笔记标题"
          class="mobile-search-input"
          @keyup.enter="$emit('search')"
          @clear="handleClear"
          clearable
          size="large"
      >
        <template #prefix>
          <el-icon class="mobile-search-icon"><Search /></el-icon>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { Search, Menu, User } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const props = defineProps({
  isMobile: Boolean,
  searchKeyword: String,
});

const emit = defineEmits([
  'update:searchKeyword',
  'search',
  'reset-view',
  'logout',
  'show-update-password',
  'show-system-settings',
  'show-create-note',
  'upload-markdown',
  'toggle-collapse'
]);

const userStore = useUserStore();
const router = useRouter();

const goToLogin = () => router.push('/login');
const goToRegister = () => router.push('/register');

const handleUpload = (file) => {
  emit('upload-markdown', file);
  return false; // Prevent el-upload's default behavior
};

// 处理搜索输入 - 当输入为空时自动回到首页
const handleSearchInput = (value) => {
  emit('update:searchKeyword', value);
  // 当清空输入时，自动触发回到首页
  if (!value || value.trim() === '') {
    emit('reset-view');
  }
};

// 处理清空按钮点击
const handleClear = () => {
  emit('update:searchKeyword', '');
  emit('reset-view');
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border-radius: var(--border-radius);
  border: 1px solid #e4e7ed;
  gap: 1rem;
}

.dark-theme .header {
  background-color: #1e1e2f;
  border-color: #2c2c3d;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

:deep(.search-input .el-input__wrapper) {
  border-radius: 20px !important;
  padding-right: 8px;
  transition: all 0.3s ease;
}

:deep(.search-input .el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

:deep(.search-input .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

.search-icon {
  cursor: pointer;
  color: var(--el-text-color-placeholder);
  font-size: 16px;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.search-icon:hover {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.mobile-search-icon {
  color: var(--el-text-color-placeholder);
  font-size: 18px;
}

.user-actions, .guest-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-text {
  white-space: nowrap;
  color: var(--text-color-secondary);
}

.upload-btn {
  display: inline-block;
}

.mobile-header {
  padding: 0 1rem;
}

.mobile-title {
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  margin: 0;
  font-size: 1.25rem;
}

.mobile-search-container {
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

:deep(.mobile-search-input .el-input__wrapper) {
  border-radius: 9999px !important;
}
</style>
