import React, { useState } from 'react';
import { Save, RefreshCw, Send, Shield, Lock } from 'lucide-react';
import { ISystemSettings } from '../../../types';
import Input from '../../../components/common/Input';
import { validateSMTP, validateEmail } from '../utils/validation';

interface EmailSettingsProps {
  settings: ISystemSettings;
  onSettingsChange: (settings: ISystemSettings) => void;
  onSave: () => void;
  saving: boolean;
}

const EmailSettings: React.FC<EmailSettingsProps> = ({
  settings,
  onSettingsChange,
  onSave,
  saving
}) => {
  const [testEmail, setTestEmail] = useState('');
  const [sendingTest, setSendingTest] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [testEmailError, setTestEmailError] = useState('');

  const handleSave = () => {
    const validation = validateSMTP(settings.smtp);
    if (!validation.isValid) {
      setErrors(validation.errors);
      return;
    }
    setErrors({});
    onSave();
  };

  const handleTestEmail = async () => {
    const emailValidation = validateEmail(testEmail);
    if (!emailValidation.isValid) {
      setTestEmailError(emailValidation.errors.email || '');
      return;
    }
    setTestEmailError('');
    setSendingTest(true);
    setTestResult(null);
    try {
      const { dataService } = await import('../../../services/dataService');
      const result = await dataService.sendTestEmail(testEmail);
      setTestResult(result);
    } catch (error: any) {
      setTestResult({ success: false, message: error.message || 'Lỗi khi gửi email test' });
    } finally {
      setSendingTest(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-bold text-slate-800 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
          Cấu hình SMTP Server
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Input
            label="SMTP Host"
            value={settings.smtp.host}
            onChange={(e) => {
              onSettingsChange({ ...settings, smtp: { ...settings.smtp, host: e.target.value } });
              if (errors.host) setErrors({ ...errors, host: '' });
            }}
            placeholder="smtp.example.com"
            error={errors.host}
          />
          <Input
            label="SMTP Port"
            type="number"
            value={settings.smtp.port.toString()}
            onChange={(e) => {
              onSettingsChange({ ...settings, smtp: { ...settings.smtp, port: parseInt(e.target.value) || 587 } });
              if (errors.port) setErrors({ ...errors, port: '' });
            }}
            placeholder="587"
            error={errors.port}
          />
          <Input
            label="Username / Email"
            value={settings.smtp.user}
            onChange={(e) => {
              onSettingsChange({ ...settings, smtp: { ...settings.smtp, user: e.target.value } });
              if (errors.user) setErrors({ ...errors, user: '' });
            }}
            placeholder="user@example.com"
            error={errors.user}
          />
          <Input
            label="Password"
            type="password"
            value={settings.smtp.pass}
            onChange={(e) => {
              onSettingsChange({ ...settings, smtp: { ...settings.smtp, pass: e.target.value } });
              if (errors.pass) setErrors({ ...errors, pass: '' });
            }}
            placeholder="••••••••"
            error={errors.pass}
          />
          <div className="md:col-span-2">
            <Input
              label="Sender Name & Email"
              value={settings.smtp.senderEmail}
              onChange={(e) => {
                onSettingsChange({ ...settings, smtp: { ...settings.smtp, senderEmail: e.target.value } });
                if (errors.senderEmail) setErrors({ ...errors, senderEmail: '' });
              }}
              placeholder="e.g. No Reply <no-reply@domain.com>"
              error={errors.senderEmail}
            />
          </div>
          <div className="md:col-span-2 flex items-center gap-2">
            <input
              type="checkbox"
              className="rounded text-blue-600 focus:ring-blue-500 h-4 w-4 bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600"
              checked={settings.smtp.secure}
              onChange={(e) => onSettingsChange({ ...settings, smtp: { ...settings.smtp, secure: e.target.checked } })}
            />
            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
              Sử dụng kết nối bảo mật (SSL/TLS)
            </label>
          </div>
        </div>
        <div className="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end">
          <button
            onClick={handleSave}
            disabled={saving}
            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
          >
            {saving ? <RefreshCw size={18} className="animate-spin" /> : <Save size={18} />}
            Lưu cấu hình
          </button>
        </div>
      </div>

      {/* Test Email Section */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-bold text-slate-800 dark:text-white mb-4">Kiểm tra gửi mail</h2>
        <div className="flex gap-4 items-end">
          <div className="flex-1">
            <Input
              label="Gửi đến email"
              type="email"
              placeholder="admin@example.com"
              value={testEmail}
              onChange={(e) => {
                setTestEmail(e.target.value);
                if (testEmailError) setTestEmailError('');
              }}
              error={testEmailError}
            />
          </div>
          <button
            onClick={handleTestEmail}
            disabled={sendingTest || !testEmail}
            className="flex items-center gap-2 bg-slate-800 dark:bg-slate-700 text-white px-4 py-2 rounded-lg hover:bg-slate-900 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed mb-[1px]"
          >
            {sendingTest ? <RefreshCw size={18} className="animate-spin" /> : <Send size={18} />}
            Gửi Test
          </button>
        </div>
        {testResult && (
          <div
            className={`mt-4 p-3 rounded-md text-sm flex items-center gap-2 ${
              testResult.success
                ? 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300'
                : 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300'
            }`}
          >
            {testResult.success ? <Shield size={16} /> : <Lock size={16} />}
            {testResult.message}
          </div>
        )}
      </div>
    </div>
  );
};

export default EmailSettings;
export { EmailSettings };