'use client';

import { useState, useEffect } from 'react';

interface TaskStatus {
  name: string;
  running: boolean;
}

export default function TasksPage() {
  const [tasks, setTasks] = useState<TaskStatus[]>([]);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState('');

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

  const fetchTasks = async () => {
    try {
      const response = await fetch('/api/tasks?action=status');
      const data = await response.json();
      setTasks(data.tasks || []);
    } catch (error) {
      console.error('Failed to fetch tasks:', error);
      setMessage('获取任务状态失败');
    } finally {
      setLoading(false);
    }
  };

  const handleAction = async (action: string, taskName?: string) => {
    try {
      const response = await fetch('/api/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ action, taskName }),
      });

      const data = await response.json();
      setMessage(data.message || '操作完成');
      
      // 刷新任务状态
      await fetchTasks();
    } catch (error) {
      console.error('Failed to perform action:', error);
      setMessage('操作失败');
    }
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="text-center">加载中...</div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold mb-6">定时任务管理</h1>
      
      {message && (
        <div className="mb-4 p-4 bg-blue-100 border border-blue-300 rounded">
          {message}
        </div>
      )}

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold">任务列表</h2>
          <div className="space-x-2">
            <button
              onClick={() => handleAction('start')}
              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
            >
              启动所有任务
            </button>
            <button
              onClick={() => handleAction('stop')}
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
            >
              停止所有任务
            </button>
            <button
              onClick={fetchTasks}
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            >
              刷新状态
            </button>
          </div>
        </div>

        {tasks.length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            没有找到定时任务
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse border border-gray-300">
              <thead>
                <tr className="bg-gray-50 dark:bg-gray-700">
                  <th className="border border-gray-300 px-4 py-2 text-left">任务名称</th>
                  <th className="border border-gray-300 px-4 py-2 text-left">状态</th>
                  <th className="border border-gray-300 px-4 py-2 text-left">描述</th>
                  <th className="border border-gray-300 px-4 py-2 text-left">操作</th>
                </tr>
              </thead>
              <tbody>
                {tasks.map((task) => (
                  <tr key={task.name} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td className="border border-gray-300 px-4 py-2 font-medium">
                      {task.name}
                    </td>
                    <td className="border border-gray-300 px-4 py-2">
                      <span className={`px-2 py-1 rounded text-sm ${
                        task.running 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-red-100 text-red-800'
                      }`}>
                        {task.running ? '运行中' : '已停止'}
                      </span>
                    </td>
                    <td className="border border-gray-300 px-4 py-2">
                      {task.name === 'hourlyTask' && '每小时第30分钟执行'}
                      {task.name === 'dailyCleanup' && '每日凌晨2点清理任务'}
                    </td>
                    <td className="border border-gray-300 px-4 py-2">
                      <button
                        onClick={() => handleAction('stop', task.name)}
                        className="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600"
                        disabled={!task.running}
                      >
                        停止
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 className="text-lg font-semibold mb-4">Cron 表达式说明</h2>
        <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
          <div><code>30 * * * *</code> - 每小时的第30分钟执行</div>
          <div><code>0 2 * * *</code> - 每天凌晨2点执行</div>
          <div><code>0 */2 * * *</code> - 每2小时执行一次</div>
          <div><code>0 9 * * 1-5</code> - 周一到周五上午9点执行</div>
          <div><code>0 0 1 * *</code> - 每月1号凌晨执行</div>
          <div><code>*/15 * * * *</code> - 每15分钟执行一次</div>
        </div>
      </div>
    </div>
  );
}