'use client';

import { useState } from 'react';
import { CheckCircle } from 'lucide-react';
import { Dialog, DialogHeader, DialogBody, DialogFooter } from '@/components/ui/dialog';
import { api } from '@/lib/api';

type EmailType = 'WELCOME' | 'TRAINING_REMINDER' | 'MEMBERSHIP_EXPIRING' | 'PROMO' | 'BIRTHDAY';

type EmailTemplate = {
  id: string;
  type: EmailType;
  subject: string;
  bodyHtml: string;
  variables: string[];
  isActive: boolean;
};

const EMAIL_TYPE_LABELS: Record<EmailType, string> = {
  WELCOME: 'Приветствие',
  TRAINING_REMINDER: 'Напоминание о тренировке',
  MEMBERSHIP_EXPIRING: 'Истечение абонемента',
  PROMO: 'Промо-акция',
  BIRTHDAY: 'День рождения',
};

type SendTestDialogProps = {
  open: boolean;
  onClose: () => void;
  templates: EmailTemplate[];
};

export function SendTestDialog({ open, onClose, templates }: SendTestDialogProps) {
  const [step, setStep] = useState<'form' | 'success'>('form');
  const [recipientEmail, setRecipientEmail] = useState('');
  const [selectedType, setSelectedType] = useState<EmailType | ''>('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleClose = () => {
    setStep('form');
    setRecipientEmail('');
    setSelectedType('');
    setError(null);
    onClose();
  };

  const handleSend = async () => {
    if (!recipientEmail.trim()) {
      setError('Введите email получателя');
      return;
    }
    if (!selectedType) {
      setError('Выберите шаблон');
      return;
    }

    setLoading(true);
    setError(null);
    try {
      await api.post('/email/send', {
        recipientEmail: recipientEmail.trim(),
        type: selectedType,
        variables: {
          clientName: 'Тест Тестович',
          clubName: 'Фитнес-клуб',
          trainerName: 'Иван Иванов',
          date: new Date().toLocaleDateString('ru-RU'),
          time: '10:00',
        },
      });
      setStep('success');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Не удалось отправить письмо');
    } finally {
      setLoading(false);
    }
  };

  const activeTemplates = templates.filter((t) => t.isActive);

  return (
    <Dialog open={open} onClose={handleClose}>
      {step === 'form' ? (
        <>
          <DialogHeader
            title="Отправить тестовое письмо"
            description="Выберите шаблон и укажите адрес для тестовой отправки"
            onClose={handleClose}
          />
          <DialogBody>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Email получателя
                </label>
                <input
                  type="email"
                  value={recipientEmail}
                  onChange={(e) => setRecipientEmail(e.target.value)}
                  placeholder="test@example.com"
                  className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Шаблон
                </label>
                <select
                  value={selectedType}
                  onChange={(e) => setSelectedType(e.target.value as EmailType)}
                  className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                >
                  <option value="">Выберите шаблон...</option>
                  {activeTemplates.map((t) => (
                    <option key={t.type} value={t.type}>
                      {EMAIL_TYPE_LABELS[t.type]} — {t.subject}
                    </option>
                  ))}
                </select>
                {activeTemplates.length === 0 && (
                  <p className="text-xs text-muted mt-1">
                    Нет активных шаблонов. Создайте шаблон перед отправкой.
                  </p>
                )}
              </div>

              {error && (
                <p className="text-sm text-error">{error}</p>
              )}
            </div>
          </DialogBody>
          <DialogFooter>
            <button
              onClick={handleClose}
              disabled={loading}
              className="px-4 py-2 rounded-xl border border-border text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
            >
              Отмена
            </button>
            <button
              onClick={() => void handleSend()}
              disabled={loading || activeTemplates.length === 0}
              className="bg-primary text-white px-4 py-2.5 rounded-xl text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
            >
              {loading ? 'Отправка...' : 'Отправить'}
            </button>
          </DialogFooter>
        </>
      ) : (
        <>
          <DialogHeader
            title="Письмо отправлено"
            onClose={handleClose}
          />
          <DialogBody>
            <div className="text-center py-4">
              <CheckCircle className="h-12 w-12 text-success mx-auto mb-3" />
              <p className="text-sm text-gray-600">
                Тестовое письмо отправлено на <strong>{recipientEmail}</strong>.
                Проверьте вкладку «Логи отправок» для отслеживания статуса.
              </p>
            </div>
          </DialogBody>
          <DialogFooter>
            <button
              onClick={handleClose}
              className="bg-primary text-white px-4 py-2.5 rounded-xl text-sm font-medium hover:bg-primary/90 transition-colors"
            >
              Закрыть
            </button>
          </DialogFooter>
        </>
      )}
    </Dialog>
  );
}
