/**
 * @name 自动回复记录
 * 
 * 查看和管理自动回复的历史记录
 */

import './style.css';

import React, { forwardRef, useCallback, useMemo, useState } from 'react';
import {
  Layout,
  Card,
  Typography,
  Space,
  Button,
  Table,
  Tag,
  Modal,
  Form,
  Input,
  Select,
  DatePicker,
  message,
  ConfigProvider,
  Tooltip
} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { SearchOutlined, DownloadOutlined, MessageOutlined } 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 { RangePicker } = DatePicker;
const { TextArea } = Input;

// --- Types ---

interface ReplyRecord {
  id: string;
  strategy_id: string;
  strategy_name: string;
  trigger_type: 'keyword' | 'fixed' | 'timeout';
  customer_content: string;
  trigger_keyword?: string;
  reply_content: string;
  trigger_time: string;
  managed_account: string;
  operator: string;
  customer_nickname: string;
}

// --- Mock Data ---

const DEFAULT_RECORDS: ReplyRecord[] = [
  {
    id: 'REC001',
    strategy_id: 'R1002',
    strategy_name: '大促活动关键词',
    trigger_type: 'keyword',
    customer_content: '这个价格是多少？',
    trigger_keyword: '价格',
    reply_content: '我们的产品价格根据不同的配置有所不同，基础版99元起。',
    trigger_time: '2026-02-11 09:15:23',
    managed_account: 'wxid_888888',
    operator: '李昕',
    customer_nickname: '快乐小狗'
  },
  {
    id: 'REC002',
    strategy_id: 'R1001',
    strategy_name: '晚间自动托管',
    trigger_type: 'fixed',
    customer_content: '在吗？我想咨询一下。',
    reply_content: '现在是下班时间，如有急事请留言。',
    trigger_time: '2026-02-10 20:05:11',
    managed_account: 'wxid_999999',
    operator: '王晓宁',
    customer_nickname: '熬夜冠军'
  },
  {
    id: 'REC003',
    strategy_id: 'R1001',
    strategy_name: '晚间自动托管',
    trigger_type: 'timeout',
    customer_content: '怎么没人回消息？',
    reply_content: '客服正忙，请稍候。',
    trigger_time: '2026-02-10 20:15:00',
    managed_account: 'wxid_999999',
    operator: '王晓宁',
    customer_nickname: '熬夜冠军'
  }
];

const Component = forwardRef<AxureHandle, AxureProps>(function AutoReplyRecords(innerProps, ref) {
  // --- State ---
  const [records, setRecords] = useState<ReplyRecord[]>(DEFAULT_RECORDS);
  
  const [filters, setFilters] = useState({
    keyword: '',
    strategyName: '',
    dateRange: null as any
  });

  const [isReplyModalVisible, setIsReplyModalVisible] = useState(false);
  const [currentReplyRecord, setCurrentReplyRecord] = useState<ReplyRecord | null>(null);
  const [quickReplyContent, setQuickReplyContent] = useState('');

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

  // --- Actions ---
  const handleExport = () => {
    message.success('导出任务已创建，请稍后在下载中心查看');
  };

  const handleQuickReply = (record: ReplyRecord) => {
    // 模拟校验托管关系
    if (Math.random() > 0.8) {
       message.error(`无法回复：与客户 ${record.customer_nickname} 的托管关系已失效`);
       return;
    }
    
    setCurrentReplyRecord(record);
    setQuickReplyContent('');
    setIsReplyModalVisible(true);
  };

  const submitQuickReply = () => {
    if (!quickReplyContent.trim()) {
      message.warning('请输入回复内容');
      return;
    }
    message.success(`已发送回复给 ${currentReplyRecord?.customer_nickname}`);
    setIsReplyModalVisible(false);
  };

  // --- Filtering ---
  const filteredData = useMemo(() => {
    return records.filter(item => {
      if (filters.keyword && !item.customer_content.includes(filters.keyword) && !item.trigger_keyword?.includes(filters.keyword)) return false;
      if (filters.strategyName && !item.strategy_name.includes(filters.strategyName)) return false;
      if (filters.dateRange) {
        const start = filters.dateRange[0];
        const end = filters.dateRange[1];
        const time = dayjs(item.trigger_time);
        if (time.isBefore(start) || time.isAfter(end)) return false;
      }
      return true;
    });
  }, [records, filters]);

  // --- Columns ---
  const columns: ColumnsType<ReplyRecord> = [
    { title: '触发时间', dataIndex: 'trigger_time', key: 'trigger_time', width: 160 },
    { title: '策略名称', dataIndex: 'strategy_name', key: 'strategy_name', width: 150 },
    { 
      title: '触发类型', 
      dataIndex: 'trigger_type', 
      key: 'trigger_type',
      width: 100,
      render: (type) => {
        const map = { keyword: '关键词', fixed: '固定话术', timeout: '超时回复' };
        const color = { keyword: 'blue', fixed: 'orange', timeout: 'red' };
        return <Tag color={color[type]}>{map[type]}</Tag>;
      }
    },
    { 
      title: '客户发送内容', 
      dataIndex: 'customer_content', 
      key: 'customer_content',
      ellipsis: true,
      width: 200,
    },
    { 
      title: '触发关键词', 
      dataIndex: 'trigger_keyword', 
      key: 'trigger_keyword',
      render: (text) => text || '-'
    },
    { 
      title: '回复话术', 
      dataIndex: 'reply_content', 
      key: 'reply_content',
      ellipsis: true,
      width: 200,
    },
    { title: '客户昵称', dataIndex: 'customer_nickname', key: 'customer_nickname' },
    { title: '托管账号', dataIndex: 'managed_account', key: 'managed_account' },
    { title: '集运人员', dataIndex: 'operator', key: 'operator' },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 100,
      render: (_, record) => (
        <Button type="link" icon={<MessageOutlined />} onClick={() => handleQuickReply(record)}>快捷回复</Button>
      )
    }
  ];

  return (
    <ConfigProvider locale={zhCN}>
      <Layout className="auto-reply-page" hasSider>
        <SideMenu
          title="营销中心"
          width={280}
          defaultSelectedKey="marketing_auto_reply_records"
          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="策略名称">
                  <Input
                    placeholder="请输入"
                    value={filters.strategyName}
                    onChange={e => setFilters({ ...filters, strategyName: e.target.value })}
                  />
                </Form.Item>
                <Form.Item label="触发时间">
                  <RangePicker
                    showTime
                    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({ keyword: '', strategyName: '', dateRange: null })}>重置</Button>
                </Form.Item>
              </Form>
            </Card>

            <Card bordered={false} style={{ marginTop: 16 }}>
              <div style={{ marginBottom: 16 }}>
                <Button icon={<DownloadOutlined />} onClick={handleExport}>导出记录</Button>
              </div>
              <Table
                rowKey="id"
                columns={columns}
                dataSource={filteredData}
                pagination={{ defaultPageSize: 10 }}
                scroll={{ x: 1300 }}
              />
            </Card>
          </Content>
        </Layout>

        <Modal
          title={`快捷回复 - ${currentReplyRecord?.customer_nickname}`}
          open={isReplyModalVisible}
          onOk={submitQuickReply}
          onCancel={() => setIsReplyModalVisible(false)}
          okText="发送"
          cancelText="取消"
        >
          <div style={{ marginBottom: 16 }}>
            <Text type="secondary">客户发送：</Text>
            <div style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px', marginTop: '4px' }}>
              {currentReplyRecord?.customer_content}
            </div>
          </div>
          <div style={{ marginBottom: 16 }}>
            <Text type="secondary">自动回复：</Text>
            <div style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px', marginTop: '4px' }}>
              {currentReplyRecord?.reply_content}
            </div>
          </div>
          <Form.Item label="补充回复">
            <TextArea 
              rows={3} 
              placeholder="请输入补充回复内容" 
              value={quickReplyContent}
              onChange={e => setQuickReplyContent(e.target.value)}
            />
          </Form.Item>
        </Modal>
      </Layout>
    </ConfigProvider>
  );
});

export default Component;