import React, { useState, useEffect } from 'react';
import { useIntl } from 'umi';
import { Button, Table, Modal, message, Input, Select, Form, Tooltip, Tag, Tabs } from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  SearchOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import { getNoticeList, addNotice, updateNotice, deleteNotice, batchDeleteNotice, updateNoticeStatus, updateNoticeTopStatus, getNoticeDetail } from '@/servers/api/notice';
import styles from './noticeManage.less';
import {
  NoticeStatus,
  NoticeStatusText,
  NoticeStatusColor,
  TopStatus,
  ModalType,
} from '@/dicts/noticeManageDict';

import NoticeManageForm from './NoticeManageForm';
import NoticeManageInfo from './NoticeManageInfo';

const { Option } = Select;
const { TabPane } = Tabs;

type NoticeType = API.NoticeRecord & {
  key: string;
};

interface SearchParams {
  title?: string;
  status?: string;
}

const NoticeManage: React.FC = () => {
  const intl = useIntl();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [isEdit, setIsEdit] = useState<boolean>(false);
  const [isViewMode, setIsViewMode] = useState<boolean>(false);
  const [currentId, setCurrentId] = useState<string>('');

  // 查看详情数据
  const [viewData, setViewData] = useState<API.NoticeRecord | null>(null);
  const [noticeData, setNoticeData] = useState<NoticeType[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条记录`,
  });
  const [searchParams, setSearchParams] = useState<SearchParams>({});

  // 获取通知列表
  const fetchNoticeList = (current: number = 1, pageSize: number = 10, params: SearchParams = searchParams) => {
    // 更新搜索参数状态
    if (params !== searchParams) {
      setSearchParams(params);
    }

    setLoading(true);
    // 实际项目中应调用API
    getNoticeList({
      ...params,
      pageNo: current,
      pageSize: pageSize,
    })
      .then(res => {
        if (res && res.success) {
          const { records, total, current: currentPage, size } = res.data;

          // 添加key属性
          setNoticeData(
            records.map((item: API.NoticeRecord) => ({
              ...item,
              key: item.id,
            }))
          );
          setPagination({
            ...pagination,
            current: currentPage,
            pageSize: size,
            total: total,
          });
        } else {
          message.error(res.message || '获取通知列表失败');
        }
      })
      .catch(error => {
        console.error('获取通知列表失败:', error);
        message.error('获取通知列表失败');
      })
      .finally(() => {
        setLoading(false);
      });
  };

  // 首次加载时获取数据
  useEffect(() => {
    fetchNoticeList(1, pagination.pageSize, {});
  }, []);

  // 处理查看
  const handleView = async (record: NoticeType) => {
    setCurrentId(record.id);
    setIsViewMode(true);

    try {
      const response = await getNoticeDetail(record.id);
      if (response && response.success) {
        // 设置查看详情数据
        setViewData(response.data);
        setModalVisible(true);
      } else {
        message.error(response.message || '获取详情失败');
      }
    } catch (error) {
      console.error('获取通知详情失败:', error);
      message.error('获取详情失败');
    }
  };

  // 处理编辑
  const handleEdit = (record: NoticeType) => {
    // 检查是否为已发布状态
    if (record.status === NoticeStatus.PUBLISHED) {
      message.warning('已发布的通知不能编辑');
      return;
    }

    setIsEdit(true);
    setIsViewMode(false);
    setCurrentId(record.id);
    setModalVisible(true);
  };

  // 处理删除
  const showDeleteConfirm = (record: NoticeType) => {
    // 检查是否为已发布状态
    if (record.status === NoticeStatus.PUBLISHED) {
      message.warning('已发布的通知不能删除');
      return;
    }

    Modal.confirm({
      title: '确定要删除该通知吗?',
      icon: <ExclamationCircleOutlined />,
      content: `标题: ${record.title}`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      maskClosable: false,
      onOk: async () => {
        try {
          // 调用删除API
          const response = await deleteNotice(record.id);
          if (response && response.success) {
            message.success('删除成功');
            fetchNoticeList(pagination.current, pagination.pageSize, searchParams); // 重新加载数据
          } else {
            message.error(response.message || '删除失败');
          }
        } catch (error) {
          console.error('删除通知失败:', error);
          message.error('删除失败');
        }
      },
    });
  };

  // 处理发布/下架
  const handlePublishStatus = async (record: NoticeType) => {
    // 状态: 0-草稿，1-已发布
    const isPublished = record.status === NoticeStatus.PUBLISHED;
    const actionText = isPublished ? '下架' : '发布';
    const newStatus = isPublished ? NoticeStatus.UNPUBLISHED : NoticeStatus.PUBLISHED;

    try {
      // 调用API更新状态
      const response = await updateNoticeStatus(record.id, newStatus);
      if (response && response.success) {
        message.success(`${actionText}成功`);
        fetchNoticeList(pagination.current, pagination.pageSize, searchParams); // 重新加载数据
      } else {
        message.error(response.message || `${actionText}失败`);
      }
    } catch (error) {
      console.error(`${actionText}失败:`, error);
      message.error(`${actionText}失败`);
    }
  };

  // 处理置顶/取消置顶
  const handleToggleTop = async (record: NoticeType) => {
    const isTop = record.isTop === TopStatus.YES;
    const actionText = isTop ? '取消置顶' : '置顶';
    const newIsTop = isTop ? TopStatus.NO : TopStatus.YES;

    try {
      // 调用API更新置顶状态
      const response = await updateNoticeTopStatus(record.id, newIsTop);
      if (response && response.success) {
        message.success(`${actionText}成功`);
        fetchNoticeList(pagination.current, pagination.pageSize, searchParams); // 重新加载数据
      } else {
        message.error(response.message || `${actionText}失败`);
      }
    } catch (error) {
      console.error(`${actionText}失败:`, error);
      message.error(`${actionText}失败`);
    }
  };

  // 获取状态标签
  const getStatusTag = (status: string) => {
    const statusKey = status as keyof typeof NoticeStatusText;
    const color = NoticeStatusColor[statusKey] || 'default';
    const text = NoticeStatusText[statusKey] || '未知';
    return <Tag color={color}>{text}</Tag>;
  };

  // 处理表格分页变化
  const handleTableChange = (newPagination: any) => {
    fetchNoticeList(newPagination.current, newPagination.pageSize, searchParams);
  };

  const columns = [
    {
      title: '序号',
      render: (text: string, record: NoticeType, index: number) => index + 1,
      width: 80,
      align: 'center' as const,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      ellipsis: {
        showTitle: false,
      },
      render: (title: string, record: NoticeType) => (
        <Tooltip placement="topLeft" title={title}>
          <span>
            {record.isTop === TopStatus.YES && <Tag color="red" style={{ marginRight: 8 }}>置顶</Tag>}
            {title}
          </span>
        </Tooltip>
      ),
    },
    {
      title: '日期',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center' as const,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center' as const,
      render: (status: string) => getStatusTag(status),
    },
    {
      title: '发布人',
      dataIndex: 'createBy',
      key: 'createBy',
      align: 'center' as const,
    },
    {
      title: '操作',
      key: 'action',
      width: 300,
      align: 'center' as const,
      render: (_: unknown, record: NoticeType) => (
        <>
          <Button type="link" onClick={() => handleView(record)}>
            查看
          </Button>
          {record.status === NoticeStatus.PUBLISHED ? (
            <>
              <Button type="link" onClick={() => handlePublishStatus(record)}>
                下架
              </Button>
              <Button
                type="link"
                onClick={() => handleToggleTop(record)}
              >
                {record.isTop === TopStatus.YES ? '取消置顶' : '置顶'}
              </Button>
            </>
          ) : (
            <>
              <Button type="link" onClick={() => handleEdit(record)}>
                编辑
              </Button>
              <Button
                type="link"
                onClick={() => handlePublishStatus(record)}
              >
                发布
              </Button>
              <Button
                type="link"
                onClick={() => showDeleteConfirm(record)}
              >
                删除
              </Button>
              <Button
                type="link"
                onClick={() => handleToggleTop(record)}
              >
                {record.isTop === TopStatus.YES ? '取消置顶' : '置顶'}
              </Button>
            </>
          )}
        </>
      ),
    },
  ];

  // 行选择限制
  const checkSelectable = (record: NoticeType) => {
    return record.status !== NoticeStatus.PUBLISHED; // 已发布的不能选择
  };

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: (record: NoticeType) => ({
      disabled: record.status === NoticeStatus.PUBLISHED, // 已发布的不能选择
    }),
  };

  const hasSelected = selectedRowKeys.length > 0;

  // 处理添加
  const handleAdd = () => {
    setIsEdit(false);
    setIsViewMode(false);
    setCurrentId('');
    setViewData(null);
    setModalVisible(true);
  };

  // 处理批量删除
  const handleBatchDelete = () => {
    Modal.confirm({
      title: '确定要删除选中的通知吗?',
      icon: <ExclamationCircleOutlined />,
      content: '删除后无法恢复',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      maskClosable: false,
      onOk: async () => {
        setLoading(true);
        try {
          // 获取可删除的ID（非已发布状态）
          const deleteIds = selectedRowKeys.filter(key => {
            const record = noticeData.find(item => item.key === key);
            return record && record.status !== NoticeStatus.PUBLISHED;
          }) as string[];

          if (deleteIds.length > 0) {
            // 调用批量删除API
            const response = await batchDeleteNotice(deleteIds);
            if (response && response.success) {
              setSelectedRowKeys([]);
              message.success('删除成功');
              fetchNoticeList(pagination.current, pagination.pageSize, searchParams); // 重新加载数据
            } else {
              message.error(response.message || '批量删除失败');
            }
          } else {
            message.warning('没有可删除的通知');
          }
        } catch (error) {
          console.error('批量删除失败:', error);
          message.error('批量删除失败');
        } finally {
          setLoading(false);
        }
      },
    });
  };

  // 处理搜索
  const handleSearch = (values: SearchParams) => {
    fetchNoticeList(1, pagination.pageSize, values);
  };

  // 处理模态框取消
  const handleModalCancel = () => {
    setModalVisible(false);
    setIsViewMode(false);
    setViewData(null);
  };

  return (
    <div className="common-container">
      <div className="filter-action-row">
        <Form
          form={form}
          name="search"
          onFinish={handleSearch}
          layout="inline"
          className="filter-form"
        >
          <Form.Item name="title" label="标题">
            <Input placeholder="请输入标题关键词" allowClear />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" allowClear>
              <Option value={NoticeStatus.DRAFT}>草稿</Option>
              <Option value={NoticeStatus.PUBLISHED}>已发布</Option>
              <Option value={NoticeStatus.UNPUBLISHED}>已下架</Option>
            </Select>
          </Form.Item>
          <Form.Item className="filter-btns">
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              onClick={() => {
                form.resetFields();
                fetchNoticeList(1, pagination.pageSize, {});
              }}
            >
              重置
            </Button>
          </Form.Item>
        </Form>

        <div className="right-buttons">
          <Button
            type="primary"
            ghost
            icon={<PlusOutlined />}
            onClick={handleAdd}
          >
            新增
          </Button>
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={handleBatchDelete}
            disabled={!hasSelected}
            loading={loading}
          >
            删除
          </Button>
          {hasSelected && (
            <span className="selected-count">
              已选择 {selectedRowKeys.length} 项
            </span>
          )}
        </div>
      </div>

      <div className="content-area">
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={noticeData}
          pagination={pagination}
          loading={loading}
          onChange={handleTableChange}
        />
      </div>

      {/* 新增/编辑/查看模态框 */}
      <Modal
        title={isViewMode ? "查看通知" : isEdit ? "编辑通知" : "新增通知"}
        visible={modalVisible}
        onCancel={handleModalCancel}
        width={900}
        maskClosable={false}
        destroyOnClose
        footer={
          isViewMode
            ? [
                <Button key="close" onClick={handleModalCancel}>
                  关闭
                </Button>,
              ]
            : null
        }
      >
        {isViewMode && viewData ? (
          // 查看详情模式
          <NoticeManageInfo data={viewData} />
        ) : (
          // 编辑/新增模式
          <NoticeManageForm
            id={currentId}
            isEdit={isEdit}
            onSuccess={() => {
              setModalVisible(false);
              fetchNoticeList(pagination.current, pagination.pageSize, searchParams);
            }}
          />
        )}
      </Modal>
    </div>
  );
};

export default NoticeManage;