<script setup lang="ts">
import type { EditableNotificationRecipient } from '../../composables/types'

type NotificationForm = {
  enabled: boolean
  barkEnabled: boolean
  barkServerUrl: string
  testTitle: string
  testBody: string
  testUrl: string
}

type NotificationStats = {
  configuredRecipientCount: number
  enabledRecipientCount: number
  barkReady: boolean
  lastSuccessCount: number
  lastFailedCount: number
  scheduledJobEnabledCount: number
}

type Props = {
  notificationForm: NotificationForm
  notificationRecipients: EditableNotificationRecipient[]
  notificationSaving: boolean
  notificationResultError: string
  notificationStats: NotificationStats
  addNotificationRecipient: () => void
  removeNotificationRecipient: (id: string) => void
  handleNotificationSaveConfig: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <el-card class="section-card">
    <template #header>
      <div class="card-header">
        <div>
          <span class="card-title">Bark 通知</span>
          <p class="card-desc">
            已配置 {{ notificationStats.configuredRecipientCount }} 人，启用
            {{ notificationStats.enabledRecipientCount }} 人。
          </p>
        </div>
        <div class="card-actions">
          <el-button @click="addNotificationRecipient">新增接收人</el-button>
          <el-button
            :loading="notificationSaving"
            type="primary"
            @click="handleNotificationSaveConfig"
            >保存配置</el-button
          >
        </div>
      </div>
    </template>

    <el-alert
      v-if="notificationResultError"
      :title="notificationResultError"
      type="error"
      show-icon
      :closable="false"
      class="mb-4"
    />

    <el-form label-width="auto" label-position="top" inline>
      <el-form-item
        ><el-switch v-model="notificationForm.enabled" active-text="启用内部通知"
      /></el-form-item>
      <el-form-item
        ><el-switch v-model="notificationForm.barkEnabled" active-text="启用 Bark 通道"
      /></el-form-item>
      <el-form-item label="Bark 服务地址" class="w-full">
        <el-input v-model="notificationForm.barkServerUrl" placeholder="https://api.day.app" />
      </el-form-item>
    </el-form>

    <el-table :data="notificationRecipients" stripe size="small" class="mt-4">
      <el-table-column label="接收人" min-width="150">
        <template #default="{ row }">
          <el-input v-model="row.name" placeholder="例如：客服A" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="Device Key" min-width="200">
        <template #default="{ row }">
          <el-input v-model="row.deviceKey" placeholder="Bark device key" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-switch v-model="row.enabled" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template #default="{ row }">
          <el-button size="small" type="danger" text @click="removeNotificationRecipient(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="还没有 Bark 接收人。" :image-size="60" />
      </template>
    </el-table>
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
</style>
