/**
 * Staff Help Guide
 *
 * Simplified documentation for staff members.
 * Only covers features that staff have access to.
 */

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,
} 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">
              {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>
          </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>
            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
              <li className="flex items-center gap-2">
                <CheckCircle size={16} className="text-green-500" />
                <span>{t('staffHelp.dashboard.feature1', 'View daily summary and stats')}</span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={16} className="text-green-500" />
                <span>{t('staffHelp.dashboard.feature2', 'Quick access to your schedule')}</span>
              </li>
            </ul>
          </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>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.schedule.features', 'Features')}
            </h3>
            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-4">
              <li className="flex items-center gap-2">
                <Clock size={16} className="text-brand-500" />
                <span>
                  {t('staffHelp.schedule.feature1', 'See all your jobs in a vertical timeline')}
                </span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={16} className="text-green-500" />
                <span>
                  {t(
                    'staffHelp.schedule.feature2',
                    'View customer name and appointment details'
                  )}
                </span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={16} className="text-green-500" />
                <span>
                  {t('staffHelp.schedule.feature3', 'Navigate between days using arrows')}
                </span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={16} className="text-green-500" />
                <span>
                  {t('staffHelp.schedule.feature4', 'See current time indicator on today\'s view')}
                </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">
                <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">
                  {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>
            ) : (
              <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <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>
        </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>

            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
              {t('staffHelp.availability.howTo', 'How to Block Time')}
            </h3>
            <ol className="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside mb-4">
              <li>{t('staffHelp.availability.step1', 'Click "Add Time Block" button')}</li>
              <li>{t('staffHelp.availability.step2', 'Select the date and time range')}</li>
              <li>{t('staffHelp.availability.step3', 'Add an optional reason (e.g., "Vacation", "Doctor appointment")')}</li>
              <li>{t('staffHelp.availability.step4', 'Choose if it repeats (one-time, weekly, etc.)')}</li>
              <li>{t('staffHelp.availability.step5', 'Save your time block')}</li>
            </ol>

            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <p className="text-sm text-gray-600 dark:text-gray-300">
                <strong>{t('staffHelp.availability.note', 'Note:')}</strong>{' '}
                {t(
                  'staffHelp.availability.noteDesc',
                  'Time blocks you create will prevent new bookings during those times. Existing appointments are not affected.'
                )}
              </p>
            </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>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span>{t('staffHelp.tickets.feature1', 'View and respond to tickets')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span>{t('staffHelp.tickets.feature2', 'Create new tickets for customer issues')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span>{t('staffHelp.tickets.feature3', 'Track ticket status and history')}</span>
                </li>
              </ul>
            </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">
            {t('staffHelp.footer.title', 'Need More Help?')}
          </h3>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            {t(
              'staffHelp.footer.description',
              "If you have questions or need assistance, please contact your manager or supervisor."
            )}
          </p>
          {canAccessTickets && (
            <button
              onClick={() => navigate('/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>
          )}
        </section>
      </div>
    </div>
  );
};

export default StaffHelp;
