'use client';

import { useState, useEffect } from 'react';
import { Plus, Trash2, Star, Mail, Save, AlertCircle, CheckCircle } from 'lucide-react';
import { emailConfigService, type EmailConfig } from '@/services/email-config.service';
import { getErrorMessage } from '@/lib/errors';

export default function EmailConfigPage() {
  const [configs, setConfigs] = useState<EmailConfig[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const emptyForm = () => ({ email: '', password: '', host: '', port: 587, secure: false });
  const [form, setForm] = useState(emptyForm());

  useEffect(() => {
    loadConfigs();
  }, []);

  const loadConfigs = async () => {
    try {
      const data = await emailConfigService.getAll();
      setConfigs(data);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);

    if (!form.email || !form.password || !form.host) {
      setError('Email, app password, and SMTP host are all required');
      return;
    }

    setSaving(true);
    try {
      if (editingId) {
        await emailConfigService.update(editingId, form);
        setSuccess('Email configuration updated successfully');
      } else {
        await emailConfigService.create(form);
        setSuccess('Email configuration created successfully');
      }
      setShowForm(false);
      setEditingId(null);
      setForm(emptyForm());
      loadConfigs();
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setSaving(false);
    }
  };

  const handleEdit = (config: EmailConfig) => {
    setEditingId(config.id);
    setForm({
      email: config.email,
      password: config.password,
      host: config.host,
      port: config.port,
      secure: config.secure,
    });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this email configuration?')) return;
    setError(null);
    try {
      await emailConfigService.delete(id);
      setSuccess('Email configuration deleted');
      loadConfigs();
    } catch (err) {
      setError(getErrorMessage(err));
    }
  };

  const handleSetDefault = async (id: string) => {
    setError(null);
    try {
      await emailConfigService.setDefault(id);
      setSuccess('Default email configuration updated');
      loadConfigs();
    } catch (err) {
      setError(getErrorMessage(err));
    }
  };

  const handleCancel = () => {
    setShowForm(false);
    setEditingId(null);
    setForm(emptyForm());
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Email Configuration</h1>
          <p className="text-slate-400">
            Configure the SMTP mailbox used for user verification. Users will send verification emails to this address.
          </p>
        </div>
        <button
          onClick={() => setShowForm(true)}
          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
        >
          <Plus className="h-4 w-4" /> Add Email
        </button>
      </div>

      {error && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400 flex items-center gap-2">
          <AlertCircle className="h-4 w-4" />
          {error}
          <button onClick={() => setError(null)} className="ml-auto text-red-300 hover:text-white">
            &times;
          </button>
        </div>
      )}

      {success && (
        <div className="rounded-lg border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-400 flex items-center gap-2">
          <CheckCircle className="h-4 w-4" />
          {success}
          <button onClick={() => setSuccess(null)} className="ml-auto text-green-300 hover:text-white">
            &times;
          </button>
        </div>
      )}

      <div className="rounded-lg border border-blue-500/20 bg-blue-500/5 p-4">
        <h3 className="text-sm font-medium text-blue-300 mb-2">How it works:</h3>
        <ol className="text-sm text-slate-400 space-y-1 list-decimal list-inside">
          <li>Super admin configures an SMTP mailbox that users will send verification emails to</li>
          <li>When a user signs up, the system generates a verification code</li>
          <li>User sends an email to the configured mailbox with that code</li>
          <li>User uploads screenshot of the sent email</li>
          <li>Super admin verifies and approves/declines</li>
        </ol>
      </div>

      {showForm && (
        <div className="rounded-xl border border-white/10 bg-slate-900 p-6">
          <h2 className="text-lg font-semibold text-white mb-4">
            {editingId ? 'Edit Email Configuration' : 'Add Email Configuration'}
          </h2>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">
                Email Address <span className="text-red-400">*</span>
              </label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="your-system-mailbox@example.com"
                  required
                  className="w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
                />
              </div>
              <p className="mt-1 text-xs text-slate-500">
                Users will send verification emails to this address
              </p>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">
                App Password / SMTP Password <span className="text-red-400">*</span>
              </label>
              <input
                type="password"
                value={form.password}
                onChange={(e) => setForm({ ...form, password: e.target.value })}
                placeholder="Mailbox app password"
                required
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
              />
              <p className="mt-1 text-xs text-slate-500">
                For Gmail: generate an App Password from Google Account &gt; Security &gt; 2-Step Verification &gt; App passwords.
                For other providers, use the SMTP password they provide.
              </p>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">SMTP Host <span className="text-red-400">*</span></label>
                <input
                  type="text"
                  value={form.host}
                  onChange={(e) => setForm({ ...form, host: e.target.value })}
                  placeholder="e.g. smtp.gmail.com"
                  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-slate-300">Port</label>
                <input
                  type="number"
                  value={form.port}
                  onChange={(e) => setForm({ ...form, port: parseInt(e.target.value) })}
                  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                />
              </div>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="secure"
                checked={form.secure}
                onChange={(e) => setForm({ ...form, secure: e.target.checked })}
                className="rounded border-white/10 bg-white/5"
              />
              <label htmlFor="secure" className="text-sm text-slate-300">
                Use SSL/TLS (secure connection)
              </label>
            </div>

            <div className="flex justify-end gap-3 pt-4 border-t border-white/10">
              <button
                type="button"
                onClick={handleCancel}
                className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={saving}
                className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
              >
                <Save className="h-4 w-4" />
                {saving ? 'Saving...' : editingId ? 'Update' : 'Save'}
              </button>
            </div>
          </form>
        </div>
      )}

      {configs.length === 0 ? (
        <div className="rounded-xl border border-white/10 bg-slate-900 p-12 text-center">
          <Mail className="h-12 w-12 text-slate-600 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-white mb-2">No Email Configuration</h3>
          <p className="text-slate-400 mb-4">
            Add a Gmail address for user verification. Users will send verification emails to this address.
          </p>
          <button
            onClick={() => setShowForm(true)}
            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
          >
            <Plus className="h-4 w-4" /> Add Email Configuration
          </button>
        </div>
      ) : (
        <div className="space-y-4">
          {configs.map((config) => (
            <div
              key={config.id}
              className="rounded-xl border border-white/10 bg-slate-900 p-4 flex items-center justify-between"
            >
              <div className="flex items-center gap-4">
                <div className="rounded-lg bg-blue-500/10 p-3">
                  <Mail className="h-6 w-6 text-blue-400" />
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="text-white font-medium">{config.email}</span>
                    {config.isDefault && (
                      <span className="rounded-full bg-green-500/20 px-2 py-0.5 text-xs text-green-300">
                        Default
                      </span>
                    )}
                    {!config.isActive && (
                      <span className="rounded-full bg-red-500/20 px-2 py-0.5 text-xs text-red-300">
                        Inactive
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-slate-400">
                    {config.host}:{config.port} {config.secure ? '(SSL)' : '(No SSL)'}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                {!config.isDefault && (
                  <button
                    onClick={() => handleSetDefault(config.id)}
                    className="rounded-lg p-2 text-slate-400 hover:bg-white/5 hover:text-yellow-400"
                    title="Set as default"
                  >
                    <Star className="h-4 w-4" />
                  </button>
                )}
                <button
                  onClick={() => handleEdit(config)}
                  className="rounded-lg p-2 text-slate-400 hover:bg-white/5 hover:text-blue-400"
                  title="Edit"
                >
                  <Save className="h-4 w-4" />
                </button>
                <button
                  onClick={() => handleDelete(config.id)}
                  className="rounded-lg p-2 text-slate-400 hover:bg-white/5 hover:text-red-400"
                  title="Delete"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}