import { useState, useEffect, useCallback } from 'react';
import Button from '../UI/Button';
import Modal from '../UI/Modal';
import Badge from '../UI/Badge';

const TEMPLATE_TAGS = [
  { tag: '{name}',          desc: 'Lead name' },
  { tag: '{email}',         desc: 'Lead email' },
  { tag: '{form_name}',     desc: 'Form name' },
  { tag: '{site_name}',     desc: 'Site name' },
  { tag: '{recovery_link}', desc: 'Recovery link' },
  { tag: '{date}',          desc: 'Current date' },
];

// ── Campaign Form ─────────────────────────────────────────────────────────────

function CampaignForm({ campaign, lists, onSave, onCancel }) {
  const [form, setForm] = useState({
    name:    campaign?.name    || '',
    subject: campaign?.subject || '',
    body:    campaign?.body    || '',
    list_id: campaign?.list_id || '',
  });
  const [saving, setSaving] = useState(false);
  const [error,  setError]  = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name.trim())    { setError('Campaign name is required.'); return; }
    if (!form.subject.trim()) { setError('Subject is required.'); return; }
    if (!form.body.trim())    { setError('Email body is required.'); return; }
    setSaving(true); setError('');
    try { await onSave(form); }
    catch (err) { setError(err.message || 'Error saving campaign.'); }
    finally { setSaving(false); }
  };

  const insertTag = (tag) => setForm(f => ({ ...f, body: f.body + ' ' + tag + ' ' }));

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {error && <p className="text-sm text-red-600 bg-red-50 border-2 border-red-200 rounded-xl px-4 py-3 font-medium">{error}</p>}

      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">Campaign Name <span className="text-red-500">*</span></label>
        <input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
          className="w-full border-2 border-slate-300 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder="e.g. Re-engagement July" required />
      </div>

      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">Target List</label>
        <select value={form.list_id} onChange={e => setForm(f => ({ ...f, list_id: e.target.value }))}
          className="w-full border-2 border-slate-300 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
          <option value="">— All Leads —</option>
          {lists.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
        </select>
      </div>

      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">Subject Line <span className="text-red-500">*</span></label>
        <input type="text" value={form.subject} onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
          className="w-full border-2 border-slate-300 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder="e.g. You left something behind..." required />
      </div>

      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">Email Body <span className="text-red-500">*</span></label>
        <textarea value={form.body} onChange={e => setForm(f => ({ ...f, body: e.target.value }))}
          rows={10} className="w-full border-2 border-slate-300 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-indigo-500 font-mono"
          placeholder="Write your email content here..." required />
        <div className="mt-2 flex flex-wrap gap-2">
          <span className="text-xs font-semibold text-slate-600">Tags:</span>
          {TEMPLATE_TAGS.map(({ tag, desc }) => (
            <button key={tag} type="button" onClick={() => insertTag(tag)} title={desc}
              className="text-xs bg-slate-100 hover:bg-indigo-50 text-slate-700 hover:text-indigo-700 border border-slate-200 hover:border-indigo-200 px-2.5 py-1 rounded-md transition-all">
              {tag}
            </button>
          ))}
        </div>
      </div>

      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
        <p className="text-xs text-slate-500">
          <strong>Provider:</strong> WordPress SMTP (default).
          Upgrade to <a href={window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro'} target="_blank" rel="noopener noreferrer" className="text-indigo-600 font-semibold hover:underline">Pro</a> for Brevo and SendGrid transactional sending.
        </p>
      </div>

      <div className="flex gap-3 pt-2">
        <Button type="submit" variant="primary" loading={saving}>{campaign ? 'Update Campaign' : 'Create Campaign'}</Button>
        <Button type="button" variant="secondary" onClick={onCancel}>Cancel</Button>
      </div>
    </form>
  );
}

// ── Main Component ─────────────────────────────────────────────────────────────

export default function Campaigns({ isPro }) {
  const [campaigns,      setCampaigns]      = useState([]);
  const [lists,          setLists]          = useState([]);
  const [loading,        setLoading]        = useState(true);
  const [formOpen,       setFormOpen]       = useState(false);
  const [editingCampaign,setEditingCampaign]= useState(null);
  const [deleteTarget,   setDeleteTarget]   = useState(null);
  const [error,          setError]          = useState('');

  const apiBase = window.rescueFill?.apiUrl || '/wp-json/rescue/v1';
  const nonce   = window.rescueFill?.nonce  || '';

  const loadData = useCallback(async () => {
    setLoading(true); setError('');
    try {
      const [campRes, listsRes] = await Promise.all([
        fetch(`${apiBase}/campaigns`, { headers: { 'X-WP-Nonce': nonce } }),
        fetch(`${apiBase}/lists`,     { headers: { 'X-WP-Nonce': nonce } }),
      ]);
      const campData  = await campRes.json();
      const listsData = await listsRes.json();
      if (campData.success)  setCampaigns(campData.data  || []);
      if (listsData.success) setLists(listsData.data     || []);
    } catch (e) {
      setError('Network error loading data.');
    } finally {
      setLoading(false);
    }
  }, [apiBase, nonce]);

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

  const handleSave = async (formData) => {
    const method = editingCampaign ? 'PUT' : 'POST';
    const url    = editingCampaign ? `${apiBase}/campaigns/${editingCampaign.id}` : `${apiBase}/campaigns`;
    const res    = await fetch(url, { method, headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce }, body: JSON.stringify(formData) });
    const data   = await res.json();
    if (data.success) { setFormOpen(false); setEditingCampaign(null); loadData(); }
    else throw new Error(data.message || 'Failed to save campaign.');
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    await fetch(`${apiBase}/campaigns/${deleteTarget.id}`, { method: 'DELETE', headers: { 'X-WP-Nonce': nonce } });
    setDeleteTarget(null); loadData();
  };

  const handleSend = async (campaign) => {
    if (!window.confirm(`Send campaign "${campaign.name}"?`)) return;
    const res  = await fetch(`${apiBase}/campaigns/${campaign.id}/send`, { method: 'POST', headers: { 'X-WP-Nonce': nonce } });
    const data = await res.json();
    if (data.success) { alert('Campaign queued for sending!'); loadData(); }
    else alert(data.message || 'Failed to send campaign.');
  };

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-3xl font-extrabold text-slate-900">Campaigns</h2>
          <p className="text-slate-600 text-sm mt-1 font-medium">Send targeted email broadcasts via WordPress SMTP.</p>
        </div>
        <Button variant="primary" onClick={() => { setEditingCampaign(null); setFormOpen(true); }}>+ New Campaign</Button>
      </div>

      {/* Pro upsell notice */}
      {!isPro && (
        <div className="bg-indigo-50 border border-indigo-200 rounded-xl p-4 flex items-center justify-between gap-4">
          <p className="text-sm text-indigo-800">
            <strong>Free:</strong> Campaigns send via WordPress SMTP.
            Upgrade to Pro for <strong>Brevo</strong>, <strong>SendGrid</strong>, <strong>multi-step sequences</strong>, A/B testing & more.
          </p>
          <a href={window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro'} target="_blank" rel="noopener noreferrer"
            className="shrink-0 text-xs font-bold bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
            Get Pro →
          </a>
        </div>
      )}

      {error && <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-4 py-3">{error}</p>}

      {/* Table */}
      <div className="bg-white rounded-2xl border-2 border-slate-200 overflow-hidden shadow-soft">
        {loading ? (
          <div className="py-16 flex flex-col items-center gap-3 text-slate-500">
            <div className="animate-spin w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full" />
            <span className="text-sm">Loading campaigns…</span>
          </div>
        ) : campaigns.length === 0 ? (
          <div className="py-16 flex flex-col items-center gap-3 text-slate-500">
            <div className="text-5xl mb-2">📣</div>
            <p className="text-lg font-semibold text-slate-700">No campaigns yet</p>
            <p className="text-sm text-slate-500">Create your first campaign to start sending recovery emails.</p>
            <Button variant="primary" onClick={() => { setEditingCampaign(null); setFormOpen(true); }}>+ New Campaign</Button>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm" style={{ minWidth: '600px' }}>
              <thead className="bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="px-5 py-3 font-semibold text-slate-700">Campaign</th>
                  <th className="px-5 py-3 font-semibold text-slate-700">List</th>
                  <th className="px-5 py-3 font-semibold text-slate-700">Sent</th>
                  <th className="px-5 py-3 font-semibold text-slate-700">Status</th>
                  <th className="px-5 py-3 font-semibold text-slate-700" style={{ textAlign: 'right' }}>Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {campaigns.map(campaign => (
                  <tr key={campaign.id} className="hover:bg-slate-50 transition-colors">
                    <td className="px-5 py-4">
                      <div className="font-semibold text-slate-900">{campaign.name}</div>
                      <div className="text-xs text-slate-500 mt-0.5">{campaign.subject}</div>
                    </td>
                    <td className="px-5 py-4">
                      {campaign.list_name ? <span className="text-slate-700 font-medium">{campaign.list_name}</span>
                        : <span className="text-slate-400 italic">All Leads</span>}
                    </td>
                    <td className="px-5 py-4">
                      <span className="font-bold text-slate-900">{campaign.sent_count || 0}</span>
                    </td>
                    <td className="px-5 py-4">
                      <Badge color={campaign.status === 'sent' ? 'emerald' : campaign.status === 'sending' ? 'amber' : 'slate'}>
                        {campaign.status || 'draft'}
                      </Badge>
                    </td>
                    <td className="px-5 py-4" style={{ textAlign: 'right' }}>
                      <div className="flex items-center justify-end gap-2">
                        <button onClick={() => handleSend(campaign)}
                          className="text-xs font-semibold text-emerald-600 hover:text-emerald-800 bg-emerald-50 border border-emerald-200 px-2.5 py-1 rounded-lg"
                          disabled={campaign.status === 'sending'}>
                          🚀 Send
                        </button>
                        <button onClick={() => { setEditingCampaign(campaign); setFormOpen(true); }}
                          className="text-xs font-semibold text-slate-600 hover:text-slate-800">Edit</button>
                        <button onClick={() => setDeleteTarget(campaign)}
                          className="text-xs font-semibold text-red-600 hover:text-red-800">Delete</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Create/Edit Modal */}
      <Modal isOpen={formOpen} onClose={() => { setFormOpen(false); setEditingCampaign(null); }}
        title={editingCampaign ? `Edit: ${editingCampaign.name}` : 'Create Campaign'} size="lg">
        <CampaignForm campaign={editingCampaign} lists={lists}
          onSave={handleSave} onCancel={() => { setFormOpen(false); setEditingCampaign(null); }} />
      </Modal>

      {/* Delete Confirm */}
      <Modal isOpen={!!deleteTarget} onClose={() => setDeleteTarget(null)} title="Delete Campaign" size="sm">
        <div className="space-y-4">
          <p className="text-sm text-slate-600">Delete <strong>"{deleteTarget?.name}"</strong>? This cannot be undone.</p>
          <div className="flex gap-3">
            <Button variant="danger" onClick={handleDelete}>Delete</Button>
            <Button variant="secondary" onClick={() => setDeleteTarget(null)}>Cancel</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}