/**
 * Help Scheduler Page
 *
 * Comprehensive help documentation for the Scheduler.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  CalendarDays,
  Clock,
  Users,
  Filter,
  Plus,
  Edit,
  Trash2,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Eye,
  Calendar,
  Grid,
  Move,
  GripVertical,
  Undo,
  Redo,
  ZoomIn,
  ZoomOut,
  Archive,
  AlertCircle,
  Inbox,
  MousePointer,
  Keyboard,
  Layers,
} from 'lucide-react';

const HelpScheduler: 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">
            <CalendarDays size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Scheduler Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Master your appointment calendar with drag-and-drop scheduling
            </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">
          <CalendarDays 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">
            The Scheduler is a powerful, interactive calendar designed for fast appointment management.
            It features full drag-and-drop support, real-time updates via WebSocket, and a horizontal timeline
            layout that shows all your resources (staff, rooms, equipment) at once.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            You can reschedule appointments by dragging them, resize them by pulling their edges,
            filter by status/resource/service, and even undo mistakes with keyboard shortcuts.
            Pending appointment requests appear in a sidebar, ready to be dragged onto the schedule.
          </p>
        </div>
      </section>

      {/* Calendar Views Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Grid size={20} className="text-brand-500" />
          Calendar Views
        </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">
              <Calendar size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Day View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  See a single day in detail with a horizontal timeline. Each resource gets its own row.
                  The timeline scrolls horizontally and auto-centers on the current time when you open it.
                  Perfect for managing a busy day with many appointments across multiple staff or rooms.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Grid size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Week View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  View all 7 days side-by-side with each day separated on the timeline.
                  Drag appointments between days or across resources. Great for weekly planning
                  and seeing patterns in your schedule.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CalendarDays size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Month View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                  Traditional calendar grid showing the entire month. Each day cell shows a summary of
                  appointments for that day, color-coded by status.
                </p>
                <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1 ml-4">
                  <li><strong>Click a day</strong> to jump directly to that day's detailed Day View</li>
                  <li><strong>Drag an appointment</strong> over a day and hover for 1 second - a mini Day View scheduler overlay opens where you can drop it at the exact time and resource you want</li>
                  <li>The overlay shows hour slots and resource columns, just like Day View, for precise placement</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Drag and Drop Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Move size={20} className="text-brand-500" />
          Drag and Drop
        </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">
            Drag-and-drop is the fastest way to manage your schedule. Simply click and drag any
            appointment to reschedule it.
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
              <GripVertical size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Reschedule Appointments</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drag an appointment left or right to change its time, or up/down to move it to a
                  different resource. The appointment snaps to 15-minute increments. A ghost preview
                  shows where it will land.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
              <Inbox size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Schedule Pending Requests</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Pending appointments (from online booking or manual entry) appear in the sidebar on
                  the left. Drag them onto the timeline to schedule them - they'll automatically be
                  confirmed. The pending sidebar shows customer name, service, and requested duration.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <Undo size={20} className="text-yellow-600 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Return to Pending</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drag a scheduled appointment back to the pending sidebar to unschedule it.
                  The appointment returns to pending status and can be rescheduled later.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
              <Archive size={20} className="text-red-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Archive (Delete)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drag an appointment to the archive zone at the bottom of the pending sidebar to
                  delete it permanently. This is useful for removing cancelled or test appointments.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Resizing Appointments Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <MousePointer size={20} className="text-brand-500" />
          Resizing Appointments
        </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">
            Change an appointment's duration by dragging its edges. This is helpful when a service
            takes more or less time than expected.
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ChevronRight size={20} className="text-brand-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Extend Duration</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Hover over the right edge of an appointment until you see the resize cursor,
                  then drag right to make it longer. Duration snaps to 15-minute increments.
                  Minimum duration is 15 minutes.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ChevronRight size={20} className="text-brand-500 mt-0.5 rotate-180" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Change Start Time</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drag the left edge to change when the appointment starts. Dragging left makes
                  it start earlier (and longer), dragging right makes it start later (and shorter).
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Status Colors Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Eye size={20} className="text-brand-500" />
          Status Colors
        </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">
            Appointments are color-coded so you can see their status at a glance:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div className="flex items-center gap-3 p-3 bg-blue-100 dark:bg-blue-900/50 border-l-4 border-blue-500 rounded">
              <span className="font-medium text-blue-900 dark:text-blue-200">Blue - Upcoming</span>
              <span className="text-sm text-blue-700 dark:text-blue-300">Confirmed, hasn't started yet</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-yellow-100 dark:bg-yellow-900/50 border-l-4 border-yellow-500 rounded">
              <span className="font-medium text-yellow-900 dark:text-yellow-200">Yellow - In Progress</span>
              <span className="text-sm text-yellow-700 dark:text-yellow-300">Currently happening</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-red-100 dark:bg-red-900/50 border-l-4 border-red-500 rounded">
              <span className="font-medium text-red-900 dark:text-red-200">Red - Overdue</span>
              <span className="text-sm text-red-700 dark:text-red-300">Past end time, not completed</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-green-100 dark:bg-green-900/50 border-l-4 border-green-500 rounded">
              <span className="font-medium text-green-900 dark:text-green-200">Green - Completed</span>
              <span className="text-sm text-green-700 dark:text-green-300">Successfully finished</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-orange-100 dark:bg-orange-900/50 border-l-4 border-orange-500 rounded">
              <span className="font-medium text-orange-900 dark:text-orange-200">Orange - No-show</span>
              <span className="text-sm text-orange-700 dark:text-orange-300">Customer didn't arrive</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-100 dark:bg-gray-700 border-l-4 border-gray-400 rounded opacity-75">
              <span className="font-medium text-gray-500 dark:text-gray-400">Gray (faded) - Cancelled</span>
              <span className="text-sm text-gray-500 dark:text-gray-500">Appointment was cancelled</span>
            </div>
          </div>
        </div>
      </section>

      {/* Filtering Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Filter size={20} className="text-brand-500" />
          Filtering Appointments
        </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 the filter button in the toolbar to narrow down what you see:
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <AlertCircle size={20} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Filter by Status</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Show or hide appointments by status (Pending, Confirmed, Completed, Cancelled, No-show).
                  Useful for focusing on confirmed appointments only or finding no-shows.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Users size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Filter by Resource</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Show only specific staff members, rooms, or equipment. Great for viewing one
                  person's schedule or a specific treatment room.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Filter by Service</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Show only appointments for specific services. Helpful for tracking how often
                  certain services are booked or finding all massage appointments.
                </p>
              </div>
            </div>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            A badge appears on the filter button when filters are active. Click "Clear All" to reset.
          </p>
        </div>
      </section>

      {/* Keyboard Shortcuts Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Keyboard size={20} className="text-brand-500" />
          Keyboard Shortcuts
        </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-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex gap-1">
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
                <span>+</span>
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Z</kbd>
              </div>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Undo</span>
                <p className="text-xs text-gray-500 dark:text-gray-400">Undo the last move or resize</p>
              </div>
            </div>
            <div className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex gap-1">
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
                <span>+</span>
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Y</kbd>
              </div>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Redo</span>
                <p className="text-xs text-gray-500 dark:text-gray-400">Redo the last undone action</p>
              </div>
            </div>
            <div className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex gap-1">
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
                <span>+</span>
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Shift</kbd>
                <span>+</span>
                <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Z</kbd>
              </div>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Redo (Alt)</span>
                <p className="text-xs text-gray-500 dark:text-gray-400">Alternative redo shortcut</p>
              </div>
            </div>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            The scheduler keeps a history of up to 50 actions, so you can undo multiple changes.
          </p>
        </div>
      </section>

      {/* Zoom Controls Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ZoomIn size={20} className="text-brand-500" />
          Zoom Controls
        </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">
            Adjust the zoom level to see more or less detail in the timeline (Day and Week views only):
          </p>
          <div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <div className="flex items-center gap-2">
              <ZoomOut size={20} className="text-gray-500" />
              <span className="text-sm text-gray-600 dark:text-gray-400">Zoom out to see more hours at once</span>
            </div>
            <div className="flex items-center gap-2">
              <ZoomIn size={20} className="text-gray-500" />
              <span className="text-sm text-gray-600 dark:text-gray-400">Zoom in for precise time placement</span>
            </div>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            Use the zoom slider in the toolbar to adjust. The timeline width scales proportionally.
          </p>
        </div>
      </section>

      {/* Overlapping Appointments Section */}
      <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" />
          Overlapping Appointments
        </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 appointments overlap in time for the same resource, the scheduler automatically
            stacks them in multiple "lanes" so you can see all of them:
          </p>
          <ul className="space-y-2">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">
                Each resource row expands vertically to accommodate overlapping appointments
              </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-600 dark:text-gray-300">
                Overlapping appointments are shown stacked, with each in its own horizontal lane
              </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-600 dark:text-gray-300">
                This helps identify double-bookings or intentional concurrent appointments
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Pending Sidebar Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Inbox size={20} className="text-brand-500" />
          Pending Appointments Sidebar
        </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 sidebar on the left shows all pending (unscheduled) appointment requests:
          </p>
          <ul className="space-y-2">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">
                <strong>Online Bookings:</strong> When customers book online, their requests appear here until you assign them to a resource
              </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-600 dark:text-gray-300">
                <strong>Drag to Schedule:</strong> Drag any pending appointment onto the timeline to schedule it with a specific resource
              </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-600 dark:text-gray-300">
                <strong>Auto-Confirm:</strong> Pending appointments automatically change to "Confirmed" when scheduled
              </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-600 dark:text-gray-300">
                <strong>Archive Zone:</strong> Drag to the archive section at the bottom to delete unwanted requests
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Real-time Updates Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <AlertCircle size={20} className="text-brand-500" />
          Real-time Updates
        </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 scheduler uses WebSocket connections to update in real-time:
          </p>
          <ul className="space-y-2">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">
                When a customer books online, the appointment appears instantly
              </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-600 dark:text-gray-300">
                When another staff member makes changes, you see them without refreshing
              </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-600 dark:text-gray-300">
                No need to manually refresh the page - the schedule stays current
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Editing Appointments Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Edit size={20} className="text-brand-500" />
          Editing Appointment Details
        </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 on any appointment to open its detail modal where you can:
          </p>
          <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">
              <Clock size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Change Date & Time</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Use the date/time picker for precise scheduling
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Users size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Reassign Resource</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Move the appointment to a different staff member or room
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Adjust Duration</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Change how long the appointment lasts
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={20} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Change Status</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Use the status dropdown to change between Pending, Confirmed, Completed, No-show, or Cancelled
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tips Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <HelpCircle size={20} className="text-brand-500" />
          Pro Tips
        </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>Use filters to focus:</strong> When the schedule is busy, filter to show only what you need
              </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>Ctrl+Z is your friend:</strong> Made a mistake? Undo it instantly without finding and fixing 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>Month view drag overlay:</strong> While dragging in month view, hover over any day for 1 second to open a mini Day View scheduler - drop the appointment at the exact time and resource
              </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>Check red appointments:</strong> Red means overdue - these need to be completed or rescheduled
              </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"
          >
            <Users 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/services"
            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"
          >
            <Clock size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Services Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/customers"
            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">Customers Guide</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('/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 HelpScheduler;
