'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Send, Mail, MessageSquare, Bell, Smartphone, CheckCircle2, XCircle, Timer } from 'lucide-react';
import { toast } from 'sonner';
import { MessageTemplate, MessageSendRecord } from '@/types/message';
import { MessageSendFormData } from './types';
import {
  MessageStatsCards,
  MessageSendTable,
  SendMessageDialog,
  MessagePreviewDialog,
  MessageInstructions
} from './components';

// API服务函数
const messageApi = {
  // 获取消息模板
  getTemplates: async (): Promise<MessageTemplate[]> => {
    try {
      const response = await fetch('/api/message/templates');
      if (!response.ok) {
        throw new Error('Failed to fetch message templates');
      }
      return await response.json();
    } catch (error) {
      console.warn('Failed to fetch message templates, using mock data:', error);
      return getMockTemplates();
    }
  },

  // 获取发送记录
  getSendRecords: async (): Promise<MessageSendRecord[]> => {
    try {
      const response = await fetch('/api/message/send-records');
      if (!response.ok) {
        throw new Error('Failed to fetch send records');
      }
      return await response.json();
    } catch (error) {
      console.warn('Failed to fetch send records, using mock data:', error);
      return getMockSendRecords();
    }
  },

  // 发送消息
  sendMessage: async (data: MessageSendFormData): Promise<MessageSendRecord> => {
    try {
      const response = await fetch('/api/message/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      if (!response.ok) {
        throw new Error('Failed to send message');
      }
      return await response.json();
    } catch (error) {
      console.warn('Failed to send message, using mock response:', error);
      return createMockSendRecord(data);
    }
  },

  // 取消定时消息
  cancelMessage: async (id: string): Promise<void> => {
    try {
      const response = await fetch(`/api/message/send/${id}/cancel`, {
        method: 'POST',
      });
      if (!response.ok) {
        throw new Error('Failed to cancel message');
      }
    } catch (error) {
      console.warn('Failed to cancel message, updating local state:', error);
      // 模拟取消操作
    }
  },

  // 删除发送记录
  deleteMessage: async (id: string): Promise<void> => {
    try {
      const response = await fetch(`/api/message/send/${id}`, {
        method: 'DELETE',
      });
      if (!response.ok) {
        throw new Error('Failed to delete message');
      }
    } catch (error) {
      console.warn('Failed to delete message, updating local state:', error);
      // 模拟删除操作
    }
  }
};

// 模拟数据生成函数
function getMockTemplates(): MessageTemplate[] {
  return [
    {
      id: 'tpl-1',
      code: 'TASK_ASSIGNMENT',
      name: '任务分配通知',
      type: 'internal',
      subject: '新任务分配',
      content: '您好，{{username}}！您有新的作业任务：{{taskName}}，计划执行时间：{{executeTime}}。请及时查看并准备。',
      variables: ['username', 'taskName', 'executeTime'],
      isActive: true,
      description: '向农机操作员分配新任务时发送',
      createdAt: '2024-01-01T00:00:00',
      updatedAt: '2024-01-01T00:00:00',
      createdBy: 'admin',
    },
    {
      id: 'tpl-2',
      code: 'EQUIPMENT_WARNING',
      name: '设备预警通知',
      type: 'sms',
      content: '【智慧农业】设备预警：{{equipmentName}}检测到{{warningType}}，请及时处理。',
      variables: ['equipmentName', 'warningType'],
      isActive: true,
      description: '设备出现异常时发送预警',
      createdAt: '2024-01-01T00:00:00',
      updatedAt: '2024-01-01T00:00:00',
      createdBy: 'admin',
    },
    {
      id: 'tpl-3',
      code: 'MAINTENANCE_REMINDER',
      name: '保养提醒',
      type: 'email',
      subject: '设备保养提醒',
      content: '尊敬的用户：\n\n您的设备{{equipmentName}}（编号：{{equipmentNo}}）已使用{{usageHours}}小时，建议进行保养维护。\n\n保养周期：每{{maintenanceInterval}}小时\n上次保养时间：{{lastMaintenanceTime}}\n\n请及时安排保养，确保设备正常运行。',
      variables: ['equipmentName', 'equipmentNo', 'usageHours', 'maintenanceInterval', 'lastMaintenanceTime'],
      isActive: true,
      description: '设备需要保养时发送提醒',
      createdAt: '2024-01-01T00:00:00',
      updatedAt: '2024-01-01T00:00:00',
      createdBy: 'admin',
    },
  ];
}

function getMockSendRecords(): MessageSendRecord[] {
  return [
    {
      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',
    },
  ];
}

function createMockSendRecord(data: MessageSendFormData): MessageSendRecord {
  const now = new Date().toISOString();
  const scheduledDateTime = data.sendType === 'scheduled' && data.scheduledDate
    ? new Date(data.scheduledDate.getFullYear(), data.scheduledDate.getMonth(), data.scheduledDate.getDate(),
        parseInt(data.scheduledTime.split(':')[0]), parseInt(data.scheduledTime.split(':')[1])).toISOString()
    : undefined;

  // 解析接收人
  const recipients = data.recipients.split(/[,，;；\n]/).map(r => r.trim()).filter(r => r);

  // 替换变量生成最终内容
  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 finalContent = replaceVariables(data.content, data.variables);
  const finalSubject = data.subject ? replaceVariables(data.subject, data.variables) : undefined;

  return {
    id: `send-${Date.now()}`,
    templateId: data.templateId,
    templateName: getMockTemplates().find(t => t.id === data.templateId)?.name || '',
    type: data.type,
    recipients,
    recipientCount: recipients.length,
    subject: finalSubject,
    content: finalContent,
    sendType: data.sendType,
    scheduledTime: scheduledDateTime,
    status: data.sendType === 'immediate' ? 'sent' : 'pending',
    sentCount: data.sendType === 'immediate' ? recipients.length : undefined,
    sentAt: data.sendType === 'immediate' ? now : undefined,
    createdAt: now,
    createdBy: 'admin',
  };
}

export default function MessageSendPage() {
  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 [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [formData, setFormData] = useState<MessageSendFormData>({
    templateId: '',
    type: 'internal',
    recipientType: 'manual',
    recipients: '',
    subject: '',
    content: '',
    sendType: 'immediate',
    scheduledDate: undefined,
    scheduledTime: '09:00',
    variables: {},
  });

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      setError(null);
      setLoading(true);
      const [templatesData, recordsData] = await Promise.all([
        messageApi.getTemplates(),
        messageApi.getSendRecords()
      ]);
      setTemplates(templatesData);
      setSendRecords(recordsData);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载数据失败');
      console.error('Failed to load data:', err);
    } finally {
      setLoading(false);
    }
  };

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

  const handleSend = async () => {
    try {
      // 验证
      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 newRecord = await messageApi.sendMessage(formData);
      setSendRecords([newRecord, ...sendRecords]);

      if (formData.sendType === 'immediate') {
        toast.success(`消息发送成功！已发送 ${newRecord.recipientCount} 条消息`);
      } else {
        toast.success(`定时消息已创建！将于 ${new Date(newRecord.scheduledTime!).toLocaleString('zh-CN')} 发送`);
      }

      setShowSendDialog(false);
    } catch (err) {
      toast.error('发送失败：' + (err instanceof Error ? err.message : '未知错误'));
    }
  };

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

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

    try {
      await messageApi.cancelMessage(id);
      setSendRecords(sendRecords.map(r =>
        r.id === id ? { ...r, status: 'cancelled' as const } : r
      ));
      toast.success('已取消定时消息');
    } catch (err) {
      toast.error('取消失败：' + (err instanceof Error ? err.message : '未知错误'));
    }
  };

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

    try {
      await messageApi.deleteMessage(id);
      setSendRecords(sendRecords.filter(r => r.id !== id));
      toast.success('删除成功');
    } catch (err) {
      toast.error('删除失败：' + (err instanceof Error ? err.message : '未知错误'));
    }
  };

  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 (
      <div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${className}`}>
        <Icon className="w-3 h-3" />
        {label}
      </div>
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-green-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
          <p className="text-muted-foreground">正在加载数据...</p>
        </div>
      </div>
    );
  }

  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>

      {error && (
        <div className="p-4 border border-yellow-200 bg-yellow-50 rounded-md">
          <p className="text-yellow-800 text-sm">
            警告: {error} (当前显示为模拟数据)
          </p>
        </div>
      )}

      {/* 统计卡片 */}
      <MessageStatsCards sendRecords={sendRecords} />

      {/* 发送记录列表 */}
      <MessageSendTable
        sendRecords={sendRecords}
        onPreview={handlePreview}
        onCancel={handleCancel}
        onDelete={handleDelete}
        getTypeIcon={getTypeIcon}
        getTypeLabel={getTypeLabel}
        getTypeBadge={getTypeBadge}
        getStatusBadge={getStatusBadge}
      />

      {/* 发送消息对话框 */}
      <SendMessageDialog
        open={showSendDialog}
        onOpenChange={setShowSendDialog}
        templates={templates}
        formData={formData}
        onFormDataChange={setFormData}
        onSend={handleSend}
        getTypeIcon={getTypeIcon}
        getTypeLabel={getTypeLabel}
      />

      {/* 详情预览对话框 */}
      <MessagePreviewDialog
        open={showPreviewDialog}
        onOpenChange={setShowPreviewDialog}
        record={previewRecord}
        getTypeIcon={getTypeIcon}
        getTypeLabel={getTypeLabel}
        getTypeBadge={getTypeBadge}
        getStatusBadge={getStatusBadge}
      />

      {/* 使用说明 */}
      <MessageInstructions />
    </div>
  );
}