import { useState } from 'react';
import { Tabs } from 'antd';
import { BellOutlined, MailOutlined, FileTextOutlined, SettingOutlined } from '@ant-design/icons';
import NotificationList from './messages/NotificationList';
import MessageTemplates from './messages/MessageTemplates';
import NotificationPreferences from './messages/NotificationPreferences';
import type { MessageQuery } from '../api/messages';

const UNREAD_FILTER: MessageQuery = { is_read: false };

export default function Messages() {
  const [activeKey, setActiveKey] = useState('all');

  return (
    <div>
      <div className="erp-page-header" style={{ borderBottom: 'none', marginBottom: 0, paddingBottom: 8 }}>
        <div>
          <h4>消息中心</h4>
          <div className="erp-page-subtitle">管理站内消息、模板和通知偏好</div>
        </div>
      </div>

      <Tabs
        activeKey={activeKey}
        onChange={setActiveKey}
        style={{ marginTop: 8 }}
        items={[
          {
            key: 'all',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <MailOutlined style={{ fontSize: 14 }} />
                全部消息
              </span>
            ),
            children: <NotificationList />,
          },
          {
            key: 'unread',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <BellOutlined style={{ fontSize: 14 }} />
                未读消息
              </span>
            ),
            children: <NotificationList queryFilter={UNREAD_FILTER} />,
          },
          {
            key: 'templates',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <FileTextOutlined style={{ fontSize: 14 }} />
                消息模板
              </span>
            ),
            children: <MessageTemplates />,
          },
          {
            key: 'preferences',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <SettingOutlined style={{ fontSize: 14 }} />
                通知设置
              </span>
            ),
            children: <NotificationPreferences />,
          },
        ]}
      />
    </div>
  );
}