/**
 * Help Create Plugin Page
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, Code, FileCode, Play, Settings, Eye,
  CheckCircle, ChevronRight, HelpCircle, Puzzle, BookOpen,
} from 'lucide-react';

const HelpCreatePlugin: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <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} /> Back
      </button>

      <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">
            <Code size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Creating Plugins Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Build custom plugins for your business</p>
          </div>
        </div>
      </div>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Code 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">
            Create custom plugins to automate workflows, generate reports, send notifications, and more. Plugins use AI-powered prompts that can access your business data to perform specific actions.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            No coding experience required - simply describe what you want the plugin to do using natural language prompts.
          </p>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <FileCode size={20} className="text-brand-500" /> Plugin Components
        </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">
              <Settings size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Basic Information</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Name, description, category, and version for your plugin</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-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Plugin Code</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">AI prompt instructions that define plugin behavior</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Eye size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Visibility</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Private (only you) or Public (share with community)</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <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" /> Template Variables
        </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">
            Use these special variables in your plugin code to access dynamic data:
          </p>
          <div className="space-y-3">
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
              <code className="text-brand-600 dark:text-brand-400">{"{{PROMPT}}"}</code>
              <span className="text-sm text-gray-500 dark:text-gray-400">- User input when running the plugin</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
              <code className="text-brand-600 dark:text-brand-400">{"{{CONTEXT}}"}</code>
              <span className="text-sm text-gray-500 dark:text-gray-400">- Additional context data from the system</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
              <code className="text-brand-600 dark:text-brand-400">{"{{DATE}}"}</code>
              <span className="text-sm text-gray-500 dark:text-gray-400">- Current date for time-based operations</span>
            </div>
          </div>
        </div>
      </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" /> Plugin Categories
        </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-3">
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Scheduling</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">Appointment automation</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Communication</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">Messages and notifications</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Analytics</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">Reports and insights</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Integration</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">External service connections</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Automation</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">Workflow automation</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <span className="font-medium text-gray-900 dark:text-white">Other</span>
              <p className="text-sm text-gray-500 dark:text-gray-400">Custom functionality</p>
            </div>
          </div>
        </div>
      </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" /> Best Practices
        </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>Be Specific:</strong> Write clear, detailed prompts for better results</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>Test First:</strong> Run plugins in test mode before production use</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>Version Control:</strong> Update version numbers when making changes</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>Document:</strong> Add clear descriptions for easy understanding</span>
            </li>
          </ul>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Guides</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <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">
            <Puzzle 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/docs" 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">
            <BookOpen 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>

      <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.</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 HelpCreatePlugin;
