import React, { useState, useEffect, useCallback } from 'react';
import {
  Table, Button, Space, Typography, message, Card, Modal, Form, Input, Select, Switch, Tag, Popconfirm, Tabs,
} from 'antd';
import {
  ClockCircleOutlined, PlusOutlined, EditOutlined, DeleteOutlined, PlayCircleOutlined, StopOutlined, CheckCircleOutlined, CloseCircleOutlined,
} from '@ant-design/icons';
import {
  listScheduledTasks,
  createScheduledTask,
  updateScheduledTask,
  deleteScheduledTask,
  runScheduledTask,
  toggleScheduledTask,
} from '../api';
import type { ScheduledTask } from '../types';

const { TextArea } = Input;

const SCHEDULE_TYPE_OPTIONS = [
  { value: 'external_api', label: '外部接口调用' },
  { value: 'internal_method', label: '内部方法执行' },
];

const TASK_TYPE_LABELS: Record<string, string> = {
  external_api: '外部接口',
  internal_method: '内部方法',
};

const STATUS_LABELS: Record<string, { label: string; color: string }> = {
  success: { label: '成功', color: 'green' },
  error: { label: '失败', color: 'red' },
};

const AdminScheduledTasks: React.FC = () => {
  const [data, setData] = useState<ScheduledTask[]>([]);
  const [loading, setLoading] = useState(false);
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<ScheduledTask | null>(null);
  const [form] = Form.useForm();
  const [saving, setSaving] = useState(false);
  const [activeTab, setActiveTab] = useState<'basic' | 'config'>('basic');

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await listScheduledTasks();
      setData(res.items || []);
    } catch (err: any) {
      message.error(err?.message || '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const openModal = (task?: ScheduledTask) => {
    if (task) {
      setEditing(task);
      let configStr = '';
      if (task.config) {
        try {
          configStr = typeof task.config === 'string' ? JSON.stringify(JSON.parse(task.config), null, 2) : JSON.stringify(task.config, null, 2);
        } catch {
          configStr = task.config;
        }
      }
      form.setFieldsValue({
        name: task.name,
        task_type: task.task_type,
        schedule: task.schedule,
        config: configStr,
        is_active: task.is_active,
      });
    } else {
      setEditing(null);
      form.resetFields();
      form.setFieldsValue({ is_active: true, task_type: 'external_api' });
    }
    setActiveTab('basic');
    setModal(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      let configVal = values.config;
      if (configVal && typeof configVal === 'string') {
        try {
          configVal = JSON.stringify(JSON.parse(configVal));
        } catch {
          message.warning('配置 JSON 格式不合法，将按原样保存');
        }
      }
      setSaving(true);
      if (editing) {
        await updateScheduledTask(editing.id, { ...values, config: configVal });
        message.success('更新成功');
      } else {
        await createScheduledTask({ ...values, config: configVal });
        message.success('创建成功');
      }
      setModal(false);
      await fetchData();
    } catch (err: any) {
      message.error(err?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (taskId: string) => {
    try {
      await deleteScheduledTask(taskId);
      message.success('删除成功');
      await fetchData();
    } catch (err: any) {
      message.error(err?.message || '删除失败');
    }
  };

  const handleRun = async (taskId: string) => {
    try {
      await runScheduledTask(taskId);
      message.success('任务已提交执行');
      setTimeout(fetchData, 1500);
    } catch (err: any) {
      message.error(err?.message || '执行失败');
    }
  };

  const handleToggle = async (task: ScheduledTask) => {
    try {
      const res = await toggleScheduledTask(task.id);
      message.success(res.message);
      await fetchData();
    } catch (err: any) {
      message.error(err?.message || '操作失败');
    }
  };

  const taskType = Form.useWatch('task_type', form);

  const columns = [
    { title: '任务名称', dataIndex: 'name', width: 160, ellipsis: true },
    {
      title: '类型',
      dataIndex: 'task_type',
      width: 100,
      render: (v: string) => <Tag color={v === 'external_api' ? 'blue' : 'purple'}>{TASK_TYPE_LABELS[v] || v}</Tag>,
    },
    { title: '调度表达式', dataIndex: 'schedule', width: 140, render: (v: string) => <code style={{ background: '#f1f5f9', padding: '2px 6px', borderRadius: 4 }}>{v}</code> },
    {
      title: '状态',
      dataIndex: 'is_active',
      width: 80,
      render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '禁用'}</Tag>,
    },
    {
      title: '最后执行',
      dataIndex: 'last_run_at',
      width: 160,
      render: (v: string, r: ScheduledTask) => {
        if (!v) return '-';
        const status = r.last_status ? STATUS_LABELS[r.last_status] : null;
        return (
          <span>
            {v.includes('T') ? v.replace('T', ' ').slice(0, 19) : v}
            {status && <Tag color={status.color} style={{ marginLeft: 6 }}>{status.label}</Tag>}
          </span>
        );
      },
    },
    {
      title: '操作',
      width: 220,
      render: (_: any, record: ScheduledTask) => (
        <Space size="small">
          <Button type="link" size="small" icon={<PlayCircleOutlined />} onClick={() => handleRun(record.id)}>执行</Button>
          <Button type="link" size="small" icon={record.is_active ? <StopOutlined /> : <CheckCircleOutlined />} onClick={() => handleToggle(record)}>
            {record.is_active ? '禁用' : '启用'}
          </Button>
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openModal(record)}>编辑</Button>
          <Popconfirm title="确定删除该任务？" onConfirm={() => handleDelete(record.id)} okText="确定" cancelText="取消">
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const scheduleHelp = (
    <div style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>
      <div>• 纯数字：间隔秒数（如 60 = 每 60 秒执行一次）</div>
      <div>• Cron 表达式（5 字段）：分 时 日 月 周</div>
      <div>• 示例：<code>* * * * *</code> = 每分钟 | <code>0 * * * *</code> = 每小时</div>
    </div>
  );

  return (
    <div>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: 'rgba(99,102,241,0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 20, color: '#6366f1',
            }}>
              <ClockCircleOutlined />
            </div>
            <div>
              <Typography.Title level={4} style={{ margin: 0 }}>定时任务管理</Typography.Title>
              <Typography.Text type="secondary">自定义定时执行外部接口调用或内部方法</Typography.Text>
            </div>
          </div>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => openModal()}>
            新增任务
          </Button>
        </div>
      </Card>

      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          pagination={{ pageSize: 20, showTotal: (t) => `共 ${t} 条` }}
        />
      </Card>

      {/* 新增/编辑弹窗 */}
      <Modal
        title={editing ? '编辑定时任务' : '新增定时任务'}
        open={modal}
        onOk={handleSave}
        onCancel={() => setModal(false)}
        confirmLoading={saving}
        okText="保存"
        cancelText="取消"
        destroyOnClose
        width={600}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Tabs
            activeKey={activeTab}
            onChange={(k) => setActiveTab(k as 'basic' | 'config')}
            items={[
              {
                key: 'basic',
                label: '基本设置',
                children: (
                  <>
                    <Form.Item name="name" label="任务名称" rules={[{ required: true, message: '请输入任务名称' }]}>
                      <Input placeholder="例如：每小时同步银行交易" />
                    </Form.Item>
                    <Form.Item name="task_type" label="任务类型" rules={[{ required: true, message: '请选择任务类型' }]}>
                      <Select options={SCHEDULE_TYPE_OPTIONS} />
                    </Form.Item>
                    <Form.Item
                      name="schedule"
                      label="调度表达式"
                      rules={[{ required: true, message: '请输入调度表达式' }]}
                      extra={scheduleHelp}
                    >
                      <Input placeholder="纯数字（秒）或 Cron 表达式：* * * * *" />
                    </Form.Item>
                    <Form.Item name="is_active" label="启用" valuePropName="checked">
                      <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                    </Form.Item>
                  </>
                ),
              },
              {
                key: 'config',
                label: '任务配置',
                children: (
                  <Form.Item
                    name="config"
                    label="配置 JSON"
                    extra={
                      taskType === 'external_api'
                        ? '字段：url（地址）、method（GET/POST/PUT/DELETE）、headers（对象）、payload（对象/参数）、timeout（秒，默认 30）'
                        : '字段：module（模块路径，如 app.services.xxx）、function（函数名）、args（参数数组）'
                    }
                  >
                    <TextArea
                      rows={8}
                      placeholder={taskType === 'external_api'
                        ? '{\n  "url": "https://api.example.com/data",\n  "method": "POST",\n  "headers": {},\n  "payload": {}\n}'
                        : '{\n  "module": "app.services.report",\n  "function": "generate_daily_report",\n  "args": []\n}'
                      }
                      style={{ fontFamily: 'monospace', fontSize: 13 }}
                    />
                  </Form.Item>
                ),
              },
            ]}
          />
        </Form>
      </Modal>
    </div>
  );
};

export default AdminScheduledTasks;