import React from 'react';
import { useTranslation } from 'react-i18next';
import { Mail, Server, Lock, Copy, Check, Shield, Smartphone, Monitor, Globe } from 'lucide-react';
import { useState } from 'react';

interface CopyButtonProps {
  text: string;
}

const CopyButton: React.FC<CopyButtonProps> = ({ text }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  return (
    <button
      onClick={handleCopy}
      className="ml-2 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
      title="Copy to clipboard"
    >
      {copied ? (
        <Check size={14} className="text-green-500" />
      ) : (
        <Copy size={14} className="text-gray-400" />
      )}
    </button>
  );
};

interface SettingRowProps {
  label: string;
  value: string;
  monospace?: boolean;
}

const SettingRow: React.FC<SettingRowProps> = ({ label, value, monospace = true }) => (
  <div className="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-700 last:border-0">
    <span className="text-gray-600 dark:text-gray-400 text-sm">{label}</span>
    <div className="flex items-center">
      <span className={`text-gray-900 dark:text-white ${monospace ? 'font-mono text-sm' : ''}`}>
        {value}
      </span>
      <CopyButton text={value} />
    </div>
  </div>
);

const HelpEmailSettings: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className="p-8 max-w-4xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
          <Mail className="text-brand-600" />
          {t('help.email.title', 'Email Client Settings')}
        </h1>
        <p className="text-gray-500 dark:text-gray-400 mt-2">
          {t('help.email.subtitle', 'Configure your email client to send and receive emails using your SmoothSchedule platform email address')}
        </p>
      </div>

      {/* Quick Start */}
      <div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-xl p-6 mb-8">
        <h2 className="text-lg font-semibold text-brand-900 dark:text-brand-100 mb-3 flex items-center gap-2">
          <Globe size={20} />
          Quick Reference
        </h2>
        <p className="text-brand-700 dark:text-brand-300 text-sm mb-4">
          Use these settings to configure any email client. Your username is your full email address, and your password is the one you set when creating the email address.
        </p>
        <div className="grid md:grid-cols-2 gap-4">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-4">
            <h3 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
              <Server size={16} className="text-blue-500" />
              Incoming Mail (IMAP)
            </h3>
            <div className="space-y-1 text-sm">
              <SettingRow label="Server" value="mail.talova.net" />
              <SettingRow label="Port" value="993" />
              <SettingRow label="Security" value="SSL/TLS" monospace={false} />
            </div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-lg p-4">
            <h3 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
              <Server size={16} className="text-green-500" />
              Outgoing Mail (SMTP)
            </h3>
            <div className="space-y-1 text-sm">
              <SettingRow label="Server" value="mail.talova.net" />
              <SettingRow label="Port" value="587" />
              <SettingRow label="Security" value="STARTTLS" monospace={false} />
            </div>
          </div>
        </div>
      </div>

      {/* Security Note */}
      <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4 mb-8">
        <div className="flex gap-3">
          <Shield className="text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" size={20} />
          <div>
            <h3 className="font-medium text-yellow-800 dark:text-yellow-200">Security Notice</h3>
            <p className="text-yellow-700 dark:text-yellow-300 text-sm mt-1">
              Always ensure your email client is configured to use encrypted connections (SSL/TLS or STARTTLS).
              Never connect using unencrypted ports (25, 110, 143 without encryption).
            </p>
          </div>
        </div>
      </div>

      {/* Desktop Clients */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Monitor size={20} className="text-gray-500" />
            Desktop Email Clients
          </h2>
        </div>

        {/* Outlook */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h3 className="font-medium text-gray-900 dark:text-white mb-4">Microsoft Outlook</h3>
          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li>Go to <strong>File</strong> &gt; <strong>Add Account</strong></li>
            <li>Enter your email address and click <strong>Advanced options</strong></li>
            <li>Check <strong>Let me set up my account manually</strong></li>
            <li>Select <strong>IMAP</strong></li>
            <li>Enter the incoming and outgoing server settings from above</li>
            <li>Enter your password when prompted</li>
            <li>Click <strong>Connect</strong> to complete setup</li>
          </ol>
        </div>

        {/* Apple Mail */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h3 className="font-medium text-gray-900 dark:text-white mb-4">Apple Mail (macOS)</h3>
          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li>Open <strong>Mail</strong> and go to <strong>Mail</strong> &gt; <strong>Add Account</strong></li>
            <li>Select <strong>Other Mail Account</strong> and click <strong>Continue</strong></li>
            <li>Enter your name, email address, and password</li>
            <li>If automatic setup fails, enter the server settings manually:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Account Type: IMAP</li>
                <li>Incoming Mail Server: mail.talova.net</li>
                <li>Outgoing Mail Server: mail.talova.net</li>
              </ul>
            </li>
            <li>Click <strong>Sign In</strong> to complete</li>
          </ol>
        </div>

        {/* Thunderbird */}
        <div className="p-6">
          <h3 className="font-medium text-gray-900 dark:text-white mb-4">Mozilla Thunderbird</h3>
          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li>Go to <strong>Account Settings</strong> &gt; <strong>Account Actions</strong> &gt; <strong>Add Mail Account</strong></li>
            <li>Enter your name, email address, and password</li>
            <li>Click <strong>Configure manually</strong></li>
            <li>Configure incoming server:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Protocol: IMAP</li>
                <li>Hostname: mail.talova.net</li>
                <li>Port: 993</li>
                <li>Connection Security: SSL/TLS</li>
                <li>Authentication: Normal password</li>
              </ul>
            </li>
            <li>Configure outgoing server:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Hostname: mail.talova.net</li>
                <li>Port: 587</li>
                <li>Connection Security: STARTTLS</li>
                <li>Authentication: Normal password</li>
              </ul>
            </li>
            <li>Click <strong>Done</strong></li>
          </ol>
        </div>
      </div>

      {/* Mobile Clients */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Smartphone size={20} className="text-gray-500" />
            Mobile Email Apps
          </h2>
        </div>

        {/* iOS */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h3 className="font-medium text-gray-900 dark:text-white mb-4">iPhone / iPad (iOS Mail)</h3>
          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li>Go to <strong>Settings</strong> &gt; <strong>Mail</strong> &gt; <strong>Accounts</strong> &gt; <strong>Add Account</strong></li>
            <li>Select <strong>Other</strong> &gt; <strong>Add Mail Account</strong></li>
            <li>Enter your name, email, password, and a description</li>
            <li>Tap <strong>Next</strong> and select <strong>IMAP</strong></li>
            <li>For <strong>Incoming Mail Server</strong>:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Host Name: mail.talova.net</li>
                <li>User Name: your full email address</li>
                <li>Password: your email password</li>
              </ul>
            </li>
            <li>For <strong>Outgoing Mail Server</strong>:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Host Name: mail.talova.net</li>
                <li>User Name: your full email address</li>
                <li>Password: your email password</li>
              </ul>
            </li>
            <li>Tap <strong>Save</strong></li>
          </ol>
        </div>

        {/* Android */}
        <div className="p-6">
          <h3 className="font-medium text-gray-900 dark:text-white mb-4">Android (Gmail App)</h3>
          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li>Open the <strong>Gmail</strong> app and tap your profile icon</li>
            <li>Tap <strong>Add another account</strong> &gt; <strong>Other</strong></li>
            <li>Enter your email address and tap <strong>Next</strong></li>
            <li>Select <strong>Personal (IMAP)</strong></li>
            <li>Enter your password</li>
            <li>For incoming server settings:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Server: mail.talova.net</li>
                <li>Port: 993</li>
                <li>Security type: SSL/TLS</li>
              </ul>
            </li>
            <li>For outgoing server settings:
              <ul className="list-disc list-inside ml-4 mt-2 space-y-1">
                <li>Server: mail.talova.net</li>
                <li>Port: 587</li>
                <li>Security type: STARTTLS</li>
              </ul>
            </li>
            <li>Complete the setup</li>
          </ol>
        </div>
      </div>

      {/* Troubleshooting */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Lock size={20} className="text-gray-500" />
            Troubleshooting
          </h2>
        </div>
        <div className="p-6 space-y-4">
          <div>
            <h3 className="font-medium text-gray-900 dark:text-white mb-2">Cannot connect to server</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Make sure you're using the correct port numbers (993 for IMAP, 587 for SMTP) and that your firewall isn't blocking these ports.
            </p>
          </div>
          <div>
            <h3 className="font-medium text-gray-900 dark:text-white mb-2">Authentication failed</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Verify that your username is your full email address (e.g., support@talova.net) and that you're using the correct password.
              If you've forgotten your password, you can reset it from the Email Addresses page in Platform Settings.
            </p>
          </div>
          <div>
            <h3 className="font-medium text-gray-900 dark:text-white mb-2">Certificate warnings</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              If you see SSL certificate warnings, ensure your device's date and time are correct. The mail server uses a valid SSL certificate that should be trusted by all modern devices.
            </p>
          </div>
          <div>
            <h3 className="font-medium text-gray-900 dark:text-white mb-2">Emails not syncing</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Check your sync frequency settings in your email client. Some clients may be set to manual sync by default. Also verify that the email address is active in Platform Settings.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HelpEmailSettings;