import React, { useState, useEffect } from 'react';
import { Plus, Search, Edit2, Trash2, MoreVertical, Mail, Phone, MessageSquare, Smartphone } from 'lucide-react';
import { Button } from 'antd';
import { Button as UIButton } from './ui/button';
import { useTranslation } from 'react-i18next';
import EmailNotifyManagement from './notification/EmailNotifyManagement';
import InboxMessage from './InboxMessage';
import SmsMessage from './SmsMessage';
import AppMessage from './AppMessage';

interface TableRow {
  id: number;
  [key: string]: any;
}

interface NotificationManagementProps {
  subMenu?: string;
}

export default function NotificationManagement({ subMenu }: NotificationManagementProps) {
  const { t } = useTranslation();
  const [searchTerm, setSearchTerm] = useState('');
  const [showAddModal, setShowAddModal] = useState(false);
  const [editingItem, setEditingItem] = useState<TableRow | null>(null);

  // 根据 subMenu 判断当前通知类型
  const getNotificationType = (): string => {
    if (!subMenu) return 'email'; // 默认邮件
    
    const subMenuLower = subMenu.toLowerCase();
    // 优先检查 app 通知（需要放在前面，避免被其他条件误判）
    if (subMenuLower.includes('app') || 
        subMenuLower === 'appnotification' || 
        subMenuLower.includes('app通知') ||
        subMenuLower.includes('app-notify') ||
        subMenuLower.includes('app_notify')) {
      return 'app';
    } else if (subMenuLower.includes('短信') || subMenuLower.includes('sms')) {
      return 'sms';
    } else if (subMenuLower.includes('站内信') || subMenuLower.includes('webmail')) {
      return 'webmail';
    } else if (subMenuLower.includes('邮件') || subMenuLower.includes('email')) {
      return 'email';
    }
    return 'email'; // 默认邮件
  };

  const notificationType = getNotificationType();

  // 调试日志
  useEffect(() => {
    console.log('NotificationManagement 组件已加载，subMenu:', subMenu, 'notificationType:', notificationType);
  }, [subMenu, notificationType]);

  // 根据通知类型获取不同的数据
  const getNotificationData = (): TableRow[] => {
    if (notificationType === 'sms') {
      // 短信数据
      return [
        {
          id: 1,
          title: '系统升级短信通知',
          content: '系统将于本周六凌晨2:00-4:00进行升级维护，期间系统将暂停服务',
          phone: '138****1234',
          type: '系统通知',
          level: '重要',
          sender: '系统管理员',
          target: '138****1234',
          status: '已发送',
          sendTime: '2025-12-01 10:00',
          createTime: '2025-12-01 09:30'
        },
        {
          id: 2,
          title: '设备异常告警短信',
          content: '1号变压器出现异常，请相关人员立即检处理',
          phone: '139****5678',
          type: '告警通知',
          level: '紧急',
          sender: '监控系统',
          target: '139****5678',
          status: '已发送',
          sendTime: '2025-12-04 08:30',
          createTime: '2025-12-04 08:25'
        },
        {
          id: 3,
          title: '安全培训短信提醒',
          content: '本月安全培训将于12月10日14:00在会议室举行，请准时参加',
          phone: '137****9012',
          type: '培训通知',
          level: '普通',
          sender: '安全部',
          target: '137****9012',
          status: '定时发送',
          sendTime: '2025-12-10 09:00',
          createTime: '2025-12-03 16:00'
        },
      ];
    } else if (notificationType === 'webmail') {
      // 站内信数据
      return [
        {
          id: 1,
          title: '系统升级站内通知',
          content: '系统将于本周六凌晨2:00-4:00进行升级维护，期间系统将暂停服务',
          type: '系统通知',
          level: '重要',
          sender: '系统管理员',
          target: '全体用户',
          status: '已发送',
          readCount: 156,
          totalCount: 200,
          sendTime: '2025-12-01 10:00',
          createTime: '2025-12-01 09:30'
        },
        {
          id: 2,
          title: '设备异常告警站内信',
          content: '1号变压器出现异常，请相关人员立即检处理',
          type: '告警通知',
          level: '紧急',
          sender: '监控系统',
          target: '技术部、运维部',
          status: '已发送',
          readCount: 45,
          totalCount: 50,
          sendTime: '2025-12-04 08:30',
          createTime: '2025-12-04 08:25'
        },
        {
          id: 3,
          title: '月度安全培训站内通知',
          content: '本月安全培训将于12月10日14:00在会议室举行，请全体员工准时参加',
          type: '培训通知',
          level: '普通',
          sender: '安全部',
          target: '全体用户',
          status: '定时发送',
          readCount: 0,
          totalCount: 200,
          sendTime: '2025-12-10 09:00',
          createTime: '2025-12-03 16:00'
        },
      ];
    } else if (notificationType === 'app') {
      // APP通知数据
      return [
        {
          id: 1,
          title: '系统升级APP推送',
          content: '系统将于本周六凌晨2:00-4:00进行升级维护，期间系统将暂停服务',
          type: '系统通知',
          level: '重要',
          sender: '系统管理员',
          target: '全体用户',
          status: '已发送',
          readCount: 156,
          totalCount: 200,
          sendTime: '2025-12-01 10:00',
          createTime: '2025-12-01 09:30'
        },
        {
          id: 2,
          title: '设备异常告警APP推送',
          content: '1号变压器出现异常，请相关人员立即检处理',
          type: '告警通知',
          level: '紧急',
          sender: '监控系统',
          target: '技术部、运维部',
          status: '已发送',
          readCount: 45,
          totalCount: 50,
          sendTime: '2025-12-04 08:30',
          createTime: '2025-12-04 08:25'
        },
        {
          id: 3,
          title: '安全培训APP通知',
          content: '本月安全培训将于12月10日14:00在会议室举行，请全体员工准时参加',
          type: '培训通知',
          level: '普通',
          sender: '安全部',
          target: '全体用户',
          status: '定时发送',
          readCount: 0,
          totalCount: 200,
          sendTime: '2025-12-10 09:00',
          createTime: '2025-12-03 16:00'
        },
      ];
    } else {
      // 邮件数据（默认）
      return [
        {
          id: 1,
          title: '系统升级通知',
          content: '系统将于本周六凌晨2:00-4:00进行升级维护，期间系统将暂停服务',
          type: '系统通知',
          level: '重要',
          sender: '系统管理员',
          target: '全体用户',
          status: '已发送',
          readCount: 156,
          totalCount: 200,
          sendTime: '2025-12-01 10:00',
          createTime: '2025-12-01 09:30'
        },
        {
          id: 2,
          title: '设备异常告警',
          content: '1号变压器出现异常，请相关人员立即检处理',
          type: '告警通知',
          level: '紧急',
          sender: '监控系统',
          target: '技术部、运维部',
          status: '已发送',
          readCount: 45,
          totalCount: 50,
          sendTime: '2025-12-04 08:30',
          createTime: '2025-12-04 08:25'
        },
        {
          id: 3,
          title: '月度安全培训通知',
          content: '本月安全培训将于12月10日14:00在会议室举行，请全体员工准时参加',
          type: '培训通知',
          level: '普通',
          sender: '安全部',
          target: '全体用户',
          status: '定时发送',
          readCount: 0,
          totalCount: 200,
          sendTime: '2025-12-10 09:00',
          createTime: '2025-12-03 16:00'
        },
      ];
    }
  };

  const notificationData = getNotificationData();

  // 表格列配置（根据通知类型动态调整）
  const getColumns = () => {
    if (notificationType === 'sms') {
      return [
        { key: 'title', label: '通知标题', width: '20%' },
        { key: 'type', label: '类型', width: '10%' },
        { key: 'level', label: '级别', width: '8%' },
        { key: 'sender', label: '发送人', width: '10%' },
        { key: 'target', label: '接收手机号', width: '12%' },
        { key: 'status', label: '状态', width: '10%' },
        { key: 'sendTime', label: '发送时间', width: '15%' },
      ];
    } else {
      return [
        { key: 'title', label: '通知标题', width: '20%' },
        { key: 'type', label: '类型', width: '10%' },
        { key: 'level', label: '级别', width: '8%' },
        { key: 'sender', label: '发送人', width: '10%' },
        { key: 'target', label: '接收对象', width: '12%' },
        { key: 'status', label: '状态', width: '10%' },
        { key: 'readCount', label: '已读/总数', width: '10%' },
        { key: 'sendTime', label: '发送时间', width: '15%' },
      ];
    }
  };

  const columns = getColumns();

  // 过滤数据
  const filteredData = notificationData.filter((item) =>
    Object.values(item).some((value) =>
      String(value).toLowerCase().includes(searchTerm.toLowerCase())
    )
  );

  const handleDelete = (id: number) => {
    if (confirm('确定要删除这条数据吗？')) {
      console.log('删除:', id);
    }
  };

  const handleEdit = (item: TableRow) => {
    setEditingItem(item);
    setShowAddModal(true);
  };

  // 渲染表格内容
  const renderTable = () => (
    <>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="bg-gradient-to-r from-gray-50 to-gray-100/50 border-b border-gray-200">
              <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '5%' }}>
                序号
              </th>
              {columns.map((column) => (
                <th
                  key={column.key}
                  className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider"
                  style={{ width: column.width }}
                >
                  {column.label}
                </th>
              ))}
              <th className="px-6 py-4 text-center text-xs text-gray-600 uppercase tracking-wider" style={{ width: '10%' }}>
                操作
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {filteredData.map((row, index) => (
              <tr
                key={row.id}
                className="hover:bg-blue-50/30 transition-colors"
              >
                <td className="px-6 py-4 text-sm text-gray-900">
                  {index + 1}
                </td>
                {columns.map((column) => (
                  <td key={column.key} className="px-6 py-4 text-sm text-gray-900">
                    {column.key === 'status' ? (
                      <span
                        className={`inline-flex px-3 py-1 rounded-lg text-xs ${
                          row[column.key] === '已发送'
                            ? 'bg-green-100 text-green-700'
                            : row[column.key] === '定时发送'
                            ? 'bg-blue-100 text-blue-700'
                            : 'bg-gray-100 text-gray-700'
                        }`}
                      >
                        {row[column.key]}
                      </span>
                    ) : column.key === 'level' ? (
                      <span
                        className={`inline-flex px-3 py-1 rounded-lg text-xs ${
                          row[column.key] === '紧急'
                            ? 'bg-red-100 text-red-700'
                            : row[column.key] === '重要'
                            ? 'bg-orange-100 text-orange-700'
                            : 'bg-blue-100 text-blue-700'
                        }`}
                      >
                        {row[column.key]}
                      </span>
                    ) : column.key === 'readCount' ? (
                      row.readCount !== undefined && row.totalCount !== undefined ? (
                        <span className="text-gray-900">
                          {row.readCount}/{row.totalCount}
                        </span>
                      ) : (
                        '-'
                      )
                    ) : (
                      row[column.key] || '-'
                    )}
                  </td>
                ))}
                <td className="px-6 py-4">
                  <div className="flex items-center justify-center gap-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleEdit(row)}
                      className="h-8 px-2"
                    >
                      <Edit2 className="w-4 h-4" />
                      <span className="ml-1">编辑</span>
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDelete(row.id)}
                      className="h-8 px-2 text-red-600 hover:text-red-700"
                    >
                      <Trash2 className="w-4 h-4" />
                      <span className="ml-1">删除</span>
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 px-2"
                    >
                      <MoreVertical className="w-4 h-4" />
                      <span className="ml-1">更多</span>
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 分页 */}
      {filteredData.length > 0 && (
        <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-600">
              {t('common.total')} <span className="text-blue-600 font-medium">{filteredData.length}</span> {t('common.records')}
            </div>
            <div className="flex gap-2">
              <Button
                disabled={true}
              >
                {t('common.prevPage')}
              </Button>
              <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
                1 / 1
              </span>
              <Button
                disabled={true}
              >
                {t('common.nextPage')}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );

  return (
    <div className="space-y-6">
      {/* 站内信、邮件、短信和App通知直接渲染，不需要外层容器 */}
      {notificationType === 'webmail' && <InboxMessage />}
      {notificationType === 'email' && <EmailNotifyManagement />}
      {notificationType === 'sms' && <SmsMessage />}
      {notificationType === 'app' && <AppMessage />}

      {/* 新增/编辑弹窗 */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl mx-4 max-h-[90vh] overflow-y-auto animate-in zoom-in duration-200">
            {/* 弹窗标题 */}
            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between sticky top-0 bg-white z-10">
              <h3 className="text-lg text-gray-900">
                {editingItem ? '编辑通知' : '新增通知'}
              </h3>
              <button
                onClick={() => setShowAddModal(false)}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* 弹窗内容 */}
            <div className="px-6 py-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm text-gray-700 mb-2">通知标题 *</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入通知标题"
                    defaultValue={editingItem?.title || ''}
                  />
                </div>
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm text-gray-700 mb-2">通知类型 *</label>
                    <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                      <option value="">请选择</option>
                      <option value="系统通知">系统通知</option>
                      <option value="告警通知">告警通知</option>
                      <option value="培训通知">培训通知</option>
                      <option value="审批通知">审批通知</option>
                      <option value="安全提醒">安全提醒</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm text-gray-700 mb-2">优先级 *</label>
                    <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                      <option value="">请选择</option>
                      <option value="紧急">紧急</option>
                      <option value="重要">重要</option>
                      <option value="普通">普通</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm text-gray-700 mb-2">发送方式</label>
                    <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                      <option value="立即发送">立即发送</option>
                      <option value="定时发送">定时发送</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">接收对象 *</label>
                  <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                    <option value="">请选择</option>
                    <option value="全体用户">全体用户</option>
                    <option value="按部门">按部门</option>
                    <option value="按角色">按角色</option>
                    <option value="指定用户">指定用户</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">通知内容 *</label>
                  <textarea
                    rows={5}
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm resize-none"
                    placeholder="请输入通知内容"
                    defaultValue={editingItem?.content || ''}
                  ></textarea>
                </div>
              </div>
            </div>

            {/* 弹窗底部 */}
            <div className="px-6 py-4 bg-gray-50/50 border-t border-gray-200 flex justify-end gap-3 rounded-b-2xl">
              <button
                onClick={() => setShowAddModal(false)}
                className="px-5 py-2.5 text-sm text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"
              >
                取消
              </button>
              <button
                onClick={() => {
                  console.log('保存:', editingItem);
                  setShowAddModal(false);
                }}
                className="px-5 py-2.5 text-sm text-white bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all"
              >
                {editingItem ? '保存修改' : '确定'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

