/**
 * @name 关键词词库
 * 
 * 关键词词库管理，包含查询、新增、批量导入、批量删除等功能
 */

import './style.css';

import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
import {
  Layout,
  Card,
  Typography,
  Space,
  Button,
  Table,
  Tag,
  Switch,
  Modal,
  Form,
  Input,
  Select,
  Divider,
  Popconfirm,
  message,
  Upload,
  ConfigProvider
} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { PlusOutlined, SearchOutlined, DeleteOutlined, EditOutlined, UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { AxureProps, AxureHandle } from '../../common/axure-types';
import { MENU_ITEMS, resolveMenuTarget } from '../../common/menu';
import SideMenu from '../../components/side-menu';
import dayjs from 'dayjs';

const { Header, Content } = Layout;
const { Title, Text } = Typography;
const { TextArea } = Input;

// --- Types ---

interface KeywordItem {
  id: string;
  keyword: string;
  reply_content: string;
  status: 'enabled' | 'disabled';
  created_at: string;
  updated_at: string;
}

// --- Mock Data ---

const DEFAULT_KEYWORDS: KeywordItem[] = [
  {
    id: 'K1001',
    keyword: '价格',
    reply_content: '我们的产品价格根据不同的配置有所不同，基础版99元起。',
    status: 'enabled',
    created_at: '2026-02-10 10:00:00',
    updated_at: '2026-02-10 10:00:00',
  },
  {
    id: 'K1002',
    keyword: '发货时间',
    reply_content: '下单后24小时内发货，预计3-5天送达。',
    status: 'enabled',
    created_at: '2026-02-10 11:30:00',
    updated_at: '2026-02-10 11:30:00',
  },
  {
    id: 'K1003',
    keyword: '售后',
    reply_content: '我们提供7天无理由退换货服务，质量问题一年保修。',
    status: 'disabled',
    created_at: '2026-02-09 15:20:00',
    updated_at: '2026-02-09 16:00:00',
  }
];

const Component = forwardRef<AxureHandle, AxureProps>(function KeywordLibrary(innerProps, ref) {
  // --- State ---
  const [keywords, setKeywords] = useState<KeywordItem[]>(DEFAULT_KEYWORDS);
  
  const [filters, setFilters] = useState({
    keyword: '',
    status: undefined as 'enabled' | 'disabled' | undefined,
  });

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentItem, setCurrentItem] = useState<KeywordItem | null>(null);
  const [form] = Form.useForm();
  
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // --- Helpers ---
  const handleMenuSelect = useCallback(function (key: string) {
    const target = resolveMenuTarget(key);
    if (target) {
      window.location.href = target;
    }
  }, []);

  // --- Actions ---
  const handleDelete = (id: string) => {
    setKeywords(prev => prev.filter(item => item.id !== id));
    message.success('关键词已删除');
  };

  const handleBatchDelete = () => {
    if (selectedRowKeys.length === 0) return;
    Modal.confirm({
      title: '确认批量删除',
      content: `确定要删除选中的 ${selectedRowKeys.length} 个关键词吗？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        setKeywords(prev => prev.filter(item => !selectedRowKeys.includes(item.id)));
        setSelectedRowKeys([]);
        message.success('批量删除成功');
      }
    });
  };

  const handleEdit = (record: KeywordItem) => {
    setCurrentItem(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleAdd = () => {
    setCurrentItem(null);
    form.resetFields();
    form.setFieldsValue({ status: 'enabled' });
    setIsModalVisible(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
      
      const newItem: KeywordItem = {
        id: currentItem ? currentItem.id : `K${Date.now()}`,
        keyword: values.keyword,
        reply_content: values.reply_content,
        status: values.status,
        created_at: currentItem ? currentItem.created_at : now,
        updated_at: now,
      };

      if (currentItem) {
        setKeywords(prev => prev.map(item => item.id === currentItem.id ? newItem : item));
        message.success('更新成功');
      } else {
        setKeywords(prev => [newItem, ...prev]);
        message.success('创建成功');
      }
      setIsModalVisible(false);
    } catch (error) {
      console.error('Validation failed:', error);
    }
  };

  const handleStatusChange = (id: string, checked: boolean) => {
    const newStatus = checked ? 'enabled' : 'disabled';
    setKeywords(prev => prev.map(item => item.id === id ? { ...item, status: newStatus, updated_at: dayjs().format('YYYY-MM-DD HH:mm:ss') } : item));
    message.success(`已${checked ? '启用' : '禁用'}该关键词`);
  };

  const handleImport = () => {
    message.info('演示功能：点击了批量导入');
  };

  // --- Filtering ---
  const filteredData = useMemo(() => {
    return keywords.filter(item => {
      if (filters.keyword && !item.keyword.includes(filters.keyword)) return false;
      if (filters.status && item.status !== filters.status) return false;
      return true;
    });
  }, [keywords, filters]);

  // --- Columns ---
  const columns: ColumnsType<KeywordItem> = [
    { 
      title: '关键词', 
      dataIndex: 'keyword', 
      key: 'keyword',
      width: 150,
    },
    { 
      title: '回复话术', 
      dataIndex: 'reply_content', 
      key: 'reply_content',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status, record) => (
        <Switch 
          checked={status === 'enabled'} 
          onChange={(checked) => handleStatusChange(record.id, checked)}
          checkedChildren="启用"
          unCheckedChildren="禁用"
        />
      )
    },
    { title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 180 },
    {
      title: '操作',
      key: 'action',
      width: 180,
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm
            title="确定要删除这个关键词吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  return (
    <ConfigProvider locale={zhCN}>
      <Layout className="auto-reply-page" hasSider>
        <SideMenu
          title="营销中心"
          width={280}
          defaultSelectedKey="marketing_auto_reply_keywords"
          items={MENU_ITEMS}
          onMenuSelect={handleMenuSelect}
        />
        <Layout>
          <Header className="auto-reply-header">
            <div className="auto-reply-name">
              <Title level={4}>关键词词库</Title>
              <Text type="secondary">管理自动回复的关键词与话术</Text>
            </div>
          </Header>
          <Content className="auto-reply-content">
            <Card bordered={false} className="auto-reply-filter-card">
              <Form layout="inline">
                <Form.Item label="关键词">
                  <Input
                    placeholder="请输入"
                    value={filters.keyword}
                    onChange={e => setFilters({ ...filters, keyword: e.target.value })}
                  />
                </Form.Item>
                <Form.Item label="状态">
                  <Select
                    placeholder="请选择"
                    allowClear
                    style={{ width: 120 }}
                    value={filters.status}
                    onChange={val => setFilters({ ...filters, status: val })}
                    options={[
                      { label: '启用', value: 'enabled' },
                      { label: '禁用', value: 'disabled' },
                    ]}
                  />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                  <Button style={{ marginLeft: 8 }} onClick={() => setFilters({ keyword: '', status: undefined })}>重置</Button>
                </Form.Item>
              </Form>
            </Card>

            <Card bordered={false} style={{ marginTop: 16 }}>
              <div style={{ marginBottom: 16 }}>
                <Space>
                  <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>新增关键词</Button>
                  <Button icon={<UploadOutlined />} onClick={handleImport}>批量导入</Button>
                  <Button 
                    disabled={selectedRowKeys.length === 0} 
                    onClick={handleBatchDelete}
                    danger={selectedRowKeys.length > 0}
                  >
                    批量删除
                  </Button>
                </Space>
              </div>
              <Table
                rowKey="id"
                columns={columns}
                dataSource={filteredData}
                pagination={{ defaultPageSize: 10 }}
                rowSelection={{
                  selectedRowKeys,
                  onChange: setSelectedRowKeys
                }}
              />
            </Card>
          </Content>
        </Layout>
        <Modal
          title={currentItem ? "编辑关键词" : "新增关键词"}
          open={isModalVisible}
          onOk={handleSave}
          onCancel={() => setIsModalVisible(false)}
          okText="确定"
          cancelText="取消"
          width={600}
          destroyOnClose
        >
          <Form form={form} layout="vertical">
            <Form.Item 
              name="keyword" 
              label="关键词" 
              rules={[
                { required: true, message: '请输入关键词' },
                { max: 10, message: '关键词不能超过10个字' }
              ]}
            >
              <Input placeholder="请输入关键词（10字以内）" showCount maxLength={10} />
            </Form.Item>
            
            <Form.Item 
              name="reply_content" 
              label="回复话术" 
              rules={[
                { required: true, message: '请输入回复话术' },
                { max: 200, message: '回复话术不能超过200个字' }
              ]}
            >
              <TextArea placeholder="请输入回复话术（200字以内）" rows={4} showCount maxLength={200} />
            </Form.Item>

            <Form.Item name="status" label="状态" valuePropName="checked" initialValue="enabled">
              <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked />
            </Form.Item>
          </Form>
        </Modal>
      </Layout>
    </ConfigProvider>
  );
});

export default Component;