/**
 * Help Settings General Page
 *
 * Comprehensive help documentation for General Settings.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Settings,
  Building2,
  Globe,
  Clock,
  Mail,
  Phone,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  AlertCircle,
  Save,
  Shield,
} from 'lucide-react';

const HelpSettingsGeneral: 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">
            <Building2 size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">General Settings Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Configure your business identity, timezone, and contact information</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">
          <Settings 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">
            General Settings contain the foundational configuration for your business. These settings affect how your business appears to customers, how appointment times are displayed, and how customers can contact you.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            The page is organized into three sections: Business Identity, Timezone Settings, and Contact Information. Changes are saved when you click the "Save Changes" button.
          </p>
        </div>
      </section>

      {/* Owner Access Note */}
      <section className="mb-10">
        <div className="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800">
          <div className="flex items-start gap-3">
            <Shield size={20} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
            <div>
              <h4 className="font-medium text-amber-800 dark:text-amber-200">Owner Access Required</h4>
              <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
                Only business owners can access and modify General Settings. Managers and staff members will see a message indicating they don't have permission to change these settings.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Business Identity Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Building2 size={20} className="text-brand-500" /> Business Identity
        </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">
            Define how your business is identified in the system:
          </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">
              <Building2 size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Business Name</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Your company name displayed in the sidebar, emails, booking pages, and customer-facing interfaces. This can be changed at any time.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Globe size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Subdomain</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Your unique URL: <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">yourname.smoothschedule.com</code>.
                  This is your booking page URL that customers use to schedule appointments.
                </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">
            <div className="flex items-start gap-2">
              <AlertCircle size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
              <p className="text-sm text-blue-800 dark:text-blue-200">
                <strong>Note:</strong> Your subdomain is read-only and cannot be changed directly. Contact support if you need to change your subdomain.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timezone Settings 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" /> Timezone Settings
        </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">
            Configure how appointment times are calculated and displayed:
          </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">
              <Globe size={20} className="text-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Business Timezone</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                  Select the timezone where your business operates. All appointment times are stored relative to this timezone.
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Includes common timezones for North America, Europe, Asia, and Australia. Examples: Eastern Time (New York), Pacific Time (Los Angeles), London (GMT/BST).
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-orange-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Time Display Mode</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                  Choose how times are shown to viewers:
                </p>
                <ul className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
                  <li className="flex items-start gap-2">
                    <span className="font-medium text-gray-700 dark:text-gray-300">Business Timezone:</span>
                    All appointment times display in your business timezone regardless of where the viewer is located. Best for local businesses.
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="font-medium text-gray-700 dark:text-gray-300">Viewer's Local Timezone:</span>
                    Appointment times automatically adapt to each viewer's local timezone. Best for businesses with customers in different time zones.
                  </li>
                </ul>
              </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>Important:</strong> Changing your business timezone after appointments are created may cause confusion. The appointments themselves remain at the same absolute time, but the displayed time will shift. Always verify existing appointments after a timezone change.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Information Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Mail size={20} className="text-brand-500" /> Contact Information
        </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">
            Provide contact details that customers can use to reach you:
          </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">
              <Mail size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Contact Email</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The email address displayed on your booking page and in customer communications. This is where customers will expect to reach you for questions or support.
                </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-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Phone Number</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Your business phone number for customers who prefer to call. Include country code for international businesses.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Saving Changes Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Save size={20} className="text-brand-500" /> Saving Changes
        </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">
              <Save size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Save Changes Button</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  After making any modifications, click the "Save Changes" button at the bottom of the page. A green confirmation toast appears when changes are saved successfully.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <AlertCircle size={20} className="text-amber-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Unsaved Changes</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  If you navigate away without saving, your changes will be lost. Always save before leaving the page.
                </p>
              </div>
            </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>Consistent Branding:</strong> Your business name appears across all customer touchpoints
              </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>Accurate Scheduling:</strong> Correct timezone prevents appointment confusion
              </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>Flexible Display:</strong> Choose between business or viewer timezone based on your customer base
              </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 Contact:</strong> Clear contact info helps customers reach you quickly
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Related Settings */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link
            to="/dashboard/help/settings/appearance"
            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"
          >
            <Settings size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Branding Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/booking"
            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"
          >
            <Globe size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Booking Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/domains"
            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"
          >
            <Globe size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Custom Domains</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/email"
            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">Email Settings</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 general settings.
        </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 HelpSettingsGeneral;
