<template>
  <ion-page>
    <Header 
      title="文件夹"
      :onBack="() => window.history.back()"
    />
    <div style="padding: 10px; background-color: var(--background)">
      <div style="display: flex; align-items: center; background-color: var(--search-bar-background); border-radius: 8px; padding: 0 10px">
        <ion-icon :icon="search" style="font-size: 20px; color: var(--text-tertiary)"></ion-icon>
        <ion-input
          placeholder="搜索文件夹..."
          :value="searchQuery"
          @ionChange="e => setSearchQuery(e.detail.value)"
          style="--padding-start: 10px; --padding-end: 10px; flex: 1; font-size: 16px; color: var(--text-primary)"
        ></ion-input>
        <ion-button 
          v-if="searchQuery.length > 0"
          fill="clear" 
          @click="() => setSearchQuery('')"
        >
          <ion-icon :icon="closeCircle" style="font-size: 20px; color: var(--text-tertiary)"></ion-icon>
        </ion-button>
      </div>
    </div>
    <ion-content>
      <ion-list style="background-color: var(--background); padding: 0 16px; --ion-item-background: var(--background)">
        <FolderManage
          :allCount="allNotesCount"
          :starredCount="starredNotesCount"
          :trashCount="trashNotesCount"
          :archiveCount="archiveCount"
          :selectedFolder="selectedFolder"
          :onAllClick="() => handleFolderPress('all')"
          :onStarredClick="() => handleFolderPress('starred')"
          :onTrashClick="() => handleFolderPress('trash')"
          :onArchiveClick="() => handleFolderPress('archive')"
        />
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useAppStore } from '../stores/useAppStore';
import { search, closeCircle } from 'ionicons/icons';
import FolderManage from '../components/FolderManage.vue';
import Header from '../components/Header.vue';

const store = useAppStore();

// 加载初始数据
onMounted(() => {
  store.loadData();
});

const searchQuery = ref('');
const selectedFolder = ref('all');

// Calculate note count for each folder
const foldersWithCount = computed(() => {
  return store.folders.map(folder => {
    const noteCount = store.notes.filter(note => note.folderId === folder.id).length;
    return {
      ...folder,
      noteCount,
    };
  });
});

// Add default folders at the beginning
const allNotesCount = computed(() => store.notes.length);
const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length);
// Assuming we have a way to track deleted notes in the future
const trashNotesCount = 0;
const archiveCount = 0;

const foldersWithAllNotes = computed(() => {
  return [
    { id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
    { id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
    { id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
    ...foldersWithCount.value,
  ];
});

const handleFolderPress = (folderId) => {
  // 更新选中的文件夹状态
  selectedFolder.value = folderId;
  // 在实际应用中，这里会将选中的文件夹传递回NoteListScreen
  // 通过导航参数传递选中的文件夹ID
  window.location.hash = `#/notes?folder=${folderId}`;
};

const handleAddFolder = () => {
  // In a full implementation, this would open a folder creation dialog
  console.log('Add folder pressed');
};

const handleSearch = () => {
  // In a full implementation, this would filter folders based on searchQuery
  console.log('Search for:', searchQuery.value);
};

const handleBackPress = () => {
  window.history.back();
};

// Filter folders based on search query
const filteredFolders = computed(() => {
  return foldersWithAllNotes.value.filter(folder => 
    folder.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const setSearchQuery = (value) => {
  searchQuery.value = value;
};
</script>