import React, { useState, useEffect } from 'react';
import { Mail, Send, ToggleLeft, ToggleRight, FileDown, RefreshCw, Trash2 } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

export default function NewsletterManager() {
  const [subscribers, setSubscribers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [campaign, setCampaign] = useState({
    subject: '',
    htmlContent: '',
  });

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

  const fetchSubscribers = async () => {
    setLoading(true);
    try {
      const res = await api.get('/admin/newsletter/subscribers');
      setSubscribers(res.data?.data?.subscribers || []);
    } catch (err: any) {
      showToast('Failed to load subscribers list', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleToggleSubscriber = async (sub: any) => {
    try {
      await api.post(`/admin/newsletter/subscribers/${sub.id}/toggle`);
      showToast('Subscriber preference toggled successfully', 'success');
      fetchSubscribers();
    } catch (err: any) {
      showToast('Toggle failed', 'error');
    }
  };

  const handleDeleteSubscriber = async (id: string) => {
    if (!confirm('Are you sure you want to delete this subscriber?')) return;
    try {
      await api.delete(`/admin/newsletter/subscribers/${id}`);
      showToast('Subscriber deleted successfully', 'success');
      fetchSubscribers();
    } catch (err: any) {
      showToast('Delete failed', 'error');
    }
  };

  const handleSendCampaign = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!campaign.subject || !campaign.htmlContent) return;

    try {
      const res = await api.post('/admin/newsletter/campaign', campaign);
      showToast(res.data?.message || 'Campaign successfully dispatched!', 'success');
      setCampaign({ subject: '', htmlContent: '' });
    } catch (err: any) {
      showToast('Failed to send campaign', 'error');
    }
  };

  const handleExportCSV = () => {
    const csvContent =
      'data:text/csv;charset=utf-8,' +
      ['Email,Name,Status,SubscribedDate']
        .concat(
          subscribers.map((s) => `"${s.email}","${s.name || ''}","${s.isActive ? 'Active' : 'Inactive'}","${s.createdAt}"`)
        )
        .join('\n');

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'newsletter_subscribers.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-6 sm:p-8 space-y-8 shadow-sm">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-100 dark:border-zinc-800 pb-5">
        <div>
          <h2 className="text-xl font-extrabold flex items-center gap-2">
            <Mail className="w-5.5 h-5.5 text-[#701a08]" /> Newsletter & Readers Campaigns
          </h2>
          <p className="text-xs text-zinc-500 mt-0.5">
            Monitor Mailchimp/SendGrid subscription syncs, compile campaign drafts, and export lists.
          </p>
        </div>

        <div className="flex gap-2 self-start sm:self-center">
          <button
            onClick={handleExportCSV}
            className="px-3.5 py-2 rounded-xl bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-bold flex items-center gap-1.5 shadow-sm"
          >
            <FileDown className="w-4 h-4" /> Export CSV
          </button>
          <button
            onClick={fetchSubscribers}
            className="p-2 rounded-xl bg-zinc-50 dark:bg-zinc-800 hover:bg-zinc-100 text-zinc-600 dark:text-zinc-300 border border-zinc-200 dark:border-zinc-700"
          >
            <RefreshCw className="w-4 h-4" />
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left Side: Create/Dispatch Campaign Form */}
        <form onSubmit={handleSendCampaign} className="space-y-4 text-xs font-semibold">
          <h3 className="font-extrabold text-sm border-b pb-2">Compile Campaign Draft</h3>

          <div>
            <label className="text-zinc-500 block mb-1">Campaign Subject Line</label>
            <input
              type="text"
              required
              value={campaign.subject}
              onChange={(e) => setCampaign({ ...campaign, subject: e.target.value })}
              placeholder="e.g. Rare Sanskrit Manuscripts New Release!"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">HTML Campaign Content</label>
            <textarea
              required
              rows={6}
              value={campaign.htmlContent}
              onChange={(e) => setCampaign({ ...campaign, htmlContent: e.target.value })}
              placeholder="<div style='color: #701a08'>Explore our Sanskrit scrolls shelves...</div>"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
            />
          </div>

          <button
            type="submit"
            className="w-full py-3 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold flex items-center justify-center gap-1.5 shadow-md"
          >
            <Send className="w-4 h-4" /> Send Campaign
          </button>
        </form>

        {/* Right Side: Subscribers List */}
        <div className="lg:col-span-2 overflow-x-auto border border-zinc-200 dark:border-zinc-800 rounded-2xl">
          <table className="w-full text-xs font-semibold text-left">
            <thead className="bg-zinc-50 dark:bg-zinc-850 border-b border-zinc-200 dark:border-zinc-800 text-[10px] uppercase font-bold text-zinc-400">
              <tr>
                <th className="p-4">Email</th>
                <th className="p-4">Subscribed Date</th>
                <th className="p-4">Sync preference</th>
                <th className="p-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {subscribers.map((s) => (
                <tr key={s.id} className="border-b border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50/50">
                  <td className="p-4 font-mono font-bold text-zinc-900 dark:text-zinc-100">{s.email}</td>
                  <td className="p-4 text-zinc-500 font-mono">{new Date(s.createdAt).toLocaleDateString()}</td>
                  <td className="p-4">
                    <button
                      onClick={() => handleToggleSubscriber(s)}
                      className="text-zinc-500 hover:text-[#701a08]"
                    >
                      {s.isActive ? (
                        <ToggleRight className="w-8 h-8 text-green-600" />
                      ) : (
                        <ToggleLeft className="w-8 h-8 text-zinc-450" />
                      )}
                    </button>
                  </td>
                  <td className="p-4">
                    <button
                      onClick={() => handleDeleteSubscriber(s.id)}
                      className="p-1.5 rounded bg-red-50 hover:bg-red-100 text-red-600"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}