smoothschedule/frontend/src/pages/HelpTicketing.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  Ticket,
  MessageSquare,
  Users,
  Shield,
  Bell,
  CheckCircle,
  Clock,
  AlertCircle,
  HelpCircle,
  ChevronRight,
  BookOpen,
} from 'lucide-react';

const HelpTicketing: 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">
            <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              {t('helpTicketing.title', 'Ticketing System Guide')}
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              {t('helpTicketing.subtitle', 'Learn how to use the support ticketing system')}
            </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">
          <Ticket size={20} className="text-brand-500" />
          {t('helpTicketing.overview.title', '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">
            {t('helpTicketing.overview.description',
              'The ticketing system allows you to manage support requests, customer inquiries, staff requests, and internal communications all in one place. Tickets can be categorized, prioritized, and assigned to team members for efficient handling.'
            )}
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <MessageSquare size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">
                  {t('helpTicketing.overview.customerSupport', 'Customer Support')}
                </h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('helpTicketing.overview.customerSupportDesc', 'Handle customer inquiries, complaints, and refund requests')}
                </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">
                  {t('helpTicketing.overview.staffRequests', 'Staff Requests')}
                </h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('helpTicketing.overview.staffRequestsDesc', 'Manage time-off requests, schedule changes, and equipment needs')}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Shield size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">
                  {t('helpTicketing.overview.internal', 'Internal Tickets')}
                </h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('helpTicketing.overview.internalDesc', 'Track internal issues and communications within your team')}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <HelpCircle size={20} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">
                  {t('helpTicketing.overview.platformSupport', 'Platform Support')}
                </h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('helpTicketing.overview.platformSupportDesc', 'Get help from the SmoothSchedule support team')}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Ticket Types Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <MessageSquare size={20} className="text-brand-500" />
          {t('helpTicketing.ticketTypes.title', 'Ticket Types')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-700/50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('helpTicketing.ticketTypes.type', 'Type')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('helpTicketing.ticketTypes.description', 'Description')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('helpTicketing.ticketTypes.categories', 'Categories')}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                    Customer
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  {t('helpTicketing.ticketTypes.customerDesc', 'Requests and inquiries from your customers')}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Appointment, Refund, Complaint, General Inquiry
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                    Staff Request
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  {t('helpTicketing.ticketTypes.staffDesc', 'Internal requests from your staff members')}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Time Off, Schedule Change, Equipment
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
                    Internal
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  {t('helpTicketing.ticketTypes.internalDesc', 'Internal team communications and issues')}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Equipment, General Inquiry, Other
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
                    Platform
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  {t('helpTicketing.ticketTypes.platformDesc', 'Support requests to SmoothSchedule team')}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Billing, Technical, Feature Request, Account
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      {/* Ticket Statuses Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Clock size={20} className="text-brand-500" />
          {t('helpTicketing.statuses.title', 'Ticket Statuses')}
        </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-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 min-w-[140px]">
                <AlertCircle size={14} /> Open
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                {t('helpTicketing.statuses.openDesc', 'Ticket has been submitted and is waiting to be reviewed')}
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 min-w-[140px]">
                <Clock size={14} /> In Progress
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                {t('helpTicketing.statuses.inProgressDesc', 'Ticket is being actively worked on by a team member')}
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 min-w-[140px]">
                <HelpCircle size={14} /> Awaiting Response
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                {t('helpTicketing.statuses.awaitingDesc', 'Waiting for additional information from the requester')}
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 min-w-[140px]">
                <CheckCircle size={14} /> Resolved
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                {t('helpTicketing.statuses.resolvedDesc', 'Issue has been resolved but ticket remains open for follow-up')}
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 min-w-[140px]">
                <CheckCircle size={14} /> Closed
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                {t('helpTicketing.statuses.closedDesc', 'Ticket has been completed and closed')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Priority Levels 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" />
          {t('helpTicketing.priorities.title', 'Priority Levels')}
        </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="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
              <span className="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                Low
              </span>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t('helpTicketing.priorities.lowDesc', 'General inquiries and non-urgent requests. No immediate action required.')}
              </p>
            </div>
            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
              <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
                Medium
              </span>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t('helpTicketing.priorities.mediumDesc', 'Standard requests that should be addressed within normal business hours.')}
              </p>
            </div>
            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
              <span className="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
                High
              </span>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t('helpTicketing.priorities.highDesc', 'Important issues that require prompt attention and resolution.')}
              </p>
            </div>
            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
              <span className="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400">
                Urgent
              </span>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t('helpTicketing.priorities.urgentDesc', 'Critical issues requiring immediate attention. Business-impacting problems.')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Permissions Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Shield size={20} className="text-brand-500" />
          {t('helpTicketing.permissions.title', 'Access & Permissions')}
        </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-6">
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">
                {t('helpTicketing.permissions.ownersManagers', 'Business Owners & Managers')}
              </h4>
              <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-300 space-y-1 ml-4">
                <li>{t('helpTicketing.permissions.ownerPerm1', 'View and manage all tickets for your business')}</li>
                <li>{t('helpTicketing.permissions.ownerPerm2', 'Assign tickets to staff members')}</li>
                <li>{t('helpTicketing.permissions.ownerPerm3', 'Change ticket status and priority')}</li>
                <li>{t('helpTicketing.permissions.ownerPerm4', 'Add comments (public and internal)')}</li>
                <li>{t('helpTicketing.permissions.ownerPerm5', 'Control staff access to the ticketing system')}</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">
                {t('helpTicketing.permissions.staff', 'Staff Members')}
              </h4>
              <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-300 space-y-1 ml-4">
                <li>{t('helpTicketing.permissions.staffPerm1', 'Access requires permission from owner/manager')}</li>
                <li>{t('helpTicketing.permissions.staffPerm2', 'View tickets assigned to them or in their department')}</li>
                <li>{t('helpTicketing.permissions.staffPerm3', 'Update ticket status and add comments')}</li>
                <li>{t('helpTicketing.permissions.staffPerm4', 'Create new support requests')}</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">
                {t('helpTicketing.permissions.customers', 'Customers')}
              </h4>
              <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-300 space-y-1 ml-4">
                <li>{t('helpTicketing.permissions.customerPerm1', 'Submit support requests through the Support page')}</li>
                <li>{t('helpTicketing.permissions.customerPerm2', 'View only their own submitted tickets')}</li>
                <li>{t('helpTicketing.permissions.customerPerm3', 'Track the status of their requests')}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Notifications Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Bell size={20} className="text-brand-500" />
          {t('helpTicketing.notifications.title', 'Notifications')}
        </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">
            {t('helpTicketing.notifications.description',
              'The system automatically sends notifications for important ticket events. You will receive notifications for:'
            )}
          </p>
          <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-300 space-y-2 ml-4">
            <li>{t('helpTicketing.notifications.event1', 'New tickets assigned to you')}</li>
            <li>{t('helpTicketing.notifications.event2', 'Comments added to your tickets')}</li>
            <li>{t('helpTicketing.notifications.event3', 'Status changes on tickets you created or are assigned to')}</li>
            <li>{t('helpTicketing.notifications.event4', 'Priority escalations')}</li>
          </ul>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            {t('helpTicketing.notifications.bellIcon',
              'Access your notifications by clicking the bell icon in the navigation bar.'
            )}
          </p>
        </div>
      </section>

      {/* Quick Tips */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" />
          {t('helpTicketing.tips.title', 'Quick 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">
                {t('helpTicketing.tips.tip1', 'Use clear, descriptive subjects to help prioritize and categorize tickets quickly.')}
              </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">
                {t('helpTicketing.tips.tip2', 'Assign tickets to specific team members to ensure accountability.')}
              </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">
                {t('helpTicketing.tips.tip3', 'Use internal comments for team discussions that customers should not see.')}
              </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">
                {t('helpTicketing.tips.tip4', 'Regularly review and close resolved tickets to keep your queue organized.')}
              </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">
                {t('helpTicketing.tips.tip5', 'Set appropriate priorities to ensure urgent issues are addressed first.')}
              </span>
            </li>
          </ul>
        </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">
          {t('helpTicketing.moreHelp.title', 'Need More Help?')}
        </h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          {t('helpTicketing.moreHelp.description',
            "If you have questions about the ticketing system that aren't covered here, please submit a Platform Support ticket and our team will assist you."
          )}
        </p>
        <button
          onClick={() => navigate('/tickets')}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          {t('helpTicketing.moreHelp.goToTickets', 'Go to Tickets')}
        </button>
      </section>
    </div>
  );
};

export default HelpTicketing;