<template>
  <ion-page>
    <Header 
      :title="note ? note.title : '未找到便签'"
      :onBack="() => window.history.back()"
      :onAction="note ? handleEdit : null"
      actionIcon="settings"
    />
    <ion-content v-if="!note">
      <div style="display: flex; justify-content: center; align-items: center; height: 100%; background-color: var(--background)">
        <ion-text>未找到该便签</ion-text>
      </div>
    </ion-content>
    <ion-content v-else>
      <div style="padding: 16px; background-color: var(--background-card)">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border)">
          <ion-text style="color: var(--note-date); font-size: 14px">
            最后更新: {{ formatDate(note.updatedAt) }}
          </ion-text>
          <ion-button fill="clear" @click="handleStar">
            <ion-icon 
              :icon="note.isStarred ? star : starOutline" 
              :style="{ fontSize: '24px', color: note.isStarred ? 'var(--note-star)' : 'var(--text-tertiary)' }"
            ></ion-icon>
          </ion-button>
        </div>
        <div style="white-space: pre-wrap; line-height: 1.6; font-size: 16px; color: var(--note-content)">
          {{ note.content }}
        </div>
      </div>
      
      <div style="position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 10px; background-color: var(--background); border-top: 1px solid var(--border)">
        <div style="display: flex; flex-direction: column; align-items: center">
          <ion-button fill="clear" @click="handleShare">
            <ion-icon :icon="share" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
          </ion-button>
          <ion-text style="font-size: 12px; color: var(--text-primary)">分享</ion-text>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <ion-button fill="clear" @click="handleMoveToFolder">
            <ion-icon :icon="folder" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
          </ion-button>
          <ion-text style="font-size: 12px; color: var(--text-primary)">文件夹</ion-text>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <ion-button fill="clear" @click="handleReminder">
            <ion-icon :icon="alarm" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
          </ion-button>
          <ion-text style="font-size: 12px; color: var(--text-primary)">提醒</ion-text>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <ion-button fill="clear" @click="handleDelete">
            <ion-icon :icon="trash" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
          </ion-button>
          <ion-text style="font-size: 12px; color: var(--text-primary)">删除</ion-text>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useAppStore } from '../stores/useAppStore';
import { star, starOutline, share, folder, alarm, trash } from 'ionicons/icons';
import Header from '../components/Header.vue';

const props = defineProps({
  noteId: {
    type: String,
    required: true
  }
});

const store = useAppStore();

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

// Find the note by ID
const note = computed(() => store.notes.find(n => n.id === props.noteId));

const handleEdit = () => {
  // 导航到编辑页面的逻辑将在路由中处理
  window.location.hash = `#/editor/${props.noteId}`;
};

const handleShare = () => {
  // In a full implementation, this would share the note
  console.log('Share note');
};

const handleMoveToFolder = () => {
  // In a full implementation, this would move the note to a folder
  console.log('Move to folder');
};

const handleDelete = () => {
  // In a full implementation, this would delete the note
  console.log('Delete note');
};

const handleStar = async () => {
  // Toggle star status
  if (note.value) {
    await store.updateNote(props.noteId, { isStarred: !note.value.isStarred });
  }
};

const handleReminder = () => {
  // In a full implementation, this would set a reminder
  console.log('Set reminder');
};

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString();
};
</script>