TurboHR/frontend/src/pages/Notifications.tsx

import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { Bell, CheckCircle, AlertCircle, Send, Settings as SettingsIcon, X } from 'lucide-react'
import { notificationsApi } from '../lib/api-services'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
import EmptyState from '../components/ui/EmptyState'
import Pagination from '../components/ui/Pagination'

const TYPE_LABELS: Record<string, string> = {
  CONTRACT_EXPIRY: '合同到期',
  CONTRACT_UNSIGNED: '未签合同',
  OVERTIME: '加班预警',
  OVERTIME_ALERT: '加班预警',
  PAYSLIP: '工资条',
  PAYSLIP_READY: '工资条',
  RISK_ALERT: '风险预警',
  SOCIAL_INS: '社保提醒',
  HOUSING_FUND: '公积金提醒',
  TAX: '税务提醒',
}

const CHANNEL_LABELS: Record<string, string> = {
  WECHAT: '企业微信',
  EMAIL: '邮件',
  IN_APP: '站内',
}

/**
 * 通知管理页面
 */
export default function Notifications() {
  const queryClient = useQueryClient()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [showSettings, setShowSettings] = useState(false)

  const { data, isLoading } = useQuery<any>({
    queryKey: ['notification-logs', page, pageSize],
    queryFn: async () => {
      return await notificationsApi.logs({ page, pageSize })
    },
  })

  const { data: settings } = useQuery<any>({
    queryKey: ['notification-settings'],
    queryFn: async () => {
      return await notificationsApi.settings()
    },
  })

  const checkContractsMutation = useMutation({
    mutationFn: () => notificationsApi.checkContracts(),
    onSuccess: () => {
      toast.success('合同到期检查已触发')
      queryClient.invalidateQueries({ queryKey: ['notification-logs'] })
    },
    onError: () => toast.error('检查失败'),
  })

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-2">
            <Bell className="h-5 w-5 text-primary" />
            <h1 className="text-base font-semibold">通知管理</h1>
          </div>
          <p className="mt-1 text-sm text-gray-500">通知记录查看与设置管理</p>
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant="secondary" onClick={() => checkContractsMutation.mutate()} disabled={checkContractsMutation.isPending}>
            <Send className="w-4 h-4 mr-1" />检查合同到期
          </Button>
          <Button size="sm" onClick={() => setShowSettings(true)}>
            <SettingsIcon className="w-4 h-4 mr-1" />通知设置
          </Button>
        </div>
      </div>

      {/* 通知设置概览 */}
      {settings && (
        <Card>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
            {[
              { label: '合同到期提醒', enabled: settings.contractExpiry, days: settings.expiryDays },
              { label: '未签合同提醒', enabled: settings.contractUnsigned },
              { label: '加班预警', enabled: settings.overtimeAlert },
              { label: '工资条通知', enabled: settings.payslipReady },
            ].map(s => (
              <div key={s.label} className="flex items-center gap-2 p-2 rounded-lg bg-gray-50">
                {s.enabled ? (
                  <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                ) : (
                  <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
                )}
                <div className="min-w-0">
                  <div className="text-xs font-medium truncate">{s.label}</div>
                  {s.days && <div className="text-xs text-gray-500">提前{s.days}天</div>}
                </div>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* 通知记录列表 */}
      {isLoading ? (
        <div className="text-center py-8 text-gray-500">加载中...</div>
      ) : !data?.items || data.items.length === 0 ? (
        <EmptyState title="暂无通知记录" description="系统将自动发送合同到期、工资条等通知" />
      ) : (
        <>
          <Card>
            <div className="space-y-1.5">
              {data.items.map((log: any) => (
                <div key={log.id} className="flex items-start gap-3 px-2 py-2 rounded-md hover:bg-gray-50 transition-colors">
                  <div className={`flex items-center justify-center w-7 h-7 rounded-lg flex-shrink-0 ${
                    log.status === 'SENT' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
                  }`}>
                    <Bell className="w-3.5 h-3.5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium truncate">{log.title}</span>
                      <span className="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600">{TYPE_LABELS[log.type] || log.type}</span>
                      <span className="px-1.5 py-0.5 rounded text-xs bg-blue-100 text-blue-600">{CHANNEL_LABELS[log.channel] || log.channel}</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-0.5">{log.content}</div>
                  </div>
                  <div className="text-xs text-gray-400 flex-shrink-0">
                    {new Date(log.createdAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
                  </div>
                </div>
              ))}
            </div>
          </Card>
          <Pagination
            page={page}
            pageSize={pageSize}
            total={data.total}
            onPageChange={setPage}
            onPageSizeChange={(s) => { setPageSize(s); setPage(1) }}
          />
        </>
      )}

      {/* 通知设置弹窗 */}
      {showSettings && settings && (
        <SettingsModal settings={settings} onClose={() => setShowSettings(false)} onSuccess={() => { setShowSettings(false); queryClient.invalidateQueries({ queryKey: ['notification-settings'] }) }} />
      )}
    </div>
  )
}

function SettingsModal({ settings, onClose, onSuccess }: { settings: any; onClose: () => void; onSuccess: () => void }) {
  const [form, setForm] = useState({
    contractExpiry: settings.contractExpiry ?? true,
    expiryDays: settings.expiryDays ?? 30,
    contractUnsigned: settings.contractUnsigned ?? true,
    overtimeAlert: settings.overtimeAlert ?? true,
    payslipReady: settings.payslipReady ?? true,
    payrollDay: settings.payrollDay ?? 10,
    socialInsDay: settings.socialInsDay ?? 15,
    housingFundDay: settings.housingFundDay ?? 15,
    taxDay: settings.taxDay ?? 15,
    wechatWebhook: settings.wechatWebhook ?? '',
    emailNotify: settings.emailNotify ?? false,
    email: settings.email ?? '',
  })

  const saveMutation = useMutation({
    mutationFn: () => notificationsApi.updateSettings(form),
    onSuccess: () => { toast.success('通知设置已保存'); onSuccess() },
    onError: () => toast.error('保存失败'),
  })

  const toggleItem = (key: string) => setForm(prev => ({ ...prev, [key]: !prev[key as keyof typeof prev] }))

  return (
    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <Card className="max-w-lg w-full max-h-[80vh] overflow-y-auto">
        <div onClick={(e) => e.stopPropagation()}>
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-medium">通知设置</h2>
            <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X className="w-5 h-5" /></button>
          </div>
          <div className="space-y-3">
            {[
              { key: 'contractExpiry', label: '合同到期提醒', desc: '提前提醒即将到期的合同' },
              { key: 'contractUnsigned', label: '未签合同提醒', desc: '入职超过30天未签合同' },
              { key: 'overtimeAlert', label: '加班预警', desc: '加班时长超过法定上限' },
              { key: 'payslipReady', label: '工资条通知', desc: '工资条生成后通知员工' },
              { key: 'emailNotify', label: '邮件通知', desc: '通过邮件发送通知' },
            ].map(item => (
              <div key={item.key} className="flex items-center justify-between p-2 rounded-lg bg-gray-50">
                <div>
                  <div className="text-sm font-medium">{item.label}</div>
                  <div className="text-xs text-gray-500">{item.desc}</div>
                </div>
                <button
                  onClick={() => toggleItem(item.key)}
                  className={`relative w-10 h-5 rounded-full transition-colors ${form[item.key as keyof typeof form] ? 'bg-primary' : 'bg-gray-300'}`}
                >
                  <span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform ${form[item.key as keyof typeof form] ? 'left-5' : 'left-0.5'}`} />
                </button>
              </div>
            ))}
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className="text-xs text-gray-500">合同提前提醒天数</label>
                <input type="number" value={form.expiryDays} onChange={e => setForm(prev => ({ ...prev, expiryDays: parseInt(e.target.value) || 30 }))} className="w-full mt-1 px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" min={1} max={365} />
              </div>
              <div>
                <label className="text-xs text-gray-500">发薪日</label>
                <input type="number" value={form.payrollDay} onChange={e => setForm(prev => ({ ...prev, payrollDay: parseInt(e.target.value) || 10 }))} className="w-full mt-1 px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" min={1} max={28} />
              </div>
            </div>
            <div>
              <label className="text-xs text-gray-500">企业微信 Webhook URL</label>
              <input type="url" value={form.wechatWebhook} onChange={e => setForm(prev => ({ ...prev, wechatWebhook: e.target.value }))} className="w-full mt-1 px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" placeholder="https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=..." />
            </div>
            <div>
              <label className="text-xs text-gray-500">通知邮箱</label>
              <input type="email" value={form.email} onChange={e => setForm(prev => ({ ...prev, email: e.target.value }))} className="w-full mt-1 px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" placeholder="hr@example.com" />
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="secondary" size="sm" onClick={onClose}>取消</Button>
              <Button size="sm" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>保存</Button>
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}