/**
 * Scheduled Jobs Management Page
 */
import { useState, useEffect } from 'react';
import { Modal, Form, Input, Switch, Button, Space, Popconfirm, Tag, Tooltip, Badge, Tabs, Select, Row, Col, Card, Alert } from 'antd';
import { PlayCircleOutlined, EditOutlined, DeleteOutlined, QuestionCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { DataTable } from '../../components/admin/DataTable';
import { request } from '../../utils/request';
import { useToast } from '../../contexts/ToastContext';

interface ScheduledJob {
  id: number;
  name: string;
  job_type: 'predefined' | 'custom_code';
  predefined_function?: string;
  function_params?: Record<string, any>;
  cron_expression: string;
  python_code?: string;
  is_active: boolean;
  description: string;
  last_run_at: string | null;
  last_run_status: 'success' | 'failed' | null;
  next_run_at: string | null;
  created_at: string;
  updated_at: string;
}

interface AvailableTask {
  name: string;
  description: string;
  category: string;
  parameters: Array<{
    name: string;
    type: string;
    description: string;
    required: boolean;
    default: any;
  }>;
}

export function ScheduledJobs() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<ScheduledJob[]>([]);
  const [filteredData, setFilteredData] = useState<ScheduledJob[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState<ScheduledJob | null>(null);
  const [activeTabKey, setActiveTabKey] = useState('basic');
  const [availableTasks, setAvailableTasks] = useState<AvailableTask[]>([]);
  const [selectedTask, setSelectedTask] = useState<AvailableTask | null>(null);
  const [form] = Form.useForm();
  const toast = useToast();

  const jobType = Form.useWatch('job_type', form);
  const predefinedFunction = Form.useWatch('predefined_function', form);

  useEffect(() => {
    loadData();
    loadAvailableTasks();
  }, []);

  useEffect(() => {
    // When predefined function changes, update selected task
    if (predefinedFunction && availableTasks.length > 0) {
      const task = availableTasks.find(t => t.name === predefinedFunction);
      setSelectedTask(task || null);

      // Set default parameter values only if not editing
      if (task && !editingRecord) {
        const defaultParams: Record<string, any> = {};
        task.parameters.forEach(param => {
          if (param.default !== null && param.default !== undefined) {
            defaultParams[param.name] = param.default;
          }
        });
        form.setFieldsValue({ function_params: defaultParams });
      } else if (task && editingRecord) {
        // When editing, just set the selected task, don't override params
        setSelectedTask(task);
      }
    } else {
      setSelectedTask(null);
    }
  }, [predefinedFunction, availableTasks]);

  const loadData = async () => {
    setLoading(true);
    try {
      const { data: result } = await request.get('/scheduled-jobs');
      setData(result || []);
      setFilteredData(result || []);
    } catch (error) {
      toast.error('加载数据失败');
    } finally {
      setLoading(false);
    }
  };

  const loadAvailableTasks = async () => {
    try {
      const { data: result } = await request.get('/scheduled-jobs/available-tasks');
      setAvailableTasks(result || []);
    } catch (error) {
      toast.error('加载可用任务列表失败');
    }
  };

  const handleSearch = (keyword: string) => {
    const lowerKeyword = keyword.toLowerCase();
    const filtered = data.filter(
      (item) =>
        item.name.toLowerCase().includes(lowerKeyword) ||
        item.description?.toLowerCase().includes(lowerKeyword)
    );
    setFilteredData(filtered);
  };

  const handleAdd = () => {
    setEditingRecord(null);
    setSelectedTask(null);
    form.resetFields();
    form.setFieldsValue({
      job_type: 'predefined',
      is_active: true,
      function_params: {}
    });
    setActiveTabKey('basic');
    setIsModalOpen(true);
  };

  const handleEdit = (record: ScheduledJob) => {
    setEditingRecord(record);
    form.setFieldsValue({
      ...record,
      function_params: record.function_params || {}
    });
    setActiveTabKey('basic');
    setIsModalOpen(true);
  };

  const handleDelete = async (record: ScheduledJob) => {
    try {
      await request.delete(`/scheduled-jobs/${record.id}`);
      toast.success('删除成功');
      loadData();
    } catch (error) {
      toast.error('删除失败');
    }
  };

  const handleRunNow = async (record: ScheduledJob) => {
    try {
      await request.post(`/scheduled-jobs/${record.id}/run`);
      toast.success('定时任务已触发，请前往"系统任务"中查看进度');
      setTimeout(loadData, 1000);
    } catch (error) {
      toast.error('触发失败');
    }
  };

  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();

      // Clean up data based on job_type
      if (values.job_type === 'predefined') {
        delete values.python_code;
      } else {
        delete values.predefined_function;
        delete values.function_params;
      }

      if (editingRecord) {
        await request.put(`/scheduled-jobs/${editingRecord.id}`, values);
        toast.success('更新成功');
      } else {
        await request.post('/scheduled-jobs', values);
        toast.success('创建成功');
      }

      setIsModalOpen(false);
      loadData();
    } catch (error: any) {
      if (error.response?.data?.detail) {
        const detail = error.response.data.detail;
        if (typeof detail === 'object' && detail.message) {
          toast.error(detail.message);
        } else {
          toast.error(detail);
        }
      }
    }
  };

  const columns: ColumnsType<ScheduledJob> = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 60,
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      width: 200,
      render: (text, record) => (
        <div>
          <div style={{ fontWeight: 500 }}>{text}</div>
          {record.description && (
            <div style={{ fontSize: 12, color: '#888' }}>{record.description}</div>
          )}
        </div>
      ),
    },
    {
      title: '类型',
      dataIndex: 'job_type',
      width: 120,
      render: (type) => (
        <Tag color={type === 'predefined' ? 'blue' : 'purple'}>
          {type === 'predefined' ? '内置任务' : '自定义代码'}
        </Tag>
      ),
    },
    {
      title: '任务函数',
      dataIndex: 'predefined_function',
      width: 200,
      render: (func, record) => {
        if (record.job_type === 'predefined') {
          return <Tag color="cyan">{func}</Tag>;
        }
        return <span style={{ color: '#ccc' }}>-</span>;
      },
    },
    {
      title: 'Cron 表达式',
      dataIndex: 'cron_expression',
      width: 130,
      render: (text) => <Tag color="green">{text}</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      width: 80,
      render: (active) => (
        <Badge status={active ? 'success' : 'default'} text={active ? '启用' : '禁用'} />
      ),
    },
    {
      title: '上次执行',
      width: 200,
      render: (_, record) => (
        <div>
          {record.last_run_at ? (
            <>
              <div>{new Date(record.last_run_at).toLocaleString()}</div>
              <Tag color={record.last_run_status === 'success' ? 'green' : 'red'}>
                {record.last_run_status === 'success' ? '成功' : '失败'}
              </Tag>
            </>
          ) : (
            <span style={{ color: '#ccc' }}>从未执行</span>
          )}
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record) => (
        <Space size="small">
          <Tooltip title="立即执行">
            <Button
              type="text"
              icon={<PlayCircleOutlined />}
              onClick={() => handleRunNow(record)}
              style={{ color: '#52c41a' }}
            />
          </Tooltip>
          <Tooltip title="编辑">
            <Button
              type="text"
              icon={<EditOutlined />}
              onClick={() => handleEdit(record)}
              style={{ color: '#1890ff' }}
            />
          </Tooltip>
          <Popconfirm
            title="确认删除该任务？"
            onConfirm={() => handleDelete(record)}
            okText="删除"
            cancelText="取消"
          >
            <Tooltip title="删除">
              <Button type="text" danger icon={<DeleteOutlined />} />
            </Tooltip>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <>
      <DataTable
        title="定时任务管理"
        columns={columns}
        dataSource={filteredData}
        loading={loading}
        total={filteredData.length}
        onSearch={handleSearch}
        onAdd={handleAdd}
        onEdit={handleEdit}
        onDelete={handleDelete}
        rowKey="id"
        pageSize={10}
      />

      <Modal
        title={editingRecord ? '编辑任务' : '新增任务'}
        open={isModalOpen}
        onOk={handleModalOk}
        onCancel={() => setIsModalOpen(false)}
        width={900}
        destroyOnClose
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Tabs activeKey={activeTabKey} onChange={setActiveTabKey}>
            {/* 基础配置 Tab */}
            <Tabs.TabPane tab="基础配置" key="basic">
              <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="job_type"
                    label="任务类型"
                    rules={[{ required: true, message: '请选择任务类型' }]}
                  >
                    <Select
                      options={[
                        { label: '内置任务', value: 'predefined' },
                        { label: '自定义代码', value: 'custom_code' }
                      ]}
                      onChange={() => {
                        // Clear related fields when type changes
                        form.setFieldsValue({
                          predefined_function: undefined,
                          function_params: {},
                          python_code: undefined
                        });
                        setSelectedTask(null);
                      }}
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    name="cron_expression"
                    label={
                      <Space>
                        <span>Cron 表达式</span>
                        <Tooltip title="格式：分 时 日 月 周 (例如: 0 0 * * * 表示每天零点)">
                          <QuestionCircleOutlined style={{ color: '#888' }} />
                        </Tooltip>
                      </Space>
                    }
                    rules={[{ required: true, message: '请输入 Cron 表达式' }]}
                  >
                    <Input placeholder="0 0 * * *" style={{ fontFamily: 'monospace' }} />
                  </Form.Item>
                </Col>

                <Col span={12}>
                  <Form.Item
                    name="is_active"
                    label="是否启用"
                    valuePropName="checked"
                  >
                    <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item
                name="description"
                label="描述"
              >
                <Input.TextArea rows={3} placeholder="任务描述" />
              </Form.Item>

              {/* 内置任务配置 */}
              {jobType === 'predefined' && (
                <>
                  <Form.Item
                    name="predefined_function"
                    label="选择预定义任务"
                    rules={[{ required: true, message: '请选择预定义任务' }]}
                  >
                    <Select
                      placeholder="请选择任务"
                      options={availableTasks.map(task => ({
                        label: `${task.name} - ${task.description}`,
                        value: task.name
                      }))}
                    />
                  </Form.Item>

                  {selectedTask && (
                    <Card
                      size="small"
                      title={
                        <Space>
                          <InfoCircleOutlined />
                          <span>任务参数配置</span>
                        </Space>
                      }
                      style={{ marginBottom: 16 }}
                    >
                      <Alert
                        message={selectedTask.description}
                        type="info"
                        showIcon
                        style={{ marginBottom: 16 }}
                      />

                      {selectedTask.parameters.map(param => (
                        <Form.Item
                          key={param.name}
                          name={['function_params', param.name]}
                          label={
                            <Space>
                              <span>{param.name}</span>
                              {!param.required && <Tag color="orange">可选</Tag>}
                            </Space>
                          }
                          tooltip={param.description}
                          rules={[
                            { required: param.required, message: `请输入${param.name}` }
                          ]}
                        >
                          {param.type === 'integer' ? (
                            <Input type="number" placeholder={`默认: ${param.default}`} />
                          ) : param.type === 'boolean' ? (
                            <Switch />
                          ) : param.type === 'array' ? (
                            <Select mode="tags" placeholder="输入后回车添加" />
                          ) : (
                            <Input placeholder={`默认: ${param.default || '无'}`} />
                          )}
                        </Form.Item>
                      ))}
                    </Card>
                  )}
                </>
              )}
            </Tabs.TabPane>

            {/* Python 代码 Tab - 仅在自定义代码模式下显示 */}
            {jobType === 'custom_code' && (
              <Tabs.TabPane tab="Python 代码" key="code">
                <Alert
                  message="自定义代码执行环境"
                  description={
                    <div>
                      <p>可用变量：</p>
                      <ul style={{ marginBottom: 0 }}>
                        <li><code>db</code>: AsyncSession - 数据库会话</li>
                        <li><code>logger</code>: Logger - 日志记录器</li>
                        <li><code>task_id</code>: int - 任务ID</li>
                        <li><code>asyncio</code>: 异步IO模块</li>
                      </ul>
                      <p style={{ marginTop: 8, marginBottom: 0 }}>
                        ⚠️ 注意：代码在异步环境中执行，可以使用 <code>await</code>
                      </p>
                    </div>
                  }
                  type="info"
                  showIcon
                  style={{ marginBottom: 16 }}
                />

                <Form.Item
                  name="python_code"
                  rules={[{ required: jobType === 'custom_code', message: '请输入执行脚本' }]}
                >
                  <CodeEditor
                    placeholder={`# 动态任务脚本示例
# 可用变量: db (AsyncSession), logger (Logger), task_id (int)
# 必须是异步环境，可以使用 await

from datetime import datetime

logger.info(f"任务开始执行: {datetime.now()}")

# 你的业务逻辑...

return "执行成功"`}
                  />
                </Form.Item>
              </Tabs.TabPane>
            )}
          </Tabs>
        </Form>
      </Modal>
    </>
  );
}

// Simple Code Editor with Line Numbers
const CodeEditor = ({
  value = '',
  onChange,
  placeholder = ''
}: {
  value?: string;
  onChange?: (e: any) => void;
  placeholder?: string;
}) => {
  const displayValue = value || placeholder;
  const lineCount = displayValue.split('\n').length;
  const lineNumbers = Array.from({ length: lineCount }, (_, i) => i + 1).join('\n');

  return (
    <div style={{
      display: 'flex',
      border: '1px solid #d9d9d9',
      borderRadius: 6,
      overflow: 'hidden',
      backgroundColor: '#fafafa'
    }}>
      <div
        style={{
          padding: '4px 8px',
          backgroundColor: '#f0f0f0',
          borderRight: '1px solid #d9d9d9',
          color: '#999',
          textAlign: 'right',
          fontFamily: 'monospace',
          lineHeight: '1.5',
          fontSize: '14px',
          userSelect: 'none',
          whiteSpace: 'pre',
          overflow: 'hidden'
        }}
      >
        {lineNumbers}
      </div>
      <Input.TextArea
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          border: 'none',
          borderRadius: 0,
          resize: 'none',
          fontFamily: 'monospace',
          lineHeight: '1.5',
          fontSize: '14px',
          padding: '4px 8px',
          flex: 1,
          backgroundColor: '#fafafa',
          color: value ? '#333' : '#999'
        }}
        rows={20}
        spellCheck={false}
        wrap="off"
      />
    </div>
  );
};