import React, { useEffect, useState } from 'react';
import {
  Button, Card, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, Typography, message, Empty,
} from 'antd';
import {
  BellOutlined, PlusOutlined, DeleteOutlined, SendOutlined, EyeOutlined, TeamOutlined,
} from '@ant-design/icons';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';
import { getAdminNotifications, createAdminNotification, deleteAdminNotification, getAdminUsers, getNotificationReadUsers } from '../api';
import { formatDate } from '../utils/formatDate';

interface NotificationRecord {
  id: string;
  title: string;
  content: string;
  type: string;
  target: string;
  targetUserId: string | null;
  createdAt: string;
}

interface UserOption {
  id: string;
  username: string;
}

interface ReadUser {
  userId: string;
  username: string;
  readAt: string;
}

const AdminNotificationManager: React.FC = () => {
  const [notifications, setNotifications] = useState<NotificationRecord[]>([]);
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<UserOption[]>([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [form] = Form.useForm();
  const [readModal, setReadModal] = useState<{ open: boolean; notifId: string; title: string }>({ open: false, notifId: '', title: '' });
  const [readUsers, setReadUsers] = useState<ReadUser[]>([]);
  const [readLoading, setReadLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);

  const load = async () => {
    setLoading(true);
    try {
      const res = await getAdminNotifications(page, pageSize);
      const userRes = await getAdminUsers(1, 1000);
      const userList = userRes.items || [];
      const userMap: Record<string, string> = {};
      userList.forEach((u: any) => { userMap[u.id] = u.username; });
      const items = (res.items || []).map((n: any) => ({
        id: n.id,
        title: n.title,
        content: n.content,
        type: n.type,
        targetUserId: n.userId || null,
        target: n.userId ? (userMap[n.userId] || n.userId) : '全部用户',
        createdAt: n.createdAt,
      }));
      setNotifications(items);
      setTotal(res.total || 0);
      setUsers(userList.map((u: any) => ({ id: u.id, username: u.username })));
    } catch {
      message.error('加载通知列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); }, [page, pageSize]);

  const handlePageChange = (p: number, ps: number) => {
    setPage(p);
    setPageSize(ps);
  };

  const handleSend = async () => {
    try {
      const values = await form.validateFields();
      await createAdminNotification({
        title: values.title,
        content: values.content,
        type: values.type || 'system',
        target_user_id: values.target_user_id || undefined,
      });
      message.success('消息已发送');
      setModalOpen(false);
      form.resetFields();
      load();
    } catch { /* validation */ }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteAdminNotification(id);
      message.success('已删除');
      load();
    } catch (e: any) {
      message.error(e?.message || '删除失败');
    }
  };

  const handleViewRead = async (notifId: string, title: string) => {
    setReadModal({ open: true, notifId, title });
    setReadLoading(true);
    try {
      const res = await getNotificationReadUsers(notifId);
      setReadUsers(res.items || []);
    } catch {
      message.error('加载已读列表失败');
    } finally {
      setReadLoading(false);
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'system': return 'blue';
      case 'credit': return 'orange';
      case 'promo': return 'purple';
      default: return 'default';
    }
  };

  const columns = [
    {
      title: '标题', dataIndex: 'title', width: 200,
      render: (v: string) => <Typography.Text strong>{v}</Typography.Text>,
    },
    {
      title: '内容', dataIndex: 'content', ellipsis: true,
      render: (v: string) => <div style={{ maxWidth: 300 }} dangerouslySetInnerHTML={{ __html: v }} />,
    },
    {
      title: '类型', dataIndex: 'type', width: 80,
      render: (v: string) => {
        const labels: Record<string, string> = { system: '系统', credit: '积分', promo: '活动' };
        return <Tag color={getTypeColor(v)}>{labels[v] || v}</Tag>;
      },
    },
    {
      title: '发送目标', dataIndex: 'target', width: 120,
      render: (v: string) => (
        <Tag color={v === '全部用户' ? 'green' : 'blue'}>{v}</Tag>
      ),
    },
    {
      title: '发送时间', dataIndex: 'createdAt', width: 160,
      render: (v: string) => formatDate(v),
    },
    {
      title: '操作', key: 'action', width: 180,
      render: (_: any, r: NotificationRecord) => (
        <Space size={4}>
          <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => handleViewRead(r.id, r.title)}>
            已读
          </Button>
          <Popconfirm title="确定删除该消息？" onConfirm={() => handleDelete(r.id)}>
            <Button type="link" danger size="small" icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Space>
            <BellOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>消息推送管理</Typography.Text>
            <Tag color="purple">共 {total} 条消息</Tag>
          </Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalOpen(true)}
            style={{ borderRadius: 8 }}>
            发送新消息
          </Button>
        </div>

        <Table
          columns={columns}
          dataSource={notifications}
          rowKey="id"
          loading={loading}
          pagination={{
            current: page,
            pageSize: pageSize,
            total: total,
            onChange: handlePageChange,
            showSizeChanger: true,
            showTotal: (t) => `共 ${t} 条消息`,
          }}
          scroll={{ x: 900 }}
        />
      </Card>

      {/* Send Notification Modal */}
      <Modal
        title={<Space><SendOutlined />发送消息</Space>}
        open={modalOpen}
        onOk={handleSend}
        onCancel={() => { setModalOpen(false); form.resetFields(); }}
        okText="发送" cancelText="取消" width={520}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="title" label="消息标题"
            rules={[{ required: true, message: '请输入标题' }]}>
            <Input placeholder="请输入消息标题" size="large" />
          </Form.Item>
          <Form.Item name="content" label="消息内容"
            rules={[{ required: true, validator: (_, v) => v && v !== '<p><br></p>' ? Promise.resolve() : Promise.reject('请输入内容') }]}>
            <ReactQuill theme="snow" placeholder="请输入消息内容（支持富文本：加粗、斜体、颜色、链接等)" style={{ height: 180, marginBottom: 40 }} />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="type" label="消息类型" style={{ flex: 1 }}
              initialValue="system" rules={[{ required: true }]}>
              <Select size="large" options={[
                { value: 'system', label: '系统通知' },
                { value: 'credit', label: '积分通知' },
                { value: 'promo', label: '活动通知' },
              ]} />
            </Form.Item>
            <Form.Item name="target_user_id" label="发送目标" style={{ flex: 1 }}
              extra="留空则发送给全部用户">
              <Select size="large" allowClear placeholder="全部用户"
                options={users.map(u => ({ value: u.id, label: u.username }))} />
            </Form.Item>
          </div>
        </Form>
      </Modal>

      {/* Read Users Modal */}
      <Modal
        title={<Space><TeamOutlined />已读用户 — {readModal.title}</Space>}
        open={readModal.open}
        onCancel={() => { setReadModal({ open: false, notifId: '', title: '' }); setReadUsers([]); }}
        footer={null} width={480}
      >
        {readLoading ? (
          <div style={{ textAlign: 'center', padding: 40 }}>加载中...</div>
        ) : readUsers.length === 0 ? (
          <Empty description="暂无用户已读" style={{ padding: '40px 0' }} />
        ) : (
          <div>
            <div style={{ marginBottom: 12, color: '#64748b', fontSize: 13 }}>
              共 {readUsers.length} 人已读
            </div>
            <Table
              dataSource={readUsers}
              rowKey="userId"
              pagination={false}
              size="small"
              columns={[
                { title: '用户名', dataIndex: 'username', render: (v: string) => <Typography.Text strong>{v}</Typography.Text> },
                { title: '已读时间', dataIndex: 'readAt', width: 180, render: (v: string) => formatDate(v) },
              ]}
            />
          </div>
        )}
      </Modal>
    </div>
  );
};

export default AdminNotificationManager;