/**
 * @name 自动回复
 * 
 * 参考资料：
 * - /rules/development-standards.md
 * - /rules/axure-api-guide.md
 * - /assets/docs/设计指导（简约）.md
 * - /src/themes/antd-new/DESIGN-SPEC.md
 * - /src/themes/antd-new/designToken.json (Ant Design 主题)
 * - /assets/libraries/antd.md (Ant Design 组件库)
 */

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,
  DatePicker,
  TimePicker,
  InputNumber,
  Checkbox,
  Divider,
  Popconfirm,
  message,
  Row,
  Col,
  ConfigProvider
} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { PlusOutlined, SearchOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { AxureProps, AxureHandle, EventItem, Action, KeyDesc, ConfigItem, DataDesc } 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 { RangePicker } = DatePicker;

// --- Types ---

type RuleType = 'keyword' | 'fixed' | 'timeout';

interface RuleConfig {
  keyword?: {
    enabled: boolean;
    time_range: [string, string];
    week_days: number[];
    frequency: number;
  };
  fixed?: {
    enabled: boolean;
    time_range: [string, string];
    content: string;
  };
  timeout?: {
    enabled: boolean;
    threshold: number;
    content: string;
  };
}

interface ScopeItem {
  type: 'dept' | 'user';
  id: string;
  name: string;
}

interface Rule {
  id: string;
  name: string;
  types: RuleType[];
  creator: string;
  status: 'enabled' | 'disabled';
  created_at: string;
  updated_at: string;
  scope: string[]; // Simplification for Select component: array of IDs
  config: RuleConfig;
}

// --- Axure Interface Definitions ---

const EVENT_LIST: EventItem[] = [
  { name: 'on_create', desc: '点击新建时触发' },
  { name: 'on_edit', desc: '点击编辑时触发，payload 为规则 ID' },
  { name: 'on_delete', desc: '点击删除时触发，payload 为规则 ID' },
  { name: 'on_save', desc: '保存规则时触发，payload 为规则 JSON' }
];

const ACTION_LIST: Action[] = [
  { name: 'refresh_list', desc: '刷新列表', params: 'null' }
];

const VAR_LIST: KeyDesc[] = [
  { name: 'active_rule_id', desc: '当前编辑的规则 ID' }
];

const CONFIG_LIST: ConfigItem[] = [
  {
    type: 'inputNumber',
    attributeId: 'page_size',
    displayName: '每页条数',
    info: '表格分页大小',
    initialValue: 10,
    min: 5,
    max: 50
  }
];

const DATA_LIST: DataDesc[] = [
  {
    name: 'rules',
    desc: '规则列表',
    keys: [
      { name: 'id', desc: '策略ID' },
      { name: 'name', desc: '策略名称' },
      { name: 'types', desc: '规则类型' },
      { name: 'creator', desc: '创建人' },
      { name: 'status', desc: '状态' },
      { name: 'created_at', desc: '创建时间' },
      { name: 'updated_at', desc: '编辑时间' },
      { name: 'scope', desc: '适用范围' },
      { name: 'config', desc: '详细配置' }
    ]
  }
];

// --- Mock Data ---

const DEFAULT_RULES: Rule[] = [
  {
    id: 'R1001',
    name: '晚间自动托管',
    types: ['fixed', 'timeout'],
    creator: '王晓宁',
    status: 'enabled',
    created_at: '2026-02-01 10:00:00',
    updated_at: '2026-02-08 14:30:00',
    scope: ['dept-1'],
    config: {
      fixed: {
        enabled: true,
        time_range: ['18:00', '09:00'],
        content: '现在是下班时间，如有急事请留言。'
      },
      timeout: {
        enabled: true,
        threshold: 5,
        content: '客服正忙，请稍候。'
      }
    }
  },
  {
    id: 'R1002',
    name: '大促活动关键词',
    types: ['keyword'],
    creator: '李昕',
    status: 'enabled',
    created_at: '2026-02-05 09:15:00',
    updated_at: '2026-02-05 09:15:00',
    scope: ['user-1'],
    config: {
      keyword: {
        enabled: true,
        time_range: ['00:00', '23:59'],
        week_days: [1, 2, 3, 4, 5, 6, 7],
        frequency: 3
      }
    }
  }
];

const SCOPE_OPTIONS = [
  { label: '客服一部 (部门)', value: 'dept-1' },
  { label: '客服二部 (部门)', value: 'dept-2' },
  { label: '张三 (员工)', value: 'user-1' },
  { label: '李四 (员工)', value: 'user-2' }
];

const Component = forwardRef<AxureHandle, AxureProps>(function AutoReply(innerProps, ref) {
  const dataSource = innerProps && innerProps.data ? innerProps.data : {};
  const configSource = innerProps && innerProps.config ? innerProps.config : {};
  const onEventHandler = typeof innerProps.onEvent === 'function' ? innerProps.onEvent : function () { return undefined; };

  const pageSize = typeof configSource.page_size === 'number' && configSource.page_size > 0
    ? configSource.page_size
    : 10;

  // --- State ---
  const [rules, setRules] = useState<Rule[]>(() => {
    return Array.isArray(dataSource.rules) && dataSource.rules.length > 0
      ? dataSource.rules
      : DEFAULT_RULES;
  });

  const [filters, setFilters] = useState({
    id: '',
    type: undefined as RuleType | undefined,
    creator: '',
    dateRange: null as any
  });

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentRule, setCurrentRule] = useState<Rule | null>(null);
  const [form] = Form.useForm();

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // --- Helpers ---
  const emitEvent = useCallback(function (eventName: string, payload?: any) {
    try {
      onEventHandler(eventName, payload);
    } catch (error) {
      console.warn('事件触发失败:', eventName, error);
    }
  }, [onEventHandler]);

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

  // --- Actions ---
  const handleDelete = (id: string) => {
    setRules(prev => prev.filter(r => r.id !== id));
    message.success('规则已删除');
    emitEvent('on_delete', id);
  };

  const handleEdit = (record: Rule) => {
    setCurrentRule(record);
    // Transform record to form values
    const formValues = {
      ...record,
      // Handle nested config mapping if needed, but since we structure form same as data, it might be direct
      // We need to handle time objects for TimePicker if they are strings
      config: {
        keyword: record.config.keyword ? {
          ...record.config.keyword,
          time_range: [
            dayjs(record.config.keyword.time_range[0], 'HH:mm'),
            dayjs(record.config.keyword.time_range[1], 'HH:mm')
          ]
        } : undefined,
        fixed: record.config.fixed ? {
          ...record.config.fixed,
          time_range: [
            dayjs(record.config.fixed.time_range[0], 'HH:mm'),
            dayjs(record.config.fixed.time_range[1], 'HH:mm')
          ]
        } : undefined,
        timeout: record.config.timeout
      }
    };
    form.setFieldsValue(formValues);
    setIsModalVisible(true);
    emitEvent('on_edit', record.id);
  };

  const handleAdd = () => {
    setCurrentRule(null);
    form.resetFields();
    // Set defaults
    form.setFieldsValue({
      status: 'enabled',
      config: {
        keyword: { enabled: false, week_days: [], frequency: 1 },
        fixed: { enabled: false },
        timeout: { enabled: false }
      }
    });
    setIsModalVisible(true);
    emitEvent('on_create', 'create');
  };

  const handleBatchDelete = () => {
    if (selectedRowKeys.length === 0) return;
    Modal.confirm({
      title: '确认批量删除',
      content: `确定要删除选中的 ${selectedRowKeys.length} 条规则吗？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        setRules(prev => prev.filter(r => !selectedRowKeys.includes(r.id)));
        setSelectedRowKeys([]);
        message.success('批量删除成功');
        // In real app, emit batch delete event or call API
      }
    });
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      
      // Transform form values back to data structure
      const newRule: Rule = {
        id: currentRule ? currentRule.id : `R${Date.now()}`,
        name: values.name,
        creator: currentRule ? currentRule.creator : '当前用户',
        created_at: currentRule ? currentRule.created_at : dayjs().format('YYYY-MM-DD HH:mm:ss'),
        updated_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        status: values.status,
        scope: values.scope,
        types: [], // Will calculate based on enabled configs
        config: {
          keyword: values.config.keyword?.enabled ? {
            ...values.config.keyword,
            time_range: [
              values.config.keyword.time_range[0].format('HH:mm'),
              values.config.keyword.time_range[1].format('HH:mm')
            ]
          } : undefined,
          fixed: values.config.fixed?.enabled ? {
            ...values.config.fixed,
            time_range: [
              values.config.fixed.time_range[0].format('HH:mm'),
              values.config.fixed.time_range[1].format('HH:mm')
            ]
          } : undefined,
          timeout: values.config.timeout?.enabled ? values.config.timeout : undefined
        }
      };

      if (newRule.config.keyword) newRule.types.push('keyword');
      if (newRule.config.fixed) newRule.types.push('fixed');
      if (newRule.config.timeout) newRule.types.push('timeout');

      if (currentRule) {
        setRules(prev => prev.map(r => r.id === currentRule.id ? newRule : r));
        message.success('规则更新成功');
      } else {
        setRules(prev => [newRule, ...prev]);
        message.success('规则创建成功');
      }
      
      emitEvent('on_save', JSON.stringify(newRule));
      setIsModalVisible(false);
    } catch (error) {
      console.error('Validation failed:', error);
    }
  };

  // --- Filtering ---
  const filteredRules = useMemo(() => {
    return rules.filter(rule => {
      if (filters.id && !rule.id.includes(filters.id)) return false;
      if (filters.type && !rule.types.includes(filters.type)) return false;
      if (filters.creator && !rule.creator.includes(filters.creator)) return false;
      if (filters.dateRange) {
        const start = filters.dateRange[0];
        const end = filters.dateRange[1];
        const createDate = dayjs(rule.created_at);
        if (createDate.isBefore(start) || createDate.isAfter(end)) return false;
      }
      return true;
    });
  }, [rules, filters]);

  // --- Columns ---
  const columns: ColumnsType<Rule> = [
    { title: '策略名称', dataIndex: 'name', key: 'name' },
    { title: '策略ID', dataIndex: 'id', key: 'id' },
    {
      title: '规则类型',
      dataIndex: 'types',
      key: 'types',
      render: (types: RuleType[]) => (
        <Space size={4}>
          {types.map(t => {
            const map = { keyword: '关键词', fixed: '固定话术', timeout: '超时回复' };
            return <Tag key={t}>{map[t]}</Tag>;
          })}
        </Space>
      )
    },
    { title: '创建人', dataIndex: 'creator', key: 'creator' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Tag color={status === 'enabled' ? 'green' : 'default'}>
          {status === 'enabled' ? '启用' : '禁用'}
        </Tag>
      )
    },
    { title: '创建时间', dataIndex: 'created_at', key: 'created_at' },
    { title: '编辑时间', dataIndex: 'updated_at', key: 'updated_at' },
    {
      title: '操作',
      key: 'action',
      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>
      )
    }
  ];

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        if (name === 'active_rule_id') return currentRule?.id;
        return undefined;
      },
      fireAction: function(name) {
        if (name === 'refresh_list') {
          // In a real app, this would re-fetch data
          console.log('Refreshing list...');
        }
      },
      eventList: EVENT_LIST,
      actionList: ACTION_LIST,
      varList: VAR_LIST,
      configList: CONFIG_LIST,
      dataList: DATA_LIST
    };
  }, [currentRule]);

  return (
    <ConfigProvider locale={zhCN}>
      <Layout className="auto-reply-page" hasSider>
        <SideMenu
          title="营销中心"
          width={280}
          defaultSelectedKey="marketing_auto_reply_rules"
          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="规则ID">
                  <Input
                    placeholder="请输入"
                    value={filters.id}
                    onChange={e => setFilters({ ...filters, id: e.target.value })}
                  />
                </Form.Item>
                <Form.Item label="规则类型">
                  <Select
                    placeholder="请选择"
                    allowClear
                    style={{ width: 120 }}
                    value={filters.type}
                    onChange={val => setFilters({ ...filters, type: val })}
                    options={[
                      { label: '关键词', value: 'keyword' },
                      { label: '固定话术', value: 'fixed' },
                      { label: '超时回复', value: 'timeout' }
                    ]}
                  />
                </Form.Item>
                <Form.Item label="创建人">
                  <Input
                    placeholder="请输入"
                    value={filters.creator}
                    onChange={e => setFilters({ ...filters, creator: e.target.value })}
                  />
                </Form.Item>
                <Form.Item label="创建时间">
                  <RangePicker
                    value={filters.dateRange}
                    onChange={val => setFilters({ ...filters, dateRange: val })}
                  />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                  <Button style={{ marginLeft: 8 }} onClick={() => setFilters({ id: '', type: undefined, creator: '', dateRange: null })}>重置</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 
                    disabled={selectedRowKeys.length === 0} 
                    onClick={handleBatchDelete}
                    danger={selectedRowKeys.length > 0}
                  >
                    批量删除
                  </Button>
                </Space>
              </div>
              <Table
                rowKey="id"
                columns={columns}
                dataSource={filteredRules}
                pagination={{ pageSize }}
                rowSelection={{
                  selectedRowKeys,
                  onChange: setSelectedRowKeys
                }}
              />
            </Card>
          </Content>
        </Layout>
        <Modal
          title={currentRule ? "编辑规则" : "新建规则"}
          open={isModalVisible}
          onOk={handleSave}
          onCancel={() => setIsModalVisible(false)}
          okText="确定"
          cancelText="取消"
          width={700}
          destroyOnClose
        >
          <Form form={form} layout="vertical">
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="name" label="策略名称" rules={[{ required: true, message: '请输入策略名称' }]}>
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="status" label="状态" rules={[{ required: true }]}>
                  <Select>
                    <Select.Option value="enabled">启用</Select.Option>
                    <Select.Option value="disabled">禁用</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            
            <Form.Item name="scope" label="适用范围" rules={[{ required: true, message: '请选择适用范围' }]}>
              <Select mode="multiple" placeholder="请选择部门或人员" options={SCOPE_OPTIONS} />
            </Form.Item>

            <Divider orientation={"left" as any}>规则配置</Divider>

            {/* Keyword Reply Section */}
            <Card size="small" title={
              <Space>
                <Form.Item name={['config', 'keyword', 'enabled']} valuePropName="checked" noStyle>
                  <Checkbox>关键词回复</Checkbox>
                </Form.Item>
                <Tag color="red">优先级高</Tag>
              </Space>
            } style={{ marginBottom: 16 }}>
              <Form.Item shouldUpdate={(prev, curr) => prev.config?.keyword?.enabled !== curr.config?.keyword?.enabled}>
                {({ getFieldValue }) => {
                  const enabled = getFieldValue(['config', 'keyword', 'enabled']);
                  return enabled ? (
                    <>
                      <Row gutter={16}>
                        <Col span={12}>
                          <Form.Item name={['config', 'keyword', 'time_range']} label="启用时间段" rules={[{ required: true }]}>
                            <TimePicker.RangePicker format="HH:mm" />
                          </Form.Item>
                        </Col>
                        <Col span={12}>
                          <Form.Item name={['config', 'keyword', 'frequency']} label="同关键词触发频率" rules={[{ required: true }]}>
                             <InputNumber min={1} addonAfter="次/小时" />
                          </Form.Item>
                        </Col>
                      </Row>
                      <Form.Item name={['config', 'keyword', 'week_days']} label="启用日期" rules={[{ required: true }]}>
                        <Select mode="multiple" placeholder="选择周几" options={[
                          { label: '周一', value: 1 }, { label: '周二', value: 2 },
                          { label: '周三', value: 3 }, { label: '周四', value: 4 },
                          { label: '周五', value: 5 }, { label: '周六', value: 6 },
                          { label: '周日', value: 7 }
                        ]} />
                      </Form.Item>
                    </>
                  ) : <Text type="secondary">未启用</Text>;
                }}
              </Form.Item>
            </Card>

            {/* Fixed Reply Section */}
            <Card size="small" title={
              <Space>
                <Form.Item name={['config', 'fixed', 'enabled']} valuePropName="checked" noStyle>
                  <Checkbox>固定话术回复</Checkbox>
                </Form.Item>
                <Tag color="orange">优先级中</Tag>
              </Space>
            } style={{ marginBottom: 16 }}>
               <Form.Item shouldUpdate={(prev, curr) => prev.config?.fixed?.enabled !== curr.config?.fixed?.enabled}>
                {({ getFieldValue }) => {
                  const enabled = getFieldValue(['config', 'fixed', 'enabled']);
                  return enabled ? (
                    <>
                      <Form.Item name={['config', 'fixed', 'time_range']} label="启用时间段" rules={[{ required: true }]}>
                        <TimePicker.RangePicker format="HH:mm" />
                      </Form.Item>
                      <Form.Item name={['config', 'fixed', 'content']} label="回复话术" rules={[{ required: true }]}>
                        <Input.TextArea rows={2} />
                      </Form.Item>
                    </>
                  ) : <Text type="secondary">未启用</Text>;
                }}
              </Form.Item>
            </Card>

            {/* Timeout Reply Section */}
            <Card size="small" title={
              <Space>
                <Form.Item name={['config', 'timeout', 'enabled']} valuePropName="checked" noStyle>
                  <Checkbox>超时回复</Checkbox>
                </Form.Item>
                <Tag color="blue">优先级低</Tag>
              </Space>
            }>
              <Form.Item shouldUpdate={(prev, curr) => prev.config?.timeout?.enabled !== curr.config?.timeout?.enabled}>
                {({ getFieldValue }) => {
                  const enabled = getFieldValue(['config', 'timeout', 'enabled']);
                  return enabled ? (
                    <>
                      <Form.Item name={['config', 'timeout', 'threshold']} label="超时响应时长" rules={[{ required: true }]}>
                         <InputNumber min={1} addonAfter="分钟" />
                      </Form.Item>
                      <Form.Item name={['config', 'timeout', 'content']} label="回复话术" rules={[{ required: true }]}>
                        <Input.TextArea rows={2} />
                      </Form.Item>
                    </>
                  ) : <Text type="secondary">未启用</Text>;
                }}
              </Form.Item>
            </Card>

          </Form>
        </Modal>
      </Layout>
    </ConfigProvider>
  );
});

export default Component;