/**
 * Help Plugins Page
 *
 * User-friendly help documentation for Plugins.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Puzzle,
  Store,
  Code,
  Zap,
  Clock,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Play,
  Pause,
  Settings,
  Mail,
  BookOpen,
  Calendar,
  ListTodo,
} from 'lucide-react';

const HelpPlugins: 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">
            <Puzzle size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Plugins Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Automate your business with powerful plugins
            </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">
          <Puzzle 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">
            Plugins extend your scheduling platform with automation capabilities. Send reminder emails,
            generate reports, track no-shows, and create custom workflows - all running automatically
            on schedules you define.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            Browse the marketplace for ready-made plugins, or create your own custom automations
            using our simple scripting language.
          </p>
        </div>
      </section>

      {/* Plugin Areas Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Settings size={20} className="text-brand-500" />
          Plugin Areas
        </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">
              <Store size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Marketplace</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Browse and install pre-built plugins from our library</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Puzzle size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">My Plugins</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Manage your installed and custom plugins</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Code size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Create Plugin</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Build custom plugins with our scripting tools</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ListTodo size={20} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Tasks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">View and manage scheduled plugin executions</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What Plugins Can Do */}
      <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" />
          What Plugins Can Do
        </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">
              <Mail size={18} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Send Emails</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Automated reminders, follow-ups, and notifications to customers</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Calendar size={18} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Manage Appointments</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Query, filter, and process appointment data automatically</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Clock size={18} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Run on Schedules</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Execute hourly, daily, weekly, or on custom cron schedules</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Zap size={18} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">External Integrations</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Connect to approved external APIs for advanced workflows</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Getting Started */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Play size={20} className="text-brand-500" />
          Getting Started
        </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">Browse Marketplace</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Go to Plugins &rarr; Marketplace to explore available 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">2</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">Click "Install" on any plugin to add it to your account.</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">Configure & Schedule</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Set up plugin options and choose when it should run.</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">Monitor Tasks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">View execution history and logs in the Tasks page.</p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      {/* Task Management */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ListTodo size={20} className="text-brand-500" />
          Managing Tasks
        </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">
            When you install a plugin, it creates a scheduled task that runs automatically. Use the Tasks page to:
          </p>
          <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
            <li className="flex items-center gap-2">
              <Play size={16} className="text-green-500" />
              <span><strong>Run manually:</strong> Execute a task immediately without waiting for the schedule</span>
            </li>
            <li className="flex items-center gap-2">
              <Pause size={16} className="text-yellow-500" />
              <span><strong>Pause/Resume:</strong> Temporarily stop a task without deleting it</span>
            </li>
            <li className="flex items-center gap-2">
              <CheckCircle size={16} className="text-blue-500" />
              <span><strong>View logs:</strong> See execution history and any errors</span>
            </li>
          </ul>
        </div>
      </section>

      {/* Developer Documentation Link */}
      <section className="mb-10">
        <div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <div className="flex items-start gap-4">
            <BookOpen size={24} className="text-brand-600 dark:text-brand-400 mt-1" />
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                Creating Custom Plugins
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Want to build your own automations? Our comprehensive developer documentation covers
                the scripting language, available API methods, and example code.
              </p>
              <Link
                to="/dashboard/help/plugins/docs"
                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
              >
                View Developer Docs
                <ChevronRight size={16} />
              </Link>
            </div>
          </div>
        </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">
          Our support team is ready to help with any questions about plugins.
        </p>
        <button
          onClick={() => navigate('/dashboard/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 HelpPlugins;
