import { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Badge } from '../ui/badge';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Switch } from '../ui/switch';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { MessageTemplate } from '../../types/message';
import { Calendar } from '../ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { 
  Send, 
  Clock, 
  Mail, 
  MessageSquare, 
  Smartphone, 
  Users,
  CalendarIcon,
  Eye,
  Trash2,
  CheckCircle2,
  XCircle,
  Timer,
  Bell
} from 'lucide-react';
import { toast } from 'sonner@2.0.3';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

interface MessageSendRecord {
  id: string;
  templateId: string;
  templateName: string;
  type: 'sms' | 'email' | 'internal' | 'push';
  recipients: string[];
  recipientCount: number;
  subject?: string;
  content: string;
  sendType: 'immediate' | 'scheduled';
  scheduledTime?: string;
  status: 'pending' | 'sending' | 'sent' | 'failed' | 'cancelled';
  sentCount?: number;
  failedCount?: number;
  sentAt?: string;
  createdAt: string;
  createdBy: string;
}

export function MessageSend() {
  const [templates, setTemplates] = useState<MessageTemplate[]>([]);
  const [sendRecords, setSendRecords] = useState<MessageSendRecord[]>([]);
  const [showSendDialog, setShowSendDialog] = useState(false);
  const [showPreviewDialog, setShowPreviewDialog] = useState(false);
  const [previewRecord, setPreviewRecord] = useState<MessageSendRecord | null>(null);
  
  const [formData, setFormData] = useState({
    templateId: '',
    type: 'internal' as 'sms' | 'email' | 'internal' | 'push',
    recipientType: 'manual' as 'manual' | 'role' | 'all',
    recipients: '',
    subject: '',
    content: '',
    sendType: 'immediate' as 'immediate' | 'scheduled',
    scheduledDate: undefined as Date | undefined,
    scheduledTime: '09:00',
    variables: {} as Record<string, string>,
  });

  useEffect(() => {
    loadTemplates();
    loadSendRecords();
  }, []);

  const loadTemplates = () => {
    const data = localStorage.getItem('smart_agriculture_message_templates');
    if (data) {
      setTemplates(JSON.parse(data));
    }
  };

  const loadSendRecords = () => {
    const data = localStorage.getItem('smart_agriculture_message_send_records');
    if (data) {
      setSendRecords(JSON.parse(data));
    } else {
      // 初始化示例数据
      const mockRecords: MessageSendRecord[] = [
        {
          id: 'send-1',
          templateId: 'tpl-1',
          templateName: '任务分配通知',
          type: 'internal',
          recipients: ['张三', '李四', '王五'],
          recipientCount: 3,
          subject: '新任务分配',
          content: '您好，张三！您有新的作业任务：冬小麦播种，计划执行时间：2024-10-16 08:00。请及时查看并准备。',
          sendType: 'immediate',
          status: 'sent',
          sentCount: 3,
          sentAt: '2024-10-15T14:30:00',
          createdAt: '2024-10-15T14:30:00',
          createdBy: 'admin',
        },
        {
          id: 'send-2',
          templateId: 'tpl-2',
          templateName: '设备预警通知',
          type: 'sms',
          recipients: ['13800138001', '13900139002'],
          recipientCount: 2,
          content: '【智慧农业】设备预警：拖拉机01检测到异常，油温过高，请及时处理。',
          sendType: 'immediate',
          status: 'sent',
          sentCount: 2,
          sentAt: '2024-10-15T10:15:00',
          createdAt: '2024-10-15T10:15:00',
          createdBy: 'admin',
        },
        {
          id: 'send-3',
          templateId: 'tpl-3',
          templateName: '保养提醒',
          type: 'email',
          recipients: ['zhangsan@example.com', 'lisi@example.com'],
          recipientCount: 2,
          subject: '设备保养提醒',
          content: '尊敬的用户：\n\n您的设备拖拉机01（编号：TR001）已使用500小时，建议进行保养维护。\n\n保养周期：每500小时\n上次保养时间：2024-09-01\n\n请及时安排保养，确保设备正常运行。',
          sendType: 'scheduled',
          scheduledTime: '2024-10-16T09:00:00',
          status: 'pending',
          createdAt: '2024-10-15T15:00:00',
          createdBy: 'admin',
        },
      ];
      localStorage.setItem('smart_agriculture_message_send_records', JSON.stringify(mockRecords));
      setSendRecords(mockRecords);
    }
  };

  const saveSendRecords = (records: MessageSendRecord[]) => {
    localStorage.setItem('smart_agriculture_message_send_records', JSON.stringify(records));
    setSendRecords(records);
  };

  const handleOpenSendDialog = () => {
    setFormData({
      templateId: '',
      type: 'internal',
      recipientType: 'manual',
      recipients: '',
      subject: '',
      content: '',
      sendType: 'immediate',
      scheduledDate: undefined,
      scheduledTime: '09:00',
      variables: {},
    });
    setShowSendDialog(true);
  };

  const handleTemplateChange = (templateId: string) => {
    const template = templates.find(t => t.id === templateId);
    if (template) {
      // 初始化变量
      const vars: Record<string, string> = {};
      template.variables.forEach(v => {
        vars[v] = '';
      });

      setFormData({
        ...formData,
        templateId,
        type: template.type,
        subject: template.subject || '',
        content: template.content,
        variables: vars,
      });
    }
  };

  const replaceVariables = (content: string, variables: Record<string, string>): string => {
    let result = content;
    Object.entries(variables).forEach(([key, value]) => {
      result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), value || `{{${key}}}`);
    });
    return result;
  };

  const handleSend = () => {
    // 验证
    if (!formData.templateId) {
      toast.error('请选择消息模版');
      return;
    }

    if (!formData.recipients.trim()) {
      toast.error('请输入接收人');
      return;
    }

    // 检查变量是否填写
    const template = templates.find(t => t.id === formData.templateId);
    if (template) {
      const emptyVars = template.variables.filter(v => !formData.variables[v]?.trim());
      if (emptyVars.length > 0) {
        toast.error(`请填写变量：${emptyVars.join(', ')}`);
        return;
      }
    }

    if (formData.sendType === 'scheduled' && !formData.scheduledDate) {
      toast.error('请选择定时发送日期');
      return;
    }

    // 解析接收人
    const recipients = formData.recipients.split(/[,，;；\n]/).map(r => r.trim()).filter(r => r);
    
    if (recipients.length === 0) {
      toast.error('请输入有效的接收人');
      return;
    }

    // 替换变量生成最终内容
    const finalContent = replaceVariables(formData.content, formData.variables);
    const finalSubject = formData.subject ? replaceVariables(formData.subject, formData.variables) : undefined;

    // 创建发送记录
    const now = new Date().toISOString();
    const scheduledDateTime = formData.sendType === 'scheduled' && formData.scheduledDate
      ? new Date(formData.scheduledDate.getFullYear(), formData.scheduledDate.getMonth(), formData.scheduledDate.getDate(), 
          parseInt(formData.scheduledTime.split(':')[0]), parseInt(formData.scheduledTime.split(':')[1])).toISOString()
      : undefined;

    const newRecord: MessageSendRecord = {
      id: `send-${Date.now()}`,
      templateId: formData.templateId,
      templateName: template?.name || '',
      type: formData.type,
      recipients,
      recipientCount: recipients.length,
      subject: finalSubject,
      content: finalContent,
      sendType: formData.sendType,
      scheduledTime: scheduledDateTime,
      status: formData.sendType === 'immediate' ? 'sent' : 'pending',
      sentCount: formData.sendType === 'immediate' ? recipients.length : undefined,
      sentAt: formData.sendType === 'immediate' ? now : undefined,
      createdAt: now,
      createdBy: 'admin',
    };

    saveSendRecords([newRecord, ...sendRecords]);

    if (formData.sendType === 'immediate') {
      toast.success(`消息发送成功！已发送 ${recipients.length} 条消息`);
    } else {
      toast.success(`定时消息已创建！将于 ${format(new Date(scheduledDateTime!), 'yyyy-MM-dd HH:mm', { locale: zhCN })} 发送`);
    }

    setShowSendDialog(false);
  };

  const handlePreview = (record: MessageSendRecord) => {
    setPreviewRecord(record);
    setShowPreviewDialog(true);
  };

  const handleCancel = (id: string) => {
    if (!confirm('确定要取消该定时消息吗？')) return;

    const updated = sendRecords.map(r => 
      r.id === id ? { ...r, status: 'cancelled' as const } : r
    );
    saveSendRecords(updated);
    toast.success('已取消定时消息');
  };

  const handleDelete = (id: string) => {
    if (!confirm('确定要删除该发送记录吗？')) return;

    const updated = sendRecords.filter(r => r.id !== id);
    saveSendRecords(updated);
    toast.success('删除成功');
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'sms': return <Smartphone className="w-4 h-4" />;
      case 'email': return <Mail className="w-4 h-4" />;
      case 'internal': return <MessageSquare className="w-4 h-4" />;
      case 'push': return <Bell className="w-4 h-4" />;
      default: return <MessageSquare className="w-4 h-4" />;
    }
  };

  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      sms: '短信',
      email: '邮件',
      internal: '站内信',
      push: '推送',
    };
    return labels[type] || type;
  };

  const getTypeBadge = (type: string) => {
    const colors: Record<string, string> = {
      sms: 'bg-blue-100 text-blue-700',
      email: 'bg-purple-100 text-purple-700',
      internal: 'bg-green-100 text-green-700',
      push: 'bg-orange-100 text-orange-700',
    };
    return colors[type] || 'bg-gray-100 text-gray-700';
  };

  const getStatusBadge = (status: string) => {
    const config: Record<string, { label: string; className: string; icon: any }> = {
      pending: { label: '待发送', className: 'bg-yellow-100 text-yellow-700', icon: Timer },
      sending: { label: '发送中', className: 'bg-blue-100 text-blue-700', icon: Send },
      sent: { label: '已发送', className: 'bg-green-100 text-green-700', icon: CheckCircle2 },
      failed: { label: '发送失败', className: 'bg-red-100 text-red-700', icon: XCircle },
      cancelled: { label: '已取消', className: 'bg-gray-100 text-gray-700', icon: XCircle },
    };
    const { label, className, icon: Icon } = config[status] || config.pending;
    return (
      <Badge className={className}>
        <span className="flex items-center gap-1">
          <Icon className="w-3 h-3" />
          {label}
        </span>
      </Badge>
    );
  };

  const stats = [
    {
      label: '总发送数',
      value: sendRecords.length,
      color: 'text-blue-600',
    },
    {
      label: '已发送',
      value: sendRecords.filter(r => r.status === 'sent').length,
      color: 'text-green-600',
    },
    {
      label: '待发送',
      value: sendRecords.filter(r => r.status === 'pending').length,
      color: 'text-yellow-600',
    },
    {
      label: '已取消',
      value: sendRecords.filter(r => r.status === 'cancelled').length,
      color: 'text-gray-600',
    },
  ];

  const selectedTemplate = templates.find(t => t.id === formData.templateId);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">消息发送</h2>
          <p className="text-muted-foreground">发送短信、邮件、站内信消息，支持实时和定时发送</p>
        </div>
        <Button onClick={handleOpenSendDialog} className="bg-green-600 hover:bg-green-700">
          <Send className="w-4 h-4 mr-2" />
          发送消息
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat, index) => (
          <Card key={index} className="p-4">
            <div className="text-sm text-muted-foreground">{stat.label}</div>
            <div className={`mt-2 ${stat.color}`}>{stat.value}</div>
          </Card>
        ))}
      </div>

      {/* 发送记录列表 */}
      <Card>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>消息模版</TableHead>
              <TableHead>类型</TableHead>
              <TableHead>接收人数</TableHead>
              <TableHead>发送方式</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sendRecords.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
                  暂无发送记录
                </TableCell>
              </TableRow>
            ) : (
              sendRecords.map((record) => (
                <TableRow key={record.id}>
                  <TableCell>
                    <div>{record.templateName}</div>
                    {record.subject && (
                      <p className="text-xs text-muted-foreground">{record.subject}</p>
                    )}
                  </TableCell>
                  <TableCell>
                    <Badge className={getTypeBadge(record.type)}>
                      <span className="flex items-center gap-1">
                        {getTypeIcon(record.type)}
                        {getTypeLabel(record.type)}
                      </span>
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Users className="w-4 h-4 text-muted-foreground" />
                      <span>{record.recipientCount}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    {record.sendType === 'immediate' ? (
                      <Badge variant="outline">
                        <Send className="w-3 h-3 mr-1" />
                        实时发送
                      </Badge>
                    ) : (
                      <div>
                        <Badge variant="outline">
                          <Clock className="w-3 h-3 mr-1" />
                          定时发送
                        </Badge>
                        {record.scheduledTime && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {format(new Date(record.scheduledTime), 'MM-dd HH:mm', { locale: zhCN })}
                          </p>
                        )}
                      </div>
                    )}
                  </TableCell>
                  <TableCell>
                    {getStatusBadge(record.status)}
                    {record.status === 'sent' && (
                      <p className="text-xs text-muted-foreground mt-1">
                        成功 {record.sentCount}/{record.recipientCount}
                      </p>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {format(new Date(record.createdAt), 'MM-dd HH:mm', { locale: zhCN })}
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handlePreview(record)}
                        title="查看详情"
                      >
                        <Eye className="w-4 h-4" />
                      </Button>
                      {record.status === 'pending' && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleCancel(record.id)}
                          title="取消发送"
                        >
                          <XCircle className="w-4 h-4 text-orange-600" />
                        </Button>
                      )}
                      {(record.status === 'sent' || record.status === 'cancelled') && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleDelete(record.id)}
                          title="删除记录"
                        >
                          <Trash2 className="w-4 h-4 text-destructive" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Card>

      {/* 发送消息对话框 */}
      <Dialog open={showSendDialog} onOpenChange={setShowSendDialog}>
        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              <div className="flex items-center gap-2">
                <Send className="w-5 h-5 text-green-600" />
                发送消息
              </div>
            </DialogTitle>
            <DialogDescription className="sr-only">
              选择消息模版并发送消息
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            {/* 选择模版 */}
            <div>
              <Label>选择消息模版 *</Label>
              <Select value={formData.templateId} onValueChange={handleTemplateChange}>
                <SelectTrigger>
                  <SelectValue placeholder="请选择消息模版" />
                </SelectTrigger>
                <SelectContent>
                  {templates.filter(t => t.isActive).map(template => (
                    <SelectItem key={template.id} value={template.id}>
                      <div className="flex items-center gap-2">
                        {getTypeIcon(template.type)}
                        <span>{template.name}</span>
                        <Badge variant="outline" className="text-xs">
                          {getTypeLabel(template.type)}
                        </Badge>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 发送方式 */}
            <div>
              <Label>发送方式 *</Label>
              <Select 
                value={formData.sendType} 
                onValueChange={(value: 'immediate' | 'scheduled') => setFormData({ ...formData, sendType: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="immediate">
                    <div className="flex items-center gap-2">
                      <Send className="w-4 h-4" />
                      实时发送
                    </div>
                  </SelectItem>
                  <SelectItem value="scheduled">
                    <div className="flex items-center gap-2">
                      <Clock className="w-4 h-4" />
                      定时发送
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 定时发送设置 */}
            {formData.sendType === 'scheduled' && (
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>发送日期 *</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button variant="outline" className="w-full justify-start">
                        <CalendarIcon className="w-4 h-4 mr-2" />
                        {formData.scheduledDate ? (
                          format(formData.scheduledDate, 'yyyy年MM月dd日', { locale: zhCN })
                        ) : (
                          '选择日期'
                        )}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={formData.scheduledDate}
                        onSelect={(date) => setFormData({ ...formData, scheduledDate: date })}
                        locale={zhCN}
                        disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
                      />
                    </PopoverContent>
                  </Popover>
                </div>
                <div>
                  <Label>发送时间 *</Label>
                  <Input
                    type="time"
                    value={formData.scheduledTime}
                    onChange={(e) => setFormData({ ...formData, scheduledTime: e.target.value })}
                  />
                </div>
              </div>
            )}

            {/* 接收人 */}
            <div>
              <Label>接收人 *</Label>
              <Textarea
                value={formData.recipients}
                onChange={(e) => setFormData({ ...formData, recipients: e.target.value })}
                placeholder={
                  formData.type === 'sms' ? '输入手机号，多个用逗号或换行分隔' :
                  formData.type === 'email' ? '输入邮箱地址，多个用逗号或换行分隔' :
                  formData.type === 'push' ? '输入设备ID或用户ID，多个用逗号或换行分隔' :
                  '输入用户名，多个用逗号或换行分隔'
                }
                rows={3}
              />
              <p className="text-xs text-muted-foreground mt-1">
                支持多个接收人，使用逗号、分号或换行分隔
              </p>
            </div>

            {/* 消息主题（邮件和推送） */}
            {(formData.type === 'email' || formData.type === 'push') && (
              <div>
                <Label>消息主题</Label>
                <Input
                  value={formData.subject}
                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                  placeholder="输入消息主题"
                />
              </div>
            )}

            {/* 变量填写 */}
            {selectedTemplate && selectedTemplate.variables.length > 0 && (
              <div>
                <Label>填写变量 *</Label>
                <Card className="p-4 bg-gray-50">
                  <div className="grid grid-cols-2 gap-4">
                    {selectedTemplate.variables.map(variable => (
                      <div key={variable}>
                        <Label htmlFor={`var-${variable}`} className="text-xs">
                          {variable}
                        </Label>
                        <Input
                          id={`var-${variable}`}
                          value={formData.variables[variable] || ''}
                          onChange={(e) => setFormData({
                            ...formData,
                            variables: {
                              ...formData.variables,
                              [variable]: e.target.value,
                            },
                          })}
                          placeholder={`输入 ${variable}`}
                          className="mt-1"
                        />
                      </div>
                    ))}
                  </div>
                </Card>
              </div>
            )}

            {/* 消息内容预览 */}
            {formData.content && (
              <div>
                <Label>消息内容预览</Label>
                <Card className="p-4 bg-blue-50 border-blue-200">
                  <pre className="text-sm whitespace-pre-wrap">
                    {replaceVariables(formData.content, formData.variables)}
                  </pre>
                </Card>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowSendDialog(false)}>
              取消
            </Button>
            <Button onClick={handleSend} className="bg-green-600 hover:bg-green-700">
              <Send className="w-4 h-4 mr-2" />
              {formData.sendType === 'immediate' ? '立即发送' : '创建定时任务'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 详情预览对话框 */}
      <Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>消息详情</DialogTitle>
            <DialogDescription className="sr-only">
              查看消息发送详情
            </DialogDescription>
          </DialogHeader>
          {previewRecord && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>消息模版</Label>
                  <div className="field-value-inline">{previewRecord.templateName}</div>
                </div>
                <div>
                  <Label>消息类型</Label>
                  <div className="mt-2">
                    <Badge className={getTypeBadge(previewRecord.type)}>
                      <span className="flex items-center gap-1">
                        {getTypeIcon(previewRecord.type)}
                        {getTypeLabel(previewRecord.type)}
                      </span>
                    </Badge>
                  </div>
                </div>
                <div>
                  <Label>发送方式</Label>
                  <div className="field-value-inline">
                    {previewRecord.sendType === 'immediate' ? '实时发送' : '定时发送'}
                  </div>
                </div>
                <div>
                  <Label>发送状态</Label>
                  <div className="mt-2">
                    {getStatusBadge(previewRecord.status)}
                  </div>
                </div>
                {previewRecord.scheduledTime && (
                  <div>
                    <Label>定时发送时间</Label>
                    <div className="field-value-inline">
                      {format(new Date(previewRecord.scheduledTime), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
                    </div>
                  </div>
                )}
                <div>
                  <Label>创建时间</Label>
                  <div className="field-value-inline">
                    {format(new Date(previewRecord.createdAt), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
                  </div>
                </div>
              </div>

              {previewRecord.subject && (
                <div>
                  <Label>消息主题</Label>
                  <div className="field-value-inline">{previewRecord.subject}</div>
                </div>
              )}

              <div>
                <Label>接收人列表（共 {previewRecord.recipientCount} 人）</Label>
                <Card className="p-3 bg-gray-50 mt-2">
                  <div className="flex flex-wrap gap-2">
                    {previewRecord.recipients.map((recipient, index) => (
                      <Badge key={index} variant="outline">
                        {recipient}
                      </Badge>
                    ))}
                  </div>
                </Card>
              </div>

              <div>
                <Label>消息内容</Label>
                <Card className="p-4 bg-blue-50 border-blue-200 mt-2">
                  <pre className="text-sm whitespace-pre-wrap">
                    {previewRecord.content}
                  </pre>
                </Card>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button onClick={() => setShowPreviewDialog(false)}>
              关闭
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 使用说明 */}
      <Card className="p-4 bg-blue-50 border-blue-200">
        <h4 className="text-blue-900 mb-2">消息发送说明</h4>
        <ul className="space-y-1 text-sm text-blue-800">
          <li>• 支持发送短信、邮件、站内信、推送四种类型的消息</li>
          <li>• 实时发送：消息立即发送给接收人</li>
          <li>• 定时发送：设定未来的日期和时间，系统到时自动发送</li>
          <li>• 可以使用消息模版，自动填充变量生成个性化内容</li>
          <li>• 支持批量发送，一次可向多个接收人发送相同消息</li>
          <li>• 定时消息在未发送前可以取消，已发送的消息可以删除记录</li>
        </ul>
      </Card>
    </div>
  );
}
