/**
 * Help Settings Email Page
 *
 * Comprehensive documentation for the Email Setup Settings page.
 * Documents: Ticket email addresses for receiving and sending support tickets via IMAP/SMTP.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, Mail, Plus, Edit, Trash2, Star, TestTube,
  RefreshCw, CheckCircle, ChevronRight, HelpCircle, AlertCircle, XCircle,
} from 'lucide-react';

const HelpSettingsEmail: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <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-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
            <Mail size={24} className="text-blue-600 dark:text-blue-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Email Setup Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Configure email addresses for ticket support</p>
          </div>
        </div>
      </div>

      {/* Overview */}
      <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" /> 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">
            Email Setup lets you configure email addresses for your ticketing system. When customers email
            these addresses, their messages automatically become support tickets. You can also send ticket
            responses back via these email addresses.
          </p>
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
              <p className="text-sm text-blue-700 dark:text-blue-300">
                <strong>Owner Access Required:</strong> Only business owners can configure ticket email addresses.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Email Address List */}
      <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" /> Your Email Addresses
        </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">
            Each configured email address appears as a card showing:
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">For Each Email Address</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• <strong>Display Name:</strong> A friendly name for the address (e.g., "Support", "Sales")</li>
                <li>• <strong>Email Address:</strong> The actual email (e.g., support@yourbusiness.com)</li>
                <li>• <strong>Color:</strong> Left border color for visual identification</li>
                <li>• <strong>Emails Processed:</strong> How many emails have been converted to tickets</li>
                <li>• <strong>Last Checked:</strong> When emails were last fetched</li>
              </ul>
            </div>

            {/* Status Badges */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                <div className="flex items-center gap-2 mb-1">
                  <Star size={14} className="text-yellow-600" />
                  <span className="text-sm font-medium text-yellow-800 dark:text-yellow-300">Default</span>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  Primary address for outgoing ticket emails
                </p>
              </div>
              <div className="p-3 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-1">
                  <CheckCircle size={14} className="text-green-600" />
                  <span className="text-sm font-medium text-green-800 dark:text-green-300">Active</span>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  Address is being monitored for new emails
                </p>
              </div>
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-700">
                <div className="flex items-center gap-2 mb-1">
                  <XCircle size={14} className="text-gray-500" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Inactive</span>
                </div>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  Address is configured but not checking
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Actions */}
      <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" /> Available Actions
        </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">
            Each email address has action buttons for testing and management:
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Star size={16} className="text-yellow-500" />
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Set as Default</h4>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Make this the default address for sending outgoing ticket emails
              </p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <TestTube size={16} className="text-blue-500" />
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Test IMAP</h4>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Test the incoming email (IMAP) connection to verify configuration
              </p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <RefreshCw size={16} className="text-green-500" />
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Fetch Emails Now</h4>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Manually check for new emails and create tickets immediately
              </p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Edit size={16} className="text-brand-500" />
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Edit</h4>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Modify the email address settings, IMAP/SMTP configuration
              </p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Trash2 size={16} className="text-red-500" />
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Delete</h4>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Remove the email address (with confirmation prompt)
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Adding an Email Address */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Plus size={20} className="text-green-500" /> Adding an Email Address
        </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 "Add Email Address" button to configure a new ticket email. You'll need IMAP and SMTP
            credentials from your email provider.
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-3">Required Information</h4>
              <div className="space-y-3 text-sm">
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Display Name</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Friendly name like "Support" or "Sales Inquiries"</p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Email Address</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">The full email address (e.g., support@example.com)</p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">IMAP Settings</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Server, port, username, and password for receiving emails</p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">SMTP Settings</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Server, port, username, and password for sending emails</p>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Color</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Choose a color to identify this address in the ticket list</p>
                </div>
              </div>
            </div>

            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Where to Find IMAP/SMTP Settings</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Your email provider (Gmail, Outlook, etc.) has documentation with IMAP and SMTP server details.
                Search for "[your provider] IMAP settings" or check your email account settings.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <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" /> How Email-to-Ticket Works
        </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-4">
              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center font-medium">1</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Customer Sends Email</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">A customer emails your configured address (e.g., support@yourbusiness.com)</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center font-medium">2</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">System Fetches Email</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">SmoothSchedule checks the mailbox via IMAP and retrieves new messages</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center font-medium">3</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Ticket Created</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">A new ticket is created with the email content and sender information</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center font-medium">4</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">You Respond</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">When you reply to the ticket, your response is sent via SMTP back to the customer</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 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" /> 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">
                Use "Test IMAP" after setup to verify your credentials are correct
              </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">
                Consider using different email addresses for different departments (support, sales, billing)
              </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">
                Set a meaningful default address - this is what customers see when you reply
              </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">
                Assign different colors to make it easy to identify which department a ticket came from
              </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/ticketing" 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">Ticketing Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/settings/general" 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">
            <CheckCircle size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">General Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <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">
            <Star 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/staff" 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">Staff Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </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">Need More Help?</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          Our support team is ready to help with email setup questions.
        </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 HelpSettingsEmail;
