import React, { useState, useEffect } from 'react';
import DOMPurify from 'dompurify';
import { Editor } from '@tinymce/tinymce-react';

const HelpSystem = ({ isAdmin = false }) => {
  const [helpContent, setHelpContent] = useState('');
  const [editMode, setEditMode] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Load help content from API or file
  useEffect(() => {
    const loadHelpContent = async () => {
      try {
        const response = await fetch('/api/help');
        if (!response.ok) throw new Error('Failed to load help content');
        const data = await response.text();
        setHelpContent(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    loadHelpContent();
  }, []);

  const handleSave = async (newContent) => {
    try {
      const response = await fetch('/api/help', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content: newContent }),
      });
      
      if (!response.ok) throw new Error('Failed to save help content');
      
      setHelpContent(newContent);
      setEditMode(false);
    } catch (err) {
      setError(err.message);
    }
  };

  if (loading) return <div className="p-4 text-center">Loading help content...</div>;
  if (error) return <div className="p-4 text-red-500">Error: {error}</div>;

  return (
    <div className="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white">Help Center</h2>
        {isAdmin && !editMode && (
          <button
            onClick={() => setEditMode(true)}
            className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
          >
            Edit Content
          </button>
        )}
      </div>

      {editMode ? (
        <div className="space-y-4">
          <Editor
            apiKey="your-tinymce-api-key"
            value={helpContent}
            init={{
              height: 500,
              menubar: true,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
              ],
              toolbar:
                'undo redo | formatselect | bold italic backcolor | \
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | removeformat | help'
            }}
            onEditorChange={(newContent) => setHelpContent(newContent)}
          />
          <div className="flex space-x-3">
            <button
              onClick={() => handleSave(helpContent)}
              className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600"
            >
              Save Changes
            </button>
            <button
              onClick={() => setEditMode(false)}
              className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
            >
              Cancel
            </button>
          </div>
        </div>
      ) : (
        <div
          className="prose dark:prose-invert max-w-none"
          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(helpContent) }}
        />
      )}
    </div>
  );
};

export default HelpSystem;