smoothschedule/frontend/src/pages/help/HelpTasks.tsx

/**
 * Help Tasks Page
 *
 * Comprehensive help documentation for the Tasks (Scheduled Tasks) page.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Clock,
  Play,
  Pause,
  RefreshCw,
  Zap,
  Calendar,
  Settings,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  FileText,
  AlertTriangle,
} from 'lucide-react';

const HelpTasks: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Back Button */}
      <button
        onClick={() => navigate(-1)}
        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
      >
        <ArrowLeft size={20} />
        {t('common.back', 'Back')}
      </button>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <Clock size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Tasks Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Automate your business with scheduled tasks
            </p>
          </div>
        </div>
      </div>

      {/* Overview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Clock size={20} className="text-brand-500" />
          Overview
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Tasks are scheduled automations that run at specified intervals to help you manage your business. When you install a plugin from the marketplace, you can schedule it to run automatically - hourly, daily, weekly, or on custom schedules.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            Tasks can send emails, generate reports, engage with customers, sync data with external services, and more. They run in the background so you can focus on running your business.
          </p>
        </div>
      </section>

      {/* Schedule Types Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Calendar size={20} className="text-brand-500" />
          Schedule Types
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Hourly</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Runs every hour at the specified minute. Great for real-time monitoring and frequent updates.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Calendar size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Daily</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Runs once per day at your chosen time. Perfect for daily reports, reminders, and cleanup tasks.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <RefreshCw size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Weekly</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Runs once per week on your selected day. Ideal for weekly summaries, marketing campaigns, and reports.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Settings size={20} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Custom (Cron)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Advanced scheduling using cron expressions for complex schedules like "every Monday and Wednesday at 9am".
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Task Management Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Zap size={20} className="text-brand-500" />
          Task Management
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Play size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Run Now</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Manually trigger a task to run immediately, regardless of its schedule.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Pause size={20} className="text-yellow-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Pause/Resume</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Temporarily disable a task without deleting it. Resume when ready.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <FileText size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">View Logs</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  See execution history, results, and any errors that occurred during task runs.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Settings size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Edit Configuration</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Modify task settings, change schedule, or update plugin configuration values.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How to Create a Task Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" />
          Creating a Scheduled Task
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <ol className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Install a Plugin</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Go to the Plugin Marketplace and install a plugin you want to automate.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Configure the Plugin</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Set up any required configuration values for the plugin in My Plugins.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Navigate to Tasks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click "Tasks" in the sidebar to access the scheduled tasks page.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Create New Task</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click "Create Task", select your installed plugin, and choose a schedule.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Activate</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Save the task. It will automatically run according to your schedule.
                </p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      {/* Task Status Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <AlertTriangle size={20} className="text-brand-500" />
          Task Statuses
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 min-w-[100px]">
                <CheckCircle size={14} /> Active
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Task is scheduled and will run at the specified time
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 min-w-[100px]">
                <Pause size={14} /> Paused
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Task is temporarily disabled and won't run until resumed
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 min-w-[100px]">
                <RefreshCw size={14} /> Running
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Task is currently executing
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 min-w-[100px]">
                <AlertTriangle size={14} /> Failed
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Last execution failed - check logs for details
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" />
          Benefits
        </h2>
        <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <ul className="space-y-3">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Automation:</strong> Set it and forget it - tasks run automatically on schedule
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Time Savings:</strong> Automate repetitive tasks that would take hours manually
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Consistency:</strong> Tasks run exactly when scheduled, every time
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Visibility:</strong> Full logging shows exactly what happened and when
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Related Features */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          Related Features
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link
            to="/help/plugins-overview"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Zap size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Plugins Overview</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/help/plugins"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <FileText size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Plugin Documentation</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Need More Help */}
      <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
        <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
          Need More Help?
        </h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          If you have questions that aren't covered here, our support team is ready to help.
        </p>
        <button
          onClick={() => navigate('/tickets')}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          Contact Support
        </button>
      </section>
    </div>
  );
};

export default HelpTasks;