/**
 * Help Settings Resource Types Page
 *
 * Comprehensive documentation for the Resource Types Settings page.
 * Documents: Creating, editing, and deleting custom resource types with STAFF/OTHER categories.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, Layers, Users, Plus, Pencil, Trash2,
  CheckCircle, ChevronRight, HelpCircle, AlertCircle,
} from 'lucide-react';

const HelpSettingsResourceTypes: 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>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
            <Layers size={24} className="text-indigo-600 dark:text-indigo-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Resource Types Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Define custom categories for your resources</p>
          </div>
        </div>
      </div>

      {/* Overview */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Layers 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">
            Resource Types let you define custom categories for your bookable resources. Instead of just
            "Staff", "Room", and "Equipment", you can create specific types like "Stylist", "Treatment Room",
            "Camera", or any category that fits your business needs.
          </p>
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
              <p className="text-sm text-blue-700 dark:text-blue-300">
                <strong>Owner Access Required:</strong> Only business owners can create and manage resource types.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Resource Type Categories */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Layers size={20} className="text-brand-500" /> Categories
        </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">
            Each resource type belongs to one of two categories, which determines how it behaves in the system:
          </p>

          <div className="space-y-4">
            {/* Staff Category */}
            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                  <Users size={20} className="text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Staff Category</h4>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    Requires staff assignment - these resources must be linked to a team member from your Staff page.
                    Use this for types like Stylist, Therapist, Consultant, or any role performed by a person.
                  </p>
                </div>
              </div>
            </div>

            {/* Other Category */}
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                  <Layers size={20} className="text-gray-600 dark:text-gray-400" />
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Other Category</h4>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    General resources - physical items or spaces that don't require a staff link.
                    Use this for rooms, equipment, vehicles, or any non-person resource.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Your Resource Types List */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Layers size={20} className="text-brand-500" /> Your Resource Types
        </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">
            The main section displays all your defined resource types. Each type shows:
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">For Each Type</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• <strong>Icon:</strong> Blue person icon for Staff types, gray layers icon for Other types</li>
                <li>• <strong>Name:</strong> The type's name (e.g., "Stylist", "Treatment Room")</li>
                <li>• <strong>Category Label:</strong> "Requires staff assignment" or "General resource"</li>
                <li>• <strong>Description:</strong> Optional description you provide</li>
                <li>• <strong>Default Badge:</strong> Shows if this is a system default type (can't be deleted)</li>
              </ul>
            </div>

            {/* Actions */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Pencil size={16} className="text-brand-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Edit</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Click the pencil icon to modify name, description, or category
                </p>
              </div>
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Trash2 size={16} className="text-red-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Delete</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Remove custom types (not available for default types)
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Creating a Resource Type */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Plus size={20} className="text-green-500" /> Creating a Resource Type
        </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">
            Click the "Add Type" button to create a new resource type. You'll fill out:
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-3">Form Fields</h4>
              <div className="space-y-3">
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300 text-sm">Name *</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    The name for this type (e.g., "Stylist", "Treatment Room", "Camera")
                  </p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300 text-sm">Description</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    Optional text to describe what this type represents
                  </p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300 text-sm">Category *</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    Choose "Staff" if resources need staff assignment, or "Other" for general resources
                  </p>
                </div>
              </div>
            </div>

            {/* Steps */}
            <div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Steps to Create</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                <li>Click <strong>Add Type</strong> button</li>
                <li>Enter the name (required)</li>
                <li>Add a description (optional)</li>
                <li>Select the category (Staff or Other)</li>
                <li>Click <strong>Create</strong> to save</li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <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" /> Example Use Cases
        </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">
            Here are some examples of custom resource types for different businesses:
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-2">Hair Salon</h4>
              <ul className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <li>• Stylist (Staff)</li>
                <li>• Colorist (Staff)</li>
                <li>• Wash Station (Other)</li>
                <li>• Styling Chair (Other)</li>
              </ul>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-2">Medical Clinic</h4>
              <ul className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <li>• Doctor (Staff)</li>
                <li>• Nurse (Staff)</li>
                <li>• Exam Room (Other)</li>
                <li>• X-Ray Machine (Other)</li>
              </ul>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-2">Photo Studio</h4>
              <ul className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <li>• Photographer (Staff)</li>
                <li>• Assistant (Staff)</li>
                <li>• Studio A (Other)</li>
                <li>• Lighting Kit (Other)</li>
              </ul>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-2">Fitness Center</h4>
              <ul className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <li>• Personal Trainer (Staff)</li>
                <li>• Yoga Instructor (Staff)</li>
                <li>• Training Room (Other)</li>
                <li>• Spin Bike (Other)</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Tips */}
      <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" /> Tips
        </h2>
        <div className="bg-gradient-to-r from-brand-50 to-indigo-50 dark:from-brand-900/20 dark:to-indigo-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">
                Create specific types rather than generic ones - "Stylist" is better than just "Staff"
              </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">
                Use the Staff category when the resource represents a person who needs a system account
              </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">
                Default types cannot be deleted, but you can create alternatives and use those instead
              </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">
                Add descriptions to help other team members understand what each type is for
              </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="/dashboard/help/resources" 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">
            <Layers size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Resources Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/staff" 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">
            <Users size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Staff Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/scheduler" 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">
            <Layers size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/settings/general" 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">
            <CheckCircle size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">General Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Help Footer */}
      <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 resource type questions.
        </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 HelpSettingsResourceTypes;
