/**
 * @name 自动加好友
 *
 * 参考资料：
 * - /rules/development-standards.md
 * - /rules/axure-api-guide.md
 * - /assets/docs/设计指导（简约）.md
 * - /src/themes/antd-new/DESIGN-SPEC.md
 */

import './style.css';

import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
import {
  Layout,
  Card,
  Typography,
  Space,
  Button,
  Table,
  Row,
  Col,
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
  Popconfirm,
  message,
  Descriptions,
  Badge,
  Radio
} from 'antd';
import {
  PlusOutlined,
  ExportOutlined,
  SearchOutlined,
  ArrowLeftOutlined,
  ImportOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { AxureProps, AxureHandle, EventItem, Action } 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;

interface ManagedStaff {
  userid: string;
  name: string;
  dept: string;
}

interface TaskStats {
  total: number;
  success: number;
  sent: number;
  failed: number;
  pending: number;
}

interface TaskItem {
  id: string;
  name: string;
  staffList: ManagedStaff[];
  stats: TaskStats;
  executionType: 'scheduled' | 'immediate' | 'manual';
  status: 'draft' | 'running' | 'paused' | 'finished' | 'failed';
  creator: string;
  createdAt: string;
  applyText: string;
}

interface DetailItem {
  phone: string;
  status: string;
  staff: string;
  dept: string;
  manager: string;
  time: string;
  remark: string;
}

const EVENT_LIST: EventItem[] = [
  { name: 'on_detail_export', desc: '详情页导出', desc_en: 'Export detail' }
];

const ACTION_LIST: Action[] = [];

const STAFF_OPTIONS: ManagedStaff[] = [
  { userid: 'u10001', name: '客服小美', dept: '售后部' },
  { userid: 'u10002', name: '销售阿强', dept: '销售部' },
  { userid: 'u10003', name: '运营小周', dept: '运营部' }
];

const DEFAULT_TASKS: TaskItem[] = [
  {
    id: '1',
    name: '3月拉新活动-第一批',
    staffList: [STAFF_OPTIONS[0], STAFF_OPTIONS[1]],
    stats: { total: 100, success: 45, sent: 30, failed: 5, pending: 20 },
    executionType: 'immediate',
    status: 'running',
    creator: '管理员',
    createdAt: '2026-03-01 10:00:00',
    applyText: '你好，我是XX公司的客服，希望能加个好友。'
  },
  {
    id: '2',
    name: '老客户维护-回归任务',
    staffList: [STAFF_OPTIONS[2]],
    stats: { total: 50, success: 50, sent: 0, failed: 0, pending: 0 },
    executionType: 'scheduled',
    status: 'finished',
    creator: '管理员',
    createdAt: '2026-02-28 14:00:00',
    applyText: '亲，好久不见，送你一张优惠券。'
  }
];

const DEFAULT_DETAILS: Record<string, DetailItem[]> = {
  '1': [
    { phone: '138****0001', status: '已成功', staff: '客服小美', dept: '售后部', manager: '王五', time: '2026-03-01 10:30:00', remark: '-' },
    { phone: '138****0002', status: '已发送申请', staff: '销售阿强', dept: '销售部', manager: '赵六', time: '2026-03-01 10:45:00', remark: '-' },
    { phone: '138****0003', status: '失败', staff: '客服小美', dept: '售后部', manager: '王五', time: '2026-03-01 11:00:00', remark: '用户拒绝' }
  ]
};

const statusBadgeMap: Record<TaskItem['status'], 'default' | 'processing' | 'warning' | 'success' | 'error'> = {
  draft: 'default',
  running: 'processing',
  paused: 'warning',
  finished: 'success',
  failed: 'error'
};

const statusTextMap: Record<TaskItem['status'], string> = {
  draft: '草稿',
  running: '进行中',
  paused: '已暂停',
  finished: '已完成',
  failed: '异常'
};

const CreateTaskModal = ({
  visible,
  onCancel,
  onCreate
}: {
  visible: boolean;
  onCancel: () => void;
  onCreate: (values: any) => void;
}) => {
  const [form] = Form.useForm();
  const [execType, setExecType] = useState<TaskItem['executionType']>('immediate');

  const handleOk = () => {
    form.validateFields().then((values) => {
      onCreate(values);
      form.resetFields();
    });
  };

  return (
    <Modal
      title="新建加好友任务"
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      width={600}
    >
      <Form form={form} layout="vertical">
        <Form.Item label="任务名称" name="name" rules={[{ required: true }]}>
          <Input placeholder="请输入任务名称" />
        </Form.Item>
        <Form.Item label="托管员工" name="staffUserIds" rules={[{ required: true }]}>
          <Select
            mode="multiple"
            placeholder="请选择托管员工"
            options={STAFF_OPTIONS.map(s => ({ label: s.name, value: s.userid }))}
          />
        </Form.Item>
        <Form.Item label="申请话术" name="applyText" rules={[{ required: true }]}>
          <Input.TextArea rows={3} placeholder="请输入加好友时的申请话术" />
        </Form.Item>
        <Form.Item label="客户手机号" name="phones" rules={[{ required: true }]} extra="每行一个手机号">
          <Input.TextArea rows={5} placeholder="请输入客户手机号" />
        </Form.Item>
        <Form.Item label="执行方式" name="executionType" initialValue="immediate">
          <Radio.Group onChange={(e) => setExecType(e.target.value)}>
            <Radio value="immediate">立即执行</Radio>
            <Radio value="scheduled">定时执行</Radio>
            <Radio value="manual">手动执行</Radio>
          </Radio.Group>
        </Form.Item>
        {execType === 'scheduled' && (
          <Form.Item label="执行时间" name="executionTime" rules={[{ required: true }]}>
            <DatePicker showTime style={{ width: '100%' }} />
          </Form.Item>
        )}
      </Form>
    </Modal>
  );
};

const Component = forwardRef<AxureHandle, AxureProps>(function AutoAddFriend(props, ref) {
  const [view, setView] = useState<'list' | 'detail'>('list');
  const [selectedTask, setSelectedTask] = useState<TaskItem | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [tasks, setTasks] = useState<TaskItem[]>(DEFAULT_TASKS);

  const onEventHandler = typeof props.onEvent === 'function' ? props.onEvent : () => undefined;

  useImperativeHandle(ref, () => ({
    fireAction: (name: string, params?: string) => {
      if (name === 'set_view' && (params === 'list' || params === 'detail')) {
        setView(params);
      }
    },
    eventList: EVENT_LIST,
    actionList: ACTION_LIST
  }));

  const handleCreate = (values: any) => {
    const newTask: TaskItem = {
      id: `${Date.now()}`,
      name: values.name,
      staffList: STAFF_OPTIONS.filter(s => values.staffUserIds.includes(s.userid)),
      stats: { total: values.phones.split('\n').filter(Boolean).length, success: 0, sent: 0, failed: 0, pending: 0 },
      executionType: values.executionType,
      status: 'running',
      creator: '当前用户',
      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      applyText: values.applyText
    };
    setTasks([newTask, ...tasks]);
    setIsModalOpen(false);
    message.success('任务创建成功');
  };

  const columns: ColumnsType<TaskItem> = [
    { title: '任务名称', dataIndex: 'name', key: 'name' },
    {
      title: '托管员工',
      key: 'staff',
      render: (_, record) => record.staffList.map(s => s.name).join('、')
    },
    {
      title: '任务数据',
      key: 'stats',
      render: (_, record) => (
        <Space direction="vertical" size={0}>
          <Text size="small">成功: {record.stats.success}</Text>
          <Text size="small">已发: {record.stats.sent}</Text>
          <Text size="small">失败: {record.stats.failed}</Text>
          <Text size="small">总数: {record.stats.total}</Text>
        </Space>
      )
    },
    {
      title: '执行方式',
      dataIndex: 'executionType',
      key: 'executionType',
      render: (val) => val === 'immediate' ? '立即执行' : val === 'scheduled' ? '定时执行' : '手动执行'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => <Badge status={statusBadgeMap[status]} text={statusTextMap[status]} />
    },
    { title: '创建人', dataIndex: 'creator', key: 'creator' },
    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <a onClick={() => { setSelectedTask(record); setView('detail'); }}>详情</a>
          <Popconfirm title="确认删除？" onConfirm={() => setTasks(tasks.filter(t => t.id !== record.id))}>
            <a style={{ color: 'red' }}>删除</a>
          </Popconfirm>
        </Space>
      )
    }
  ];

  const detailColumns: ColumnsType<DetailItem> = [
    { title: '客户手机号', dataIndex: 'phone', key: 'phone' },
    { title: '添加状态', dataIndex: 'status', key: 'status' },
    { title: '添加员工', dataIndex: 'staff', key: 'staff' },
    { title: '部门', dataIndex: 'dept', key: 'dept' },
    { title: '集运人员', dataIndex: 'manager', key: 'manager' },
    { title: '添加时间', dataIndex: 'time', key: 'time' },
    { title: '备注', dataIndex: 'remark', key: 'remark' }
  ];

  return (
    <Layout className="auto-add-page" style={{ height: '100%' }} hasSider>
      <SideMenu
        title="营销中心"
        width={280}
        defaultSelectedKey="marketing_auto_add"
        items={MENU_ITEMS}
        onMenuSelect={(key) => {
          const target = resolveMenuTarget(key);
          if (target) window.location.href = target;
        }}
      />
      <Layout style={{ overflow: 'hidden' }}>
        <Header className="auto-add-header">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            {view === 'detail' && (
              <Button icon={<ArrowLeftOutlined />} type="text" onClick={() => setView('list')} style={{ marginRight: 16 }} />
            )}
            <Title level={4} style={{ margin: 0 }}>
              {view === 'list' ? '自动加好友' : '任务详情'}
            </Title>
          </div>
        </Header>
        <Content className="auto-add-content" style={{ padding: 24, overflow: 'auto' }}>
          {view === 'list' ? (
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <Card>
                <Form layout="inline">
                  <Form.Item label="任务名称"><Input placeholder="请输入" /></Form.Item>
                  <Form.Item label="托管员工"><Input placeholder="请输入" /></Form.Item>
                  <Form.Item label="创建日期"><RangePicker /></Form.Item>
                  <Form.Item><Button type="primary" icon={<SearchOutlined />}>查询</Button></Form.Item>
                </Form>
              </Card>
              <Card bodyStyle={{ padding: 0 }}>
                <div style={{ padding: '16px 24px', borderBottom: '1px solid #f0f0f0', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Button type="primary" icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)}>新建任务</Button>
                    <Button icon={<ExportOutlined />}>导出</Button>
                    <Button icon={<ImportOutlined />}>批量导入</Button>
                  </Space>
                </div>
                <Table columns={columns} dataSource={tasks} rowKey="id" />
              </Card>
            </Space>
          ) : (
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <Card title="基础信息">
                <Descriptions bordered column={2}>
                  <Descriptions.Item label="任务名称">{selectedTask?.name}</Descriptions.Item>
                  <Descriptions.Item label="任务状态">
                    <Badge status={statusBadgeMap[selectedTask?.status || 'draft']} text={statusTextMap[selectedTask?.status || 'draft']} />
                  </Descriptions.Item>
                  <Descriptions.Item label="申请话术" span={2}>{selectedTask?.applyText}</Descriptions.Item>
                  <Descriptions.Item label="创建人">{selectedTask?.creator}</Descriptions.Item>
                  <Descriptions.Item label="创建时间">{selectedTask?.createdAt}</Descriptions.Item>
                </Descriptions>
              </Card>
              <Card>
                <Form layout="inline" style={{ marginBottom: 16 }}>
                  <Form.Item label="手机号"><Input placeholder="请输入" /></Form.Item>
                  <Form.Item label="添加状态">
                    <Select placeholder="请选择" style={{ width: 120 }}>
                      <Select.Option value="success">已成功</Select.Option>
                      <Select.Option value="pending">添加中</Select.Option>
                      <Select.Option value="failed">失败</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item><Button type="primary" icon={<SearchOutlined />}>查询</Button></Form.Item>
                </Form>
                <div style={{ marginBottom: 16 }}>
                  <Button icon={<ExportOutlined />} onClick={() => onEventHandler('on_detail_export', selectedTask?.id)}>导出明细</Button>
                </div>
                <Table columns={detailColumns} dataSource={DEFAULT_DETAILS[selectedTask?.id || ''] || []} rowKey="phone" />
              </Card>
            </Space>
          )}
        </Content>
      </Layout>
      <CreateTaskModal
        visible={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        onCreate={handleCreate}
      />
    </Layout>
  );
});

export default Component;