/**
 * Help Customers Page
 *
 * Comprehensive help documentation for the Customers management page.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Users,
  UserPlus,
  Mail,
  Phone,
  Search,
  Edit,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Tag,
  ArrowUpDown,
  Filter,
  DollarSign,
  Calendar,
  MapPin,
  Eye,
  AlertCircle,
  MoreHorizontal,
} from 'lucide-react';

const HelpCustomers: React.FC = () => {
  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} /> 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">
            <Users size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Customers Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Manage your customer database and relationships</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">
          <Users 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 Customers page is your central hub for managing all client information. Every person who books with your business has a customer record that stores their contact details, booking history, total spend, and custom tags.
          </p>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The page displays customers in a sortable, searchable table with key information at a glance: name with avatar, contact info, status, total spend, and last visit. You can quickly add new customers, filter the list, or take actions on individual customers.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            A well-maintained customer database enables personalized service, targeted marketing, and tracking of customer lifetime value.
          </p>
        </div>
      </section>

      {/* The Customer Table Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Users size={20} className="text-brand-500" /> The Customer Table
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The main view displays all customers in a table with the following columns:
          </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">
              <Users size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Customer</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Avatar (or initials), full name, and any tags assigned to the customer. Click the header to sort alphabetically.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Mail size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Contact Info</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Email address and phone number for quick reference and communication.
                </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-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Status</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Customer status badge - <span className="text-green-600 dark:text-green-400">Active</span> (green), <span className="text-gray-600 dark:text-gray-400">Inactive</span> (gray), or blocked (red). Click header to sort.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <DollarSign size={20} className="text-amber-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Total Spend</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Cumulative amount the customer has spent at your business. Click header to sort by highest/lowest spenders.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Calendar size={20} className="text-pink-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Last Visit</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Date of the customer's most recent appointment. Shows "Never" for customers who haven't booked yet. Click header to sort.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <MoreHorizontal size={20} className="text-gray-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Actions</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Action buttons including Masquerade (for owners) and a menu for additional options.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Searching and Sorting Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Search size={20} className="text-brand-500" /> Searching and Sorting
        </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">
              <Search size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Search</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Type in the search bar to instantly filter customers by name, email, or phone number. Results update as you type.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ArrowUpDown size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Sort Columns</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click any sortable column header (Customer, Status, Total Spend, Last Visit) to sort ascending/descending. Click again to reverse the order.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Filter size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Filters</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Use the Filters button to access advanced filtering options for narrowing down your customer list.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Adding a Customer Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <UserPlus size={20} className="text-brand-500" /> Adding a Customer
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Click the <strong>"Add Customer"</strong> button to open the new customer form:
          </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">
              <Users size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Full Name <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The customer's name as it should appear in your records and communications.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Mail size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Email Address <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Primary email for appointment confirmations, reminders, and marketing.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Phone size={20} className="text-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Phone Number <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Contact number for SMS reminders and direct communication.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <MapPin size={20} className="text-orange-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Location (Optional)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  City, State, and ZIP code fields for address information.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Tag size={20} className="text-pink-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Tags (Optional)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Comma-separated labels for categorizing customers (e.g., "VIP, Referral, Corporate"). Tags appear as badges in the customer list.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-sm text-blue-800 dark:text-blue-200">
              <strong>Note:</strong> New customers are created with "Active" status by default. Total Spend starts at $0.00 and increases automatically as they complete appointments.
            </p>
          </div>
        </div>
      </section>

      {/* Customer Status Section */}
      <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" /> Customer Statuses
        </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">
            Customer status controls their ability to book and helps you categorize your customer base:
          </p>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center 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-[100px]">
                Active
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Customer can book appointments and access the booking system
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center 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-[100px]">
                Inactive
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Temporarily disabled - customer cannot book but record is preserved
              </p>
            </div>
            <div className="flex items-center gap-4">
              <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 min-w-[100px]">
                Blocked
              </span>
              <p className="text-gray-600 dark:text-gray-300">
                Customer is blocked from booking (e.g., for policy violations)
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Tags Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Tag size={20} className="text-brand-500" /> Using Tags
        </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">
            Tags are custom labels you assign to customers for organization and segmentation:
          </p>
          <ul className="space-y-2 mb-4">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>VIP:</strong> Mark your best customers for special treatment</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Referral:</strong> Track customers who came through referrals</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Corporate:</strong> Identify business/corporate accounts</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>New:</strong> Recently acquired customers</span>
            </li>
          </ul>
          <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">
              <strong>Adding Tags:</strong> Enter tags as comma-separated values when creating or editing a customer (e.g., "VIP, Monthly, Referral"). Tags appear as small badges next to the customer name in the list.
            </p>
          </div>
        </div>
      </section>

      {/* Masquerading 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" /> Masquerading as Customers
        </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">
            Masquerading allows business owners to see the application exactly as a specific customer sees it. This powerful feature helps you:
          </p>
          <ul className="space-y-2 mb-4">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Provide Support:</strong> Walk customers through tasks step-by-step while seeing exactly what they see</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Troubleshoot Issues:</strong> Diagnose problems by experiencing the customer's perspective</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Test Experience:</strong> Verify that booking flows and features work correctly for customers</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300"><strong>Book on Behalf:</strong> Complete bookings for customers who need assistance</span>
            </li>
          </ul>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
              <Eye size={20} className="text-indigo-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">How to Masquerade</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Click the <strong>"Masquerade"</strong> button in the Actions column for any customer with an associated user account. The interface will switch to show what that customer sees.
                </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 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Ending Masquerade</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  A notification banner appears at the top of the screen while masquerading. Click "End Masquerade" to return to your owner view.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 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-2">
              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
              <p className="text-sm text-amber-800 dark:text-amber-200">
                <strong>Owner Only:</strong> Masquerading is restricted to business owners for security. The Masquerade button only appears for customers who have created a user account.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <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" /> Benefits
        </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>Personalized Service:</strong> Know your customers' preferences, history, and value at a glance
              </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>Quick Booking:</strong> Select existing customers instantly when scheduling 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-700 dark:text-gray-300">
                <strong>Revenue Tracking:</strong> Monitor customer lifetime value with automatic spend tracking
              </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>Segmentation:</strong> Use tags and filters to target specific customer groups
              </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>Support Tools:</strong> Masquerade feature enables hands-on customer assistance
              </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>Easy Communication:</strong> One-click access to email and phone for direct contact
              </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/scheduler"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Calendar size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/messages"
            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"
          >
            <Mail size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Messages 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"
          >
            <Tag 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/payments"
            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"
          >
            <DollarSign size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Payments 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">
          Our support team is ready to help with any questions about managing customers.
        </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 HelpCustomers;
