/**
 * Staff Help Guide
 *
 * Comprehensive documentation for staff members.
 * Covers all features that staff have access to with detailed explanations.
 */

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  ArrowLeft,
  BookOpen,
  LayoutDashboard,
  Calendar,
  CalendarOff,
  HelpCircle,
  CheckCircle,
  Clock,
  GripVertical,
  Ticket,
  AlertCircle,
  Info,
  Lightbulb,
  MapPin,
  Phone,
  User as UserIcon,
  FileText,
  Bell,
  RefreshCw,
} from 'lucide-react';
import { User } from '../../types';

interface StaffHelpProps {
  user: User;
}

const StaffHelp: React.FC<StaffHelpProps> = ({ user }) => {
  const navigate = useNavigate();
  const { t } = useTranslation();

  const canAccessTickets = user.can_access_tickets ?? false;
  const canEditSchedule = user.can_edit_schedule ?? false;

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <div className="sticky top-0 z-20 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => navigate(-1)}
              className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400"
            >
              <ArrowLeft size={20} />
              {t('common.back', 'Back')}
            </button>
            <div className="flex items-center gap-2">
              <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                {t('staffHelp.title', 'Staff Guide')}
              </h1>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Introduction */}
        <section className="mb-12">
          <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">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              {t('staffHelp.welcome', 'Welcome to SmoothSchedule')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              {t(
                'staffHelp.intro',
                'This guide covers everything you need to know as a staff member. You can view your schedule, manage your availability, and stay updated on your assignments.'
              )}
            </p>
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              {t(
                'staffHelp.introDetails',
                'As a staff member, you have access to a focused set of tools designed to help you manage your work day efficiently. Your manager handles the broader scheduling and customer management, while you can concentrate on your assigned jobs and personal availability.'
              )}
            </p>
          </div>

          {/* Quick Overview Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
              <div className="flex items-center gap-3 mb-2">
                <LayoutDashboard size={20} className="text-blue-500" />
                <h3 className="font-medium text-gray-900 dark:text-white">
                  {t('staffHelp.quickOverview.dashboard', 'Dashboard')}
                </h3>
              </div>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {t('staffHelp.quickOverview.dashboardDesc', 'Your daily summary at a glance')}
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
              <div className="flex items-center gap-3 mb-2">
                <Calendar size={20} className="text-green-500" />
                <h3 className="font-medium text-gray-900 dark:text-white">
                  {t('staffHelp.quickOverview.schedule', 'My Schedule')}
                </h3>
              </div>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {t('staffHelp.quickOverview.scheduleDesc', 'View and manage your daily jobs')}
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
              <div className="flex items-center gap-3 mb-2">
                <CalendarOff size={20} className="text-rose-500" />
                <h3 className="font-medium text-gray-900 dark:text-white">
                  {t('staffHelp.quickOverview.availability', 'Availability')}
                </h3>
              </div>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {t('staffHelp.quickOverview.availabilityDesc', 'Block time when you\'re unavailable')}
              </p>
            </div>
          </div>
        </section>

        {/* Dashboard Section */}
        <section className="mb-10">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
              <LayoutDashboard size={20} className="text-blue-600 dark:text-blue-400" />
            </div>
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
              {t('staffHelp.dashboard.title', 'Dashboard')}
            </h2>
          </div>
          <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">
              {t(
                'staffHelp.dashboard.description',
                "Your dashboard provides a quick overview of your day. Here you can see today's summary and any important updates."
              )}
            </p>
            <p className="text-gray-600 dark:text-gray-300 mb-6">
              {t(
                'staffHelp.dashboard.descriptionDetail',
                "The dashboard is designed to give you the most important information at a glance when you first log in. This helps you plan your day and stay organized without having to dig through multiple pages."
              )}
            </p>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.dashboard.whatYouSee', 'What You\'ll See')}
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <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-center gap-2 mb-2">
                  <Calendar size={18} className="text-blue-600" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                    {t('staffHelp.dashboard.todaysJobs', "Today's Jobs")}
                  </h4>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.dashboard.todaysJobsDesc',
                    "A count of how many appointments you have scheduled for today. This helps you quickly understand how busy your day will be."
                  )}
                </p>
              </div>
              <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                <div className="flex items-center gap-2 mb-2">
                  <Clock size={18} className="text-green-600" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                    {t('staffHelp.dashboard.nextAppointment', 'Next Appointment')}
                  </h4>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.dashboard.nextAppointmentDesc',
                    "Shows your upcoming appointment with the customer name and time. Great for knowing at a glance what's coming up next."
                  )}
                </p>
              </div>
              <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                <div className="flex items-center gap-2 mb-2">
                  <RefreshCw size={18} className="text-purple-600" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                    {t('staffHelp.dashboard.weeklyStats', 'Weekly Overview')}
                  </h4>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.dashboard.weeklyStatsDesc',
                    "A summary of your appointments this week, including completed jobs and upcoming ones. Helps you track your workload."
                  )}
                </p>
              </div>
              <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
                <div className="flex items-center gap-2 mb-2">
                  <Bell size={18} className="text-orange-600" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                    {t('staffHelp.dashboard.recentUpdates', 'Recent Updates')}
                  </h4>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.dashboard.recentUpdatesDesc',
                    "Any recent changes to your schedule, such as new bookings, cancellations, or rescheduled appointments."
                  )}
                </p>
              </div>
            </div>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.dashboard.features', 'Key Features')}
            </h3>
            <ul className="space-y-3 text-sm text-gray-600 dark:text-gray-300 mb-6">
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.dashboard.feature1Title', 'Daily Summary:')}</span>{' '}
                  <span>{t('staffHelp.dashboard.feature1Desc', 'See your total jobs for the day at a glance, so you know what to expect.')}</span>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.dashboard.feature2Title', 'Quick Navigation:')}</span>{' '}
                  <span>{t('staffHelp.dashboard.feature2Desc', 'One-click access to your schedule and availability pages.')}</span>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.dashboard.feature3Title', 'Real-Time Updates:')}</span>{' '}
                  <span>{t('staffHelp.dashboard.feature3Desc', 'The dashboard refreshes automatically to show the latest information about your schedule.')}</span>
                </div>
              </li>
            </ul>

            <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">
                <Lightbulb size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.dashboard.tip', 'Pro Tip')}
                  </h4>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.dashboard.tipDesc',
                      "Start each work day by checking your dashboard. It takes just a few seconds and ensures you're prepared for what's ahead. If you notice something unexpected, contact your manager early."
                    )}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* My Schedule Section */}
        <section className="mb-10">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
              <Calendar size={20} className="text-green-600 dark:text-green-400" />
            </div>
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
              {t('staffHelp.schedule.title', 'My Schedule')}
            </h2>
          </div>
          <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">
              {t(
                'staffHelp.schedule.description',
                'The My Schedule page shows a vertical timeline of all your jobs for the day. You can navigate between days to see past and future appointments.'
              )}
            </p>
            <p className="text-gray-600 dark:text-gray-300 mb-6">
              {t(
                'staffHelp.schedule.descriptionDetail',
                'This is your primary view for understanding your work day. Each job is displayed as a card on the timeline, showing you exactly when and where you need to be. The timeline runs from morning to evening, making it easy to visualize your entire day.'
              )}
            </p>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.schedule.understandingTimeline', 'Understanding the Timeline')}
            </h3>
            <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6">
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
                    <Clock size={16} className="text-green-600" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                      {t('staffHelp.schedule.timelineHours', 'Time Scale')}
                    </h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      {t(
                        'staffHelp.schedule.timelineHoursDesc',
                        'The left side shows hours of the day. Jobs appear at their scheduled time, with their height representing how long they last. A 1-hour job takes up more space than a 30-minute job.'
                      )}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                    <FileText size={16} className="text-blue-600" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                      {t('staffHelp.schedule.jobCards', 'Job Cards')}
                    </h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      {t(
                        'staffHelp.schedule.jobCardsDesc',
                        'Each job appears as a colored card showing the customer name, service type, and time. Tap or click on a job to see more details like customer phone number and any special notes.'
                      )}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                    <div className="w-3 h-0.5 bg-red-500"></div>
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                      {t('staffHelp.schedule.currentTime', 'Current Time Indicator')}
                    </h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      {t(
                        'staffHelp.schedule.currentTimeDesc',
                        "When viewing today's schedule, a red line moves across the timeline showing the current time. This helps you see at a glance what's past, current, and upcoming."
                      )}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.schedule.jobDetails', 'Job Information')}
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
              {t(
                'staffHelp.schedule.jobDetailsIntro',
                'When you tap on a job, you can see all the important details you need:'
              )}
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <UserIcon size={18} className="text-brand-500" />
                <div>
                  <span className="font-medium text-sm text-gray-900 dark:text-white">
                    {t('staffHelp.schedule.customerInfo', 'Customer Name')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {t('staffHelp.schedule.customerInfoDesc', 'Who the appointment is with')}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <Phone size={18} className="text-brand-500" />
                <div>
                  <span className="font-medium text-sm text-gray-900 dark:text-white">
                    {t('staffHelp.schedule.phoneInfo', 'Phone Number')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {t('staffHelp.schedule.phoneInfoDesc', 'Tap to call if you need to reach them')}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <MapPin size={18} className="text-brand-500" />
                <div>
                  <span className="font-medium text-sm text-gray-900 dark:text-white">
                    {t('staffHelp.schedule.locationInfo', 'Location/Address')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {t('staffHelp.schedule.locationInfoDesc', 'Where the service will take place')}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <FileText size={18} className="text-brand-500" />
                <div>
                  <span className="font-medium text-sm text-gray-900 dark:text-white">
                    {t('staffHelp.schedule.notesInfo', 'Special Notes')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {t('staffHelp.schedule.notesInfoDesc', 'Any special instructions or requests')}
                  </p>
                </div>
              </div>
            </div>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.schedule.navigation', 'Navigating Between Days')}
            </h3>
            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <span>
                  {t(
                    'staffHelp.schedule.navArrows',
                    'Use the left and right arrows at the top to move between days'
                  )}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <span>
                  {t(
                    'staffHelp.schedule.navToday',
                    'Tap the "Today" button to quickly jump back to the current day'
                  )}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <span>
                  {t(
                    'staffHelp.schedule.navCalendar',
                    'Tap on the date to open a calendar picker for jumping to any specific day'
                  )}
                </span>
              </li>
            </ul>

            {canEditSchedule ? (
              <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800 mb-4">
                <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                  <GripVertical size={18} className="text-green-500" />
                  {t('staffHelp.schedule.rescheduleTitle', 'Drag to Reschedule')}
                </h4>
                <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                  {t(
                    'staffHelp.schedule.rescheduleDesc',
                    'You have permission to reschedule your jobs. Simply drag a job up or down on the timeline to move it to a different time slot. Changes will be saved automatically.'
                  )}
                </p>
                <div className="bg-white dark:bg-gray-800 rounded p-3">
                  <h5 className="font-medium text-sm text-gray-900 dark:text-white mb-2">
                    {t('staffHelp.schedule.howToDrag', 'How to Reschedule:')}
                  </h5>
                  <ol className="text-xs text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                    <li>{t('staffHelp.schedule.dragStep1', 'Press and hold on a job card')}</li>
                    <li>{t('staffHelp.schedule.dragStep2', 'Drag it up or down to the new time')}</li>
                    <li>{t('staffHelp.schedule.dragStep3', 'Release to drop it in place')}</li>
                    <li>{t('staffHelp.schedule.dragStep4', 'The change saves automatically')}</li>
                  </ol>
                </div>
              </div>
            ) : (
              <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 mb-4">
                <div className="flex items-start gap-3">
                  <Info size={18} className="text-gray-500 mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                      {t('staffHelp.schedule.viewOnlyTitle', 'View-Only Access')}
                    </h4>
                    <p className="text-sm text-gray-600 dark:text-gray-300">
                      {t(
                        'staffHelp.schedule.viewOnly',
                        'Your schedule is view-only. Contact a manager if you need to reschedule an appointment.'
                      )}
                    </p>
                  </div>
                </div>
              </div>
            )}

            <div className="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
              <div className="flex items-start gap-3">
                <AlertCircle size={20} className="text-amber-500 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.schedule.importantNote', 'Important')}
                  </h4>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.schedule.importantNoteDesc',
                      "If your schedule looks incorrect or you're missing appointments, try refreshing the page. If the problem persists, contact your manager as there may have been recent changes that haven't synced yet."
                    )}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* My Availability Section */}
        <section className="mb-10">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
              <CalendarOff size={20} className="text-rose-600 dark:text-rose-400" />
            </div>
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
              {t('staffHelp.availability.title', 'My Availability')}
            </h2>
          </div>
          <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">
              {t(
                'staffHelp.availability.description',
                'Use the My Availability page to set times when you are not available for bookings. This helps managers and the booking system know when not to schedule you.'
              )}
            </p>
            <p className="text-gray-600 dark:text-gray-300 mb-6">
              {t(
                'staffHelp.availability.descriptionDetail',
                "Whether you have a doctor's appointment, a vacation planned, or regular commitments like picking up kids from school, time blocks let you communicate your unavailability in advance. This prevents scheduling conflicts and ensures your manager knows when you're not free."
              )}
            </p>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.availability.whenToUse', 'When to Use Time Blocks')}
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
              <div className="p-3 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800">
                <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                  {t('staffHelp.availability.vacationUse', 'Vacation & Time Off')}
                </h4>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.availability.vacationUseDesc',
                    'Block out entire days or weeks when you\'ll be away on vacation or taking personal time off.'
                  )}
                </p>
              </div>
              <div className="p-3 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800">
                <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                  {t('staffHelp.availability.appointmentsUse', 'Personal Appointments')}
                </h4>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.availability.appointmentsUseDesc',
                    'Doctor visits, car maintenance, or any one-time personal commitment during work hours.'
                  )}
                </p>
              </div>
              <div className="p-3 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800">
                <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                  {t('staffHelp.availability.recurringUse', 'Recurring Commitments')}
                </h4>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.availability.recurringUseDesc',
                    'Weekly therapy sessions, school pickups, or any regular obligation. Set it once and it repeats automatically.'
                  )}
                </p>
              </div>
              <div className="p-3 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800">
                <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                  {t('staffHelp.availability.emergencyUse', 'Last-Minute Needs')}
                </h4>
                <p className="text-xs text-gray-600 dark:text-gray-300">
                  {t(
                    'staffHelp.availability.emergencyUseDesc',
                    'Unexpected situations where you need time blocked quickly. Your manager will be notified of new blocks.'
                  )}
                </p>
              </div>
            </div>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.availability.howTo', 'How to Block Time')}
            </h3>
            <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6">
              <ol className="space-y-4 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-rose-600 text-white text-xs flex items-center justify-center font-medium">1</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {t('staffHelp.availability.step1Title', 'Click "Add Time Block"')}
                    </span>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {t(
                        'staffHelp.availability.step1Desc',
                        'Find this button at the top of the My Availability page. It opens a form where you can specify your unavailable time.'
                      )}
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-rose-600 text-white text-xs flex items-center justify-center font-medium">2</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {t('staffHelp.availability.step2Title', 'Select Date and Time')}
                    </span>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {t(
                        'staffHelp.availability.step2Desc',
                        'Choose the specific date, then set the start and end time. For all-day events, you can toggle "All Day" to block the entire day.'
                      )}
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-rose-600 text-white text-xs flex items-center justify-center font-medium">3</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {t('staffHelp.availability.step3Title', 'Add a Reason (Optional but Recommended)')}
                    </span>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {t(
                        'staffHelp.availability.step3Desc',
                        'Enter a brief reason like "Doctor appointment" or "School pickup". This helps your manager understand why you\'re unavailable and is visible only to staff.'
                      )}
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-rose-600 text-white text-xs flex items-center justify-center font-medium">4</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {t('staffHelp.availability.step4Title', 'Set Recurrence (If Needed)')}
                    </span>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {t(
                        'staffHelp.availability.step4Desc',
                        'For recurring commitments, choose how often it repeats: weekly, bi-weekly, or monthly. You can also set an end date for the recurrence.'
                      )}
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-rose-600 text-white text-xs flex items-center justify-center font-medium">5</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {t('staffHelp.availability.step5Title', 'Save Your Time Block')}
                    </span>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {t(
                        'staffHelp.availability.step5Desc',
                        'Click Save to create your time block. It will immediately appear on your availability calendar and prevent new bookings during that time.'
                      )}
                    </p>
                  </div>
                </li>
              </ol>
            </div>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.availability.managingBlocks', 'Managing Your Time Blocks')}
            </h3>
            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.availability.viewBlocks', 'View All Blocks:')}</span>{' '}
                  <span>{t('staffHelp.availability.viewBlocksDesc', 'See all your upcoming time blocks in a list or calendar view.')}</span>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.availability.editBlocks', 'Edit Existing Blocks:')}</span>{' '}
                  <span>{t('staffHelp.availability.editBlocksDesc', 'Click on any time block to change its date, time, or reason.')}</span>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.availability.deleteBlocks', 'Delete Blocks:')}</span>{' '}
                  <span>{t('staffHelp.availability.deleteBlocksDesc', 'If your plans change, you can delete a time block to become available again.')}</span>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
                <div>
                  <span className="font-medium">{t('staffHelp.availability.editSeries', 'Edit Recurring Series:')}</span>{' '}
                  <span>{t('staffHelp.availability.editSeriesDesc', 'For recurring blocks, you can edit just one occurrence or the entire series.')}</span>
                </div>
              </li>
            </ul>

            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800 mb-4">
              <div className="flex items-start gap-3">
                <AlertCircle size={20} className="text-yellow-600 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.availability.importantNote', 'Important to Know')}
                  </h4>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.availability.noteDesc',
                      'Time blocks you create will prevent new bookings during those times. However, existing appointments that were already scheduled are not automatically cancelled or moved. If you have a conflict with an existing appointment, contact your manager to reschedule it.'
                    )}
                  </p>
                </div>
              </div>
            </div>

            <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">
                <Lightbulb size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.availability.bestPractices', 'Best Practices')}
                  </h4>
                  <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                    <li>
                      {t(
                        'staffHelp.availability.tip1',
                        '• Add time blocks as far in advance as possible so your manager can plan around them.'
                      )}
                    </li>
                    <li>
                      {t(
                        'staffHelp.availability.tip2',
                        '• Always include a reason so your manager understands the context.'
                      )}
                    </li>
                    <li>
                      {t(
                        'staffHelp.availability.tip3',
                        '• For recurring commitments, use the recurrence feature rather than creating multiple individual blocks.'
                      )}
                    </li>
                    <li>
                      {t(
                        'staffHelp.availability.tip4',
                        '• Review your time blocks periodically to remove any that are no longer needed.'
                      )}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Tickets Section - Only if user has access */}
        {canAccessTickets && (
          <section className="mb-10">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                <Ticket size={20} className="text-purple-600 dark:text-purple-400" />
              </div>
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                {t('staffHelp.tickets.title', 'Tickets')}
              </h2>
            </div>
            <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">
                {t(
                  'staffHelp.tickets.description',
                  'You have access to the ticketing system. Use tickets to communicate with customers, report issues, or track requests.'
                )}
              </p>
              <p className="text-gray-600 dark:text-gray-300 mb-6">
                {t(
                  'staffHelp.tickets.descriptionDetail',
                  'The ticketing system provides a structured way to handle customer inquiries, problems, and requests. Each ticket tracks the entire conversation history, making it easy to follow up and ensure nothing falls through the cracks.'
                )}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                {t('staffHelp.tickets.whatYouCanDo', 'What You Can Do')}
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
                <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.tickets.viewTickets', 'View Tickets')}
                  </h4>
                  <p className="text-xs text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.tickets.viewTicketsDesc',
                      'See all tickets assigned to you or visible to staff. Filter by status, priority, or date.'
                    )}
                  </p>
                </div>
                <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.tickets.respondTickets', 'Respond to Tickets')}
                  </h4>
                  <p className="text-xs text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.tickets.respondTicketsDesc',
                      'Add comments and replies to tickets. Customers receive notifications when you respond.'
                    )}
                  </p>
                </div>
                <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.tickets.createTickets', 'Create Tickets')}
                  </h4>
                  <p className="text-xs text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.tickets.createTicketsDesc',
                      'Open new tickets on behalf of customers when they contact you directly or report issues in person.'
                    )}
                  </p>
                </div>
                <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                    {t('staffHelp.tickets.trackStatus', 'Track Status')}
                  </h4>
                  <p className="text-xs text-gray-600 dark:text-gray-300">
                    {t(
                      'staffHelp.tickets.trackStatusDesc',
                      'See the full history of each ticket including all comments, status changes, and when it was created.'
                    )}
                  </p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                {t('staffHelp.tickets.ticketStatuses', 'Understanding Ticket Status')}
              </h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                <div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">
                    {t('staffHelp.tickets.statusOpen', 'Open')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {t('staffHelp.tickets.statusOpenDesc', 'Awaiting response')}
                  </p>
                </div>
                <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
                    {t('staffHelp.tickets.statusInProgress', 'In Progress')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {t('staffHelp.tickets.statusInProgressDesc', 'Being worked on')}
                  </p>
                </div>
                <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-purple-700 dark:text-purple-300">
                    {t('staffHelp.tickets.statusWaiting', 'Waiting')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {t('staffHelp.tickets.statusWaitingDesc', 'Waiting on customer')}
                  </p>
                </div>
                <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-green-700 dark:text-green-300">
                    {t('staffHelp.tickets.statusClosed', 'Closed')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {t('staffHelp.tickets.statusClosedDesc', 'Issue resolved')}
                  </p>
                </div>
              </div>

              <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">
                  <Lightbulb size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">
                      {t('staffHelp.tickets.bestPractices', 'Tips for Good Ticket Handling')}
                    </h4>
                    <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                      <li>
                        {t(
                          'staffHelp.tickets.tip1',
                          '• Respond promptly - even if just to acknowledge you\'ve seen the ticket.'
                        )}
                      </li>
                      <li>
                        {t(
                          'staffHelp.tickets.tip2',
                          '• Be clear and specific in your responses. Avoid jargon the customer might not understand.'
                        )}
                      </li>
                      <li>
                        {t(
                          'staffHelp.tickets.tip3',
                          '• If you can\'t resolve an issue, escalate to your manager rather than leaving it open indefinitely.'
                        )}
                      </li>
                      <li>
                        {t(
                          'staffHelp.tickets.tip4',
                          '• Always close tickets once the issue is fully resolved to keep your queue organized.'
                        )}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {/* Help Footer */}
        <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="text-center mb-6">
            <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">
              {t('staffHelp.footer.title', 'Need More Help?')}
            </h3>
            <p className="text-gray-600 dark:text-gray-300">
              {t(
                'staffHelp.footer.description',
                "If you have questions or need assistance, please contact your manager or supervisor."
              )}
            </p>
          </div>

          <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6">
            <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-3">
              {t('staffHelp.footer.commonQuestions', 'Common Questions')}
            </h4>
            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
              <li className="flex items-start gap-2">
                <span className="font-medium text-brand-600 dark:text-brand-400">Q:</span>
                <div>
                  <span className="font-medium">
                    {t('staffHelp.footer.q1', "I can't see my schedule?")}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {t(
                      'staffHelp.footer.a1',
                      'Try refreshing the page. If it still doesn\'t load, contact your manager to ensure you\'re assigned to a resource.'
                    )}
                  </p>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium text-brand-600 dark:text-brand-400">Q:</span>
                <div>
                  <span className="font-medium">
                    {t('staffHelp.footer.q2', 'How do I reschedule an appointment?')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {t(
                      'staffHelp.footer.a2',
                      'If you have edit permissions, drag the job to a new time. Otherwise, contact your manager to reschedule.'
                    )}
                  </p>
                </div>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium text-brand-600 dark:text-brand-400">Q:</span>
                <div>
                  <span className="font-medium">
                    {t('staffHelp.footer.q3', 'Why was my time block rejected?')}
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {t(
                      'staffHelp.footer.a3',
                      'Your manager may have declined the request if it conflicts with existing commitments. They should reach out to discuss alternatives.'
                    )}
                  </p>
                </div>
              </li>
            </ul>
          </div>

          {canAccessTickets && (
            <div className="text-center">
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">
                {t(
                  'staffHelp.footer.ticketPrompt',
                  "Can't find the answer you're looking for? Open a support ticket and we'll help you out."
                )}
              </p>
              <button
                onClick={() => navigate('/dashboard/tickets')}
                className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
              >
                {t('staffHelp.footer.openTicket', 'Open a Ticket')}
              </button>
            </div>
          )}
        </section>
      </div>
    </div>
  );
};

export default StaffHelp;
