import { useState } from 'react';
import Input from '../UI/Input';
import Button from '../UI/Button';
import { EMAIL_TEMPLATE_TAGS } from '../../utils/constants';

const PROVIDERS = [
  {
    id:          'smtp',
    name:        'WordPress SMTP',
    description: 'Uses your site\'s default wp_mail() function. Works with any SMTP plugin.',
    badge:       'FREE',
    badgeClass:  'bg-slate-100 text-slate-600',
    icon:        '📨',
    proOnly:     false,
  },
  {
    id:          'brevo',
    name:        'Brevo (Sendinblue)',
    description: 'Transactional email API with high deliverability and analytics.',
    badge:       'PRO',
    badgeClass:  'bg-pink-100 text-pink-700',
    icon:        '📧',
    proOnly:     true,
    keyLabel:    'Brevo API Key',
    keyField:    'brevoApiKey',
    keyPlaceholder: 'xkeysib-…',
    docsUrl:     'https://developers.brevo.com/docs/getting-started',
  },
  {
    id:          'sendgrid',
    name:        'SendGrid',
    description: 'High-volume email sending with advanced analytics and deliverability tools.',
    badge:       'PRO',
    badgeClass:  'bg-pink-100 text-pink-700',
    icon:        '⚡',
    proOnly:     true,
    keyLabel:    'SendGrid API Key',
    keyField:    'sendgridApiKey',
    keyPlaceholder: 'SG.…',
    docsUrl:     'https://docs.sendgrid.com/ui/account-and-settings/api-keys',
  },
];

export default function EmailSettings({ settings, onChange, isPro: propIsPro }) {
  const isPro      = propIsPro !== undefined ? propIsPro : (window.rescueFill?.isPro || false);
  const upgradeUrl = window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro';

  const [showTags,   setShowTags]   = useState(false);
  const [testEmail,  setTestEmail]  = useState('');
  const [testing,    setTesting]    = useState(false);
  const [testResult, setTestResult] = useState(null);

  const currentProvider = settings.emailProvider || 'smtp';
  const providerDef     = PROVIDERS.find(p => p.id === currentProvider) || PROVIDERS[0];

  const insertTag = (tag) => {
    const ta = document.getElementById('rf-email-body');
    if (ta) {
      const s = ta.selectionStart, e = ta.selectionEnd, txt = settings.emailBody || '';
      onChange('emailBody', txt.substring(0, s) + tag + txt.substring(e));
      setTimeout(() => { ta.focus(); ta.setSelectionRange(s + tag.length, s + tag.length); }, 0);
    } else {
      onChange('emailBody', (settings.emailBody || '') + tag);
    }
  };

  const handleTest = async () => {
    if (!testEmail) { alert('Enter an email address to test.'); return; }
    setTesting(true);
    setTestResult(null);
    try {
      const apiBase = window.rescueFill?.apiUrl || '/wp-json/rescue/v1';
      const nonce   = window.rescueFill?.nonce  || '';

      // Pro uses test-provider endpoint which respects the configured provider
      // Free falls back to campaigns/test (SMTP only)
      const endpoint = isPro && currentProvider !== 'smtp'
        ? `${apiBase}/campaigns/test-provider`
        : `${apiBase}/campaigns/test`;

      const res = await fetch(endpoint, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce },
        body: JSON.stringify({
          email:    testEmail,
          subject:  settings.emailSubject || 'RescueFill Test Email',
          body:     settings.emailBody    || 'This is a test email from RescueFill.',
          provider: currentProvider,
        }),
      });
      const data = await res.json();
      setTestResult(data);
    } catch (e) {
      setTestResult({ success: false, message: e.message });
    } finally {
      setTesting(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-base font-semibold text-slate-900 mb-1">Email Settings</h3>
        <p className="text-sm text-slate-500">Configure recovery emails and your sending provider.</p>
      </div>

      {/* ── Provider Selection ──────────────────────────────────────── */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Sending Provider</h4>

        <div className="space-y-3">
          {PROVIDERS.map(provider => {
            const disabled  = provider.proOnly && !isPro;
            const selected  = currentProvider === provider.id;

            return (
              <div
                key={provider.id}
                onClick={() => !disabled && onChange('emailProvider', provider.id)}
                className={`rounded-xl border-2 p-4 transition-all ${
                  disabled
                    ? 'border-slate-100 bg-slate-50 cursor-not-allowed opacity-60'
                    : selected
                      ? 'border-indigo-500 bg-indigo-50 cursor-pointer'
                      : 'border-slate-200 bg-white cursor-pointer hover:border-slate-300'
                }`}>
                <div className="flex items-start gap-3">
                  <div className={`w-4 h-4 mt-0.5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
                    selected ? 'border-indigo-600 bg-indigo-600' : 'border-slate-300'
                  }`}>
                    {selected && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-0.5">
                      <span className="text-sm font-semibold text-slate-900">{provider.icon} {provider.name}</span>
                      <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${provider.badgeClass}`}>
                        {provider.badge}
                      </span>
                      {selected && !disabled && (
                        <span className="text-[10px] font-bold text-indigo-600 bg-indigo-100 px-1.5 py-0.5 rounded">ACTIVE</span>
                      )}
                    </div>
                    <p className="text-xs text-slate-500 leading-relaxed">{provider.description}</p>

                    {/* API Key input — show only when this provider is selected and available */}
                    {selected && !disabled && provider.keyField && (
                      <div className="mt-3 space-y-1">
                        <label className="block text-xs font-semibold text-slate-700">
                          {provider.keyLabel}
                          {provider.docsUrl && (
                            <a href={provider.docsUrl} target="_blank" rel="noopener noreferrer"
                              className="ml-2 text-indigo-600 hover:underline font-normal">
                              How to get it →
                            </a>
                          )}
                        </label>
                        <input
                          type="text"
                          value={settings[provider.keyField] || ''}
                          onChange={e => onChange(provider.keyField, e.target.value)}
                          placeholder={provider.keyPlaceholder}
                          className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:ring-2 focus:ring-indigo-500"
                        />
                        {settings[provider.keyField] === '••••••••' && (
                          <p className="text-xs text-emerald-600">✓ API key configured — enter a new key to update</p>
                        )}
                      </div>
                    )}

                    {disabled && (
                      <a href={upgradeUrl} target="_blank" rel="noopener noreferrer"
                        onClick={e => e.stopPropagation()}
                        className="inline-block mt-2 text-xs font-bold text-indigo-600 hover:underline">
                        Upgrade to Pro to use {provider.name} →
                      </a>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Test Connection */}
        <div className="pt-4 border-t border-slate-100">
          <h5 className="text-xs font-semibold text-slate-700 mb-2">
            Test Email via {providerDef.name}
          </h5>
          <div className="flex items-center gap-2">
            <input
              type="email"
              value={testEmail}
              onChange={e => setTestEmail(e.target.value)}
              placeholder="Send test to…"
              className="flex-1 border border-slate-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500"
            />
            <Button type="button" variant="secondary" size="sm" onClick={handleTest} loading={testing}>
              Send Test
            </Button>
          </div>
          {testResult && (
            <p className={`text-xs mt-1.5 font-medium ${testResult.success ? 'text-emerald-600' : 'text-red-600'}`}>
              {testResult.success ? '✓ Test email sent!' : `✗ ${testResult.message}`}
            </p>
          )}
        </div>
      </div>

      {/* ── Sender Info ─────────────────────────────────────────────── */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Sender Information</h4>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Input
            id="rf-from-name"
            label="From Name"
            value={settings.fromName || ''}
            onChange={e => onChange('fromName', e.target.value)}
            placeholder="Your Company Name"
            helpText="The name shown in the 'From' field"
          />
          <Input
            id="rf-from-email"
            label="From Email"
            type="email"
            value={settings.fromEmail || ''}
            onChange={e => onChange('fromEmail', e.target.value)}
            placeholder="hello@yoursite.com"
            helpText="Must match your SMTP or API sender domain"
          />
        </div>
        <Input
          id="rf-reply-to"
          label="Reply-To Email"
          type="email"
          value={settings.replyToEmail || ''}
          onChange={e => onChange('replyToEmail', e.target.value)}
          placeholder="support@yoursite.com"
          helpText="Replies will be directed here"
        />
      </div>

      {/* ── Email Template ───────────────────────────────────────────── */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Recovery Email Template</h4>
          <button type="button" onClick={() => setShowTags(!showTags)}
            className="text-xs text-indigo-600 hover:text-indigo-700 font-medium">
            {showTags ? 'Hide' : 'Show'} Template Tags
          </button>
        </div>

        {showTags && (
          <div className="bg-slate-50 rounded-lg p-4">
            <p className="text-xs font-medium text-slate-600 mb-3">Click to insert at cursor:</p>
            <div className="flex flex-wrap gap-2">
              {EMAIL_TEMPLATE_TAGS.map(item => (
                <button key={item.tag} type="button" onClick={() => insertTag(item.tag)} title={item.description}
                  className="px-2.5 py-1 text-xs font-mono bg-white border border-slate-200 text-indigo-600 rounded-md hover:bg-indigo-50 hover:border-indigo-300 transition-colors">
                  {item.tag}
                </button>
              ))}
            </div>
          </div>
        )}

        <Input
          id="rf-email-subject"
          label="Email Subject"
          value={settings.emailSubject || ''}
          onChange={e => onChange('emailSubject', e.target.value)}
          placeholder="You left something behind, {name}…"
          helpText="Supports template tags like {name} and {form_name}"
        />

        <div className="space-y-1">
          <label htmlFor="rf-email-body" className="block text-sm font-medium text-slate-700">Email Body</label>
          <textarea
            id="rf-email-body"
            rows={10}
            value={settings.emailBody || ''}
            onChange={e => onChange('emailBody', e.target.value)}
            placeholder={"Hi {name},\n\nWe noticed you started filling out our form but didn't complete it.\n\nClick here to continue: {recovery_link}"}
            className="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono resize-y"
          />
          <p className="text-xs text-slate-500">
            Plain-text with optional HTML. The <code className="bg-slate-100 px-1 rounded">{'{recovery_link}'}</code> tag inserts the personalised recovery URL.
          </p>
        </div>
      </div>
    </div>
  );
}