<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

import { reviewApi, type AlertItem } from "../../shared/api/review";
import EmptyState from "../../shared/components/EmptyState.vue";
import MarketEntityLink from "../../shared/market/MarketEntityLink.vue";
import { useUiStore } from "../../shared/stores/ui";

const ui = useUiStore();
const items = ref<AlertItem[]>([]);
const unreadOnly = ref(false);
const loading = ref(true);
const error = ref("");
const form = reactive({ title: "", remind_date: new Date().toISOString().slice(0, 10), code: "", content: "" });
async function load(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    const result = await reviewApi.alerts(unreadOnly.value);
    items.value = result.items;
    ui.alertUnread = result.unread_count;
  } catch (reason) { error.value = reason instanceof Error ? reason.message : "提醒读取失败"; }
  finally { loading.value = false; }
}
async function create(): Promise<void> {
  try {
    await reviewApi.createAlert(form);
    Object.assign(form, { title: "", code: "", content: "" });
    ui.showToast("提醒已保存"); await load();
  } catch (reason) { ui.showToast(reason instanceof Error ? reason.message : "提醒保存失败"); }
}
async function mark(row: AlertItem): Promise<void> { await reviewApi.markAlert(row.id); await load(); }
async function markAll(): Promise<void> { await reviewApi.markAllAlerts(); await load(); }
async function remove(row: AlertItem): Promise<void> { await reviewApi.deleteAlert(row.id); await load(); }
function select(unread: boolean): void { unreadOnly.value = unread; void load(); }
onMounted(load);
</script>

<template>
  <div class="alerts-panel">
    <div class="alerts-toolbar"><div class="segmented"><button type="button" :class="{ active: !unreadOnly }" @click="select(false)">全部</button><button type="button" :class="{ active: unreadOnly }" @click="select(true)">未读</button></div><button class="btn btn-small" type="button" @click="markAll">全部已读</button></div>
    <form class="alert-create" @submit.prevent="create"><div class="alert-create-grid"><label class="field"><span class="field-label">标题</span><input v-model="form.title" class="input" maxlength="80" required /></label><label class="field"><span class="field-label">提醒日期</span><input v-model="form.remind_date" class="input" type="date" required /></label><label class="field"><span class="field-label">股票代码（可选）</span><input v-model="form.code" class="input" maxlength="12" /></label></div><label class="field"><span class="field-label">提醒内容（可选）</span><textarea v-model="form.content" class="textarea" maxlength="500"></textarea></label><div class="form-actions"><button class="btn btn-primary" type="submit">保存提醒</button></div></form>
    <div v-if="loading" class="workspace-state">正在读取提醒</div>
    <EmptyState v-else-if="error" title="提醒暂不可用" :description="error" />
    <div v-else-if="items.length" class="alert-list"><article v-for="item in items" :key="item.id" :class="{ unread: !item.is_read && item.due }"><div><strong>{{ item.title }}</strong><span class="tag">{{ item.due ? (item.is_read ? "已读" : "未读") : "未到期" }}</span></div><p>{{ item.content }}</p><small>{{ item.available_date }}<template v-if="item.code"> · <MarketEntityLink :entity="{ entity_type: 'stock', identifier: item.code, code: item.code, name: item.code, sector: null }" /></template></small><div class="table-actions"><button v-if="item.due && !item.is_read" class="btn btn-small" type="button" @click="mark(item)">标为已读</button><button class="btn btn-small" type="button" @click="remove(item)">删除</button></div></article></div>
    <EmptyState v-else title="暂无提醒" description="可以创建站内提醒，策略跟踪反馈也会自动汇总到这里。" />
  </div>
</template>
