page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { TextStyle } from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
import { Link as LinkExtension } from "@tiptap/extension-link";
import { Image } from "@tiptap/extension-image";
import { TextAlign } from "@tiptap/extension-text-align";
import { Underline } from "@tiptap/extension-underline";
import { Highlight } from "@tiptap/extension-highlight";
 
interface Customer {
  f100: number; // Customer ID
  f101: string; // Name
  f115: string; // Email
  f210?: number; // Marketing preference (6=opt-out, 1=opt-in)
  f213?: number; // External flags
  f501?: number; // Set ID
  fSend?: boolean; // Should send to this customer
  fEmailBad?: boolean; // Email validation failed
}
 
type WizardStep = 1 | 2 | 3 | 4;
 
export default function BulkEmailPage() {
  const [currentStep, setCurrentStep] = useState<WizardStep>(1);
  const [emailSubject, setEmailSubject] = useState("");
  const [emailBody, setEmailBody] = useState("<p>Insert your email message here</p>");
  const [testEmail, setTestEmail] = useState("");
  const [testStatus, setTestStatus] = useState("");
  
  // Dropdown states for toolbar
  const [showHeadingMenu, setShowHeadingMenu] = useState(false);
  const [showAlignMenu, setShowAlignMenu] = useState(false);
  
  // Initialize Tiptap editor
  const editor = useEditor({
    extensions: [
      StarterKit,
      TextStyle,
      Color,
      Underline,
      Highlight.configure({ multicolor: true }),
      TextAlign.configure({
        types: ['heading', 'paragraph'],
      }),
      LinkExtension.configure({
        openOnClick: false,
      }),
      Image.configure({
        inline: true,
        allowBase64: true,
      }),
    ],
    content: emailBody,
    onUpdate: ({ editor }) => {
      setEmailBody(editor.getHTML());
    },
    immediatelyRender: false, // Prevent SSR hydration mismatch
  });
  
  // Customer selection
  const [selectedCustomers, setSelectedCustomers] = useState<Customer[]>([]);
  const [allCustomers, setAllCustomers] = useState(false);
  const [selectedSet, setSelectedSet] = useState(0);
  const [removeDuplicates, setRemoveDuplicates] = useState(true);
  const [dropBadEmails, setDropBadEmails] = useState(true);
  const [removeOptOut, setRemoveOptOut] = useState(true);
  const [removeExternalDeny, setRemoveExternalDeny] = useState(false);
  
  // Validation and status
  const [loading, setLoading] = useState(false);
  const [emailCount, setEmailCount] = useState(0);
  const [validationStatus, setValidationStatus] = useState("");
  const [acknowledged, setAcknowledged] = useState(false);
  const [sendStatus, setSendStatus] = useState("");
  const [previewHtml, setPreviewHtml] = useState("");
 
  useEffect(() => {
    if (allCustomers) {
      loadCustomers();
    }
  }, [allCustomers]);
 
  useEffect(() => {
    calculateEmailCount();
  }, [selectedCustomers, removeDuplicates, dropBadEmails, removeOptOut, removeExternalDeny]);
 
  useEffect(() => {
    // Generate preview with debouncing
    const timer = setTimeout(() => {
      if (emailBody && emailBody !== "Insert your email message here") {
        generatePreview();
      }
    }, 1000);
    return () => clearTimeout(timer);
  }, [emailBody]);
 
  const loadCustomers = async () => {
    try {
      setLoading(true);
      setValidationStatus("Loading customers...");
      
      const response = await fetch("/api/v1/customers?fields=f115,f100,f101,f210,f213");
      
      if (!response.ok) {
        throw new Error(`API error: ${response.status}`);
      }
      
      const contentType = response.headers.get("content-type");
      if (!contentType || !contentType.includes("application/json")) {
        console.error("API endpoint not implemented yet");
        setValidationStatus("⚠️ Customer API endpoint not yet implemented");
        setSelectedCustomers([]);
        return;
      }
      
      const data = await response.json();
      
      if (data.success && data.data?.DATS) {
        const customers = Array.isArray(data.data.DATS) ? data.data.DATS : [data.data.DATS];
        
        // Initialize customer data
        const processedCustomers = customers.map((c: Customer) => ({
          ...c,
          fSend: true,
          fEmailBad: false,
        }));
        
        setSelectedCustomers(processedCustomers);
        
        // Validate email addresses
        validateEmails(processedCustomers);
      }
    } catch (error) {
      console.error("Error loading customers:", error);
      setValidationStatus("⚠️ Customer API not available - UI demonstration mode");
      // Set demo data for UI testing
      setSelectedCustomers([]);
    } finally {
      setLoading(false);
    }
  };
 
  const validateEmails = async (customers: Customer[]) => {
    try {
      setValidationStatus("⏳ Validating email addresses...");
      
      const emails = customers.map(c => c.f115).filter(e => e);
      
      const response = await fetch("/api/v1/email/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ emails }),
      });
      
      if (!response.ok) {
        console.log("Email validation API not available");
        setValidationStatus("⚠️ Email validation API not yet implemented - skipping validation");
        return;
      }
      
      const contentType = response.headers.get("content-type");
      if (!contentType || !contentType.includes("application/json")) {
        setValidationStatus("⚠️ Email validation API not yet implemented - skipping validation");
        return;
      }
      
      const data = await response.json();
      
      if (data.success && data.results) {
        let goodCount = 0;
        let badCount = 0;
        
        const updated = customers.map(customer => {
          const validation = data.results.find((r: any) => r.email === customer.f115);
          if (validation && validation.errorMask !== 0) {
            badCount++;
            return { ...customer, fEmailBad: true, fSend: !dropBadEmails };
          }
          goodCount++;
          return customer;
        });
        
        setSelectedCustomers(updated);
        setValidationStatus(`✅ ${goodCount} valid, ❌ ${badCount} invalid`);
      }
    } catch (error) {
      console.error("Email validation error:", error);
      setValidationStatus("Validation skipped");
    }
  };
 
  const calculateEmailCount = () => {
    const seen = new Set<string>();
    let count = 0;
    
    for (const customer of selectedCustomers) {
      if (!customer.fSend) continue;
      
      const email = customer.f115?.toLowerCase();
      if (!email) continue;
      
      // Check filters
      if (removeDuplicates && seen.has(email)) continue;
      if (dropBadEmails && customer.fEmailBad) continue;
      if (removeOptOut && customer.f210 === 6) continue;
      if (removeExternalDeny && customer.f213 && (customer.f213 & 2)) continue;
      
      seen.add(email);
      count++;
    }
    
    setEmailCount(count);
  };
 
  const generatePreview = async () => {
    try {
      const response = await fetch("/api/v1/email/preview", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ body: emailBody }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setPreviewHtml(emailBody);
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setPreviewHtml(data.preview);
      }
    } catch (error) {
      console.error("Preview error:", error);
      setPreviewHtml(emailBody);
    }
  };
 
  const sendTestEmail = async () => {
    if (!testEmail) {
      alert("Please enter an email address");
      return;
    }
    
    try {
      setLoading(true);
      const response = await fetch("/api/v1/email/send-test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          to: testEmail,
          subject: emailSubject,
          body: emailBody,
        }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setTestStatus(`⚠️ Email API not yet implemented - UI demonstration mode (would send to: ${testEmail})`);
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setTestStatus(`✅ Test email queued to ${testEmail}`);
      } else {
        setTestStatus("❌ Failed to send test");
      }
    } catch (error) {
      console.error("Test email error:", error);
      setTestStatus("⚠️ Email API not available");
    } finally {
      setLoading(false);
    }
  };
 
  const sendBulkEmail = async () => {
    if (!acknowledged) {
      alert("Please acknowledge the legal requirements");
      return;
    }
    
    try {
      setLoading(true);
      setSendStatus("Preparing emails...");
      
      // Get final recipient list
      const recipients: string[] = [];
      const seen = new Set<string>();
      
      for (const customer of selectedCustomers) {
        if (!customer.fSend) continue;
        
        const email = customer.f115?.toLowerCase();
        if (!email) continue;
        
        if (removeDuplicates && seen.has(email)) continue;
        if (dropBadEmails && customer.fEmailBad) continue;
        if (removeOptOut && customer.f210 === 6) continue;
        if (removeExternalDeny && customer.f213 && (customer.f213 & 2)) continue;
        
        recipients.push(customer.f115);
        seen.add(email);
      }
      
      const response = await fetch("/api/v1/email/send-bulk", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          subject: emailSubject,
          body: emailBody,
          recipients,
        }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setSendStatus("⚠️ Bulk email API not yet implemented - UI demonstration mode");
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setSendStatus(`✅ Successfully queued ${recipients.length} emails!`);
      } else {
        setSendStatus("❌ Failed to queue emails");
      }
    } catch (error) {
      console.error("Bulk send error:", error);
      setSendStatus("⚠️ Email API not available");
    } finally {
      setLoading(false);
    }
  };
 
  const insertField = (field: string) => {
    setEmailBody(prev => prev + field);
  };
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Link href="/marketing" className="text-gray-600 hover:text-gray-800">Marketing</Link>
            <span className="text-gray-400">/</span>
            <Link href="/marketing/messaging" className="text-gray-600 hover:text-gray-800">Email & Interfaces</Link>
            <span className="text-gray-400">/</span>
            <span className="text-gray-900 font-semibold">Send Bulk Email</span>
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Send Bulk Email</h1>
          <p className="text-gray-600 text-sm">
            Create and send an email to multiple customers
          </p>
        </div>
 
        {/* Warning Box */}
        <div className="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
          <div className="flex items-start">
            <span className="text-2xl mr-3">⚠️</span>
            <div className="text-sm text-yellow-800">
              <p className="font-semibold mb-1">Extended Functionality</p>
              <p>Bulk email sending is covered by law in many countries. Ensure compliance before sending.</p>
            </div>
          </div>
        </div>
 
        {/* Step Navigation */}
        <div className="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
          <div className="flex">
            {[1, 2, 3, 4].map((step) => (
              <button
                key={step}
                onClick={() => setCurrentStep(step as WizardStep)}
                className={`flex-1 px-6 py-5 text-center font-semibold transition-all relative ${
                  currentStep === step
                    ? "bg-[#00946b] text-white shadow-lg z-10"
                    : currentStep > step
                    ? "bg-green-50 text-green-700 hover:bg-green-100"
                    : "bg-gray-100 text-gray-500 hover:bg-gray-200"
                }`}
              >
                <div className="flex flex-col items-center gap-2">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                    currentStep === step
                      ? "bg-white text-[#00946b]"
                      : currentStep > step
                      ? "bg-green-600 text-white"
                      : "bg-gray-300 text-gray-600"
                  }`}>
                    {currentStep > step ? "✓" : step}
                  </div>
                  <div className="text-sm">
                    {step === 1 ? "Create Email" :
                     step === 2 ? "Test Email" :
                     step === 3 ? "Select Recipients" :
                     "Finish & Send"}
                  </div>
                </div>
                {/* Progress connector line */}
                {step < 4 && (
                  <div className={`absolute top-1/2 right-0 w-full h-0.5 -translate-y-1/2 ${
                    currentStep > step ? "bg-green-600" : "bg-gray-300"
                  } -z-10`} style={{ width: 'calc(100% - 48px)', left: '24px' }} />
                )}
              </button>
            ))}
          </div>
 
          <div className="p-6">
            {/* Step 1: Create Email */}
            {currentStep === 1 && (
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Subject</label>
                  <input
                    type="text"
                    value={emailSubject}
                    onChange={(e) => setEmailSubject(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                    placeholder="Enter email subject"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Email Content</label>
                  
                  {/* Tiptap Toolbar */}
                  {editor && (
                    <div className="border border-gray-300 rounded-t bg-white p-2 flex flex-wrap items-center gap-1.5 shadow-sm">
                      
                      {/* Heading Dropdown */}
                      <div className="relative">
                        <button
                          type="button"
                          onClick={() => setShowHeadingMenu(!showHeadingMenu)}
                          className="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 flex items-center gap-1 min-w-[100px]"
                          title="Text Style"
                        >
                          <span className="flex-1 text-left">
                            {editor.isActive('heading', { level: 1 }) ? 'Heading 1' :
                             editor.isActive('heading', { level: 2 }) ? 'Heading 2' :
                             editor.isActive('heading', { level: 3 }) ? 'Heading 3' :
                             'Paragraph'}
                          </span>
                          <span className="text-xs">▼</span>
                        </button>
                        {showHeadingMenu && (
                          <div className="absolute top-full left-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 min-w-[160px]">
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().setParagraph().run(); setShowHeadingMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${!editor.isActive('heading') ? 'bg-gray-50' : ''}`}
                            >
                              Paragraph
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().toggleHeading({ level: 1 }).run(); setShowHeadingMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-lg font-bold hover:bg-gray-100 ${editor.isActive('heading', { level: 1 }) ? 'bg-gray-50' : ''}`}
                            >
                              Heading 1
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().toggleHeading({ level: 2 }).run(); setShowHeadingMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-base font-semibold hover:bg-gray-100 ${editor.isActive('heading', { level: 2 }) ? 'bg-gray-50' : ''}`}
                            >
                              Heading 2
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().toggleHeading({ level: 3 }).run(); setShowHeadingMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm font-semibold hover:bg-gray-100 ${editor.isActive('heading', { level: 3 }) ? 'bg-gray-50' : ''}`}
                            >
                              Heading 3
                            </button>
                          </div>
                        )}
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Text Formatting Group */}
                      <div className="flex gap-0.5">
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleBold().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('bold') ? 'bg-gray-200' : ''}`}
                          title="Bold (Ctrl+B)"
                        >
                          <strong>B</strong>
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleItalic().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('italic') ? 'bg-gray-200' : ''}`}
                          title="Italic (Ctrl+I)"
                        >
                          <em>I</em>
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleUnderline().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('underline') ? 'bg-gray-200' : ''}`}
                          title="Underline (Ctrl+U)"
                        >
                          <u>U</u>
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleStrike().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('strike') ? 'bg-gray-200' : ''}`}
                          title="Strikethrough"
                        >
                          <s>S</s>
                        </button>
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Color & Highlight */}
                      <input
                        type="color"
                        onChange={(e) => editor.chain().focus().setColor(e.target.value).run()}
                        value={editor.getAttributes('textStyle').color || '#000000'}
                        className="w-7 h-7 border border-gray-300 rounded cursor-pointer"
                        title="Text Color"
                      />
                      <button
                        type="button"
                        onClick={() => editor.chain().focus().toggleHighlight({ color: '#fff59d' }).run()}
                        className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('highlight') ? 'bg-yellow-200' : ''}`}
                        title="Highlight"
                      >
                        🖍️
                      </button>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Alignment Dropdown */}
                      <div className="relative">
                        <button
                          type="button"
                          onClick={() => setShowAlignMenu(!showAlignMenu)}
                          className="px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 flex items-center gap-1"
                          title="Text Alignment"
                        >
                          <span>
                            {editor.isActive({ textAlign: 'center' }) ? '⬌' :
                             editor.isActive({ textAlign: 'right' }) ? '➡️' :
                             editor.isActive({ textAlign: 'justify' }) ? '⬍' :
                             '⬅️'}
                          </span>
                          <span className="text-xs">▼</span>
                        </button>
                        {showAlignMenu && (
                          <div className="absolute top-full left-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 min-w-[140px]">
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().setTextAlign('left').run(); setShowAlignMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 ${editor.isActive({ textAlign: 'left' }) ? 'bg-gray-50' : ''}`}
                            >
                              <span>⬅️</span> Align Left
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().setTextAlign('center').run(); setShowAlignMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 ${editor.isActive({ textAlign: 'center' }) ? 'bg-gray-50' : ''}`}
                            >
                              <span>⬌</span> Align Center
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().setTextAlign('right').run(); setShowAlignMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 ${editor.isActive({ textAlign: 'right' }) ? 'bg-gray-50' : ''}`}
                            >
                              <span>➡️</span> Align Right
                            </button>
                            <button
                              type="button"
                              onClick={() => { editor.chain().focus().setTextAlign('justify').run(); setShowAlignMenu(false); }}
                              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 ${editor.isActive({ textAlign: 'justify' }) ? 'bg-gray-50' : ''}`}
                            >
                              <span>⬍</span> Justify
                            </button>
                          </div>
                        )}
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Lists & Indent */}
                      <div className="flex gap-0.5">
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleBulletList().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('bulletList') ? 'bg-gray-200' : ''}`}
                          title="Bullet List"
                        >
                          •
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleOrderedList().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('orderedList') ? 'bg-gray-200' : ''}`}
                          title="Numbered List"
                        >
                          1.
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
                          disabled={!editor.can().sinkListItem('listItem')}
                          className="px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
                          title="Indent"
                        >
                          →
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().liftListItem('listItem').run()}
                          disabled={!editor.can().liftListItem('listItem')}
                          className="px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
                          title="Outdent"
                        >
                          ←
                        </button>
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Quote & Code */}
                      <div className="flex gap-0.5">
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleBlockquote().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('blockquote') ? 'bg-gray-200' : ''}`}
                          title="Blockquote"
                        >
                          "
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('codeBlock') ? 'bg-gray-200' : ''}`}
                          title="Code Block"
                        >
                          {'</>'}
                        </button>
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Insert Group */}
                      <div className="flex gap-0.5">
                        <button
                          type="button"
                          onClick={() => {
                            const url = window.prompt('Enter URL:');
                            if (url) {
                              editor.chain().focus().setLink({ href: url }).run();
                            }
                          }}
                          className={`px-2.5 py-1.5 text-sm rounded hover:bg-gray-100 ${editor.isActive('link') ? 'bg-gray-200' : ''}`}
                          title="Insert Link"
                        >
                          🔗
                        </button>
                        <button
                          type="button"
                          onClick={() => {
                            const url = window.prompt('Enter image URL:');
                            if (url) {
                              editor.chain().focus().setImage({ src: url }).run();
                            }
                          }}
                          className="px-2.5 py-1.5 text-sm rounded hover:bg-gray-100"
                          title="Insert Image"
                        >
                          🖼️
                        </button>
                        <button
                          type="button"
                          onClick={() => editor.chain().focus().setHorizontalRule().run()}
                          className="px-2.5 py-1.5 text-sm rounded hover:bg-gray-100"
                          title="Horizontal Rule"
                        >
                          ―
                        </button>
                      </div>
 
                      <div className="w-px h-6 bg-gray-300"></div>
 
                      {/* Clear Formatting */}
                      <button
                        type="button"
                        onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}
                        className="px-2.5 py-1.5 text-xs rounded hover:bg-gray-100 text-gray-600"
                        title="Clear Formatting"
                      >
                        Clear
                      </button>
                    </div>
                  )}
                  
                  {/* Tiptap Editor Content */}
                  <div className="border border-gray-300 rounded-b bg-white">
                    <EditorContent 
                      editor={editor} 
                      className="prose max-w-none p-4 min-h-[300px] focus:outline-none"
                    />
                  </div>
                </div>
 
                <div className="flex gap-4 flex-wrap">
                  <div>
                    <p className="text-sm font-medium mb-2" style={{ color: 'var(--text)' }}>Insert Customer</p>
                    <button onClick={() => insertField("%customer.name%")} className="px-3 py-1 bg-brand/10 text-brand rounded text-sm mr-2">Name</button>
                    <button onClick={() => insertField("%customer.cid%")} className="px-3 py-1 bg-brand/10 text-brand rounded text-sm">ID#</button>
                  </div>
                  <div>
                    <p className="text-sm font-medium mb-2" style={{ color: 'var(--text)' }}>Insert Account</p>
                    <button onClick={() => insertField("%customer.account.name%")} className="px-3 py-1 bg-success/10 text-success rounded text-sm mr-2">Name</button>
                    <button onClick={() => insertField("%customer.account.balance%")} className="px-3 py-1 bg-success/10 text-success rounded text-sm">Balance</button>
                  </div>
                </div>
 
                <div className="mt-6 border border-gray-300 rounded p-4">
                  <h3 className="font-semibold text-gray-900 mb-2">Preview</h3>
                  <div
                    className="prose max-w-none"
                    dangerouslySetInnerHTML={{ __html: previewHtml || emailBody }}
                  />
                </div>
 
                <button
                  onClick={() => setCurrentStep(2)}
                  className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007555]"
                >
                  Next: Test Email
                </button>
              </div>
            )}
 
            {/* Step 2: Test Email */}
            {currentStep === 2 && (
              <div className="space-y-6">
                <p className="text-gray-700">
                  Send a test email to verify the content and formatting before sending to all recipients.
                </p>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Test Email Address
                  </label>
                  <input
                    type="email"
                    value={testEmail}
                    onChange={(e) => setTestEmail(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                    placeholder="your.email@example.com"
                  />
                </div>
 
                <button
                  onClick={sendTestEmail}
                  disabled={loading}
                  className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
                >
                  {loading ? "Sending..." : "Send Test Now"}
                </button>
 
                {testStatus && (
                  <div className="p-3 bg-gray-100 rounded text-sm">{testStatus}</div>
                )}
 
                <div className="flex gap-3">
                  <button
                    onClick={() => setCurrentStep(1)}
                    className="px-6 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
                  >
                    Back
                  </button>
                  <button
                    onClick={() => setCurrentStep(3)}
                    className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007555]"
                  >
                    Next: Select Recipients
                  </button>
                </div>
              </div>
            )}
 
            {/* Step 3: Select Recipients */}
            {currentStep === 3 && (
              <div className="space-y-6">
                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 text-sm text-blue-800">
                  <p className="font-semibold">Tip:</p>
                  <p>This system is designed to create bulk individual customized emails. If you want to manually type addresses, use your email program with BCC.</p>
                </div>
 
                <div>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={allCustomers}
                      onChange={(e) => setAllCustomers(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm text-gray-700">Send to All Customers</span>
                  </label>
                </div>
 
                <div className="space-y-3">
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={removeDuplicates}
                      onChange={(e) => setRemoveDuplicates(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm text-gray-700">Remove Duplicate Addresses</span>
                  </label>
 
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={dropBadEmails}
                      onChange={(e) => setDropBadEmails(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm text-gray-700">Ignore Invalid Email Addresses</span>
                  </label>
 
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={removeOptOut}
                      onChange={(e) => setRemoveOptOut(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm text-gray-700">Remove Opt-Out Customers</span>
                  </label>
 
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={removeExternalDeny}
                      onChange={(e) => setRemoveExternalDeny(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm text-gray-700">Remove "Do Not Use External Agencies"</span>
                  </label>
                </div>
 
                <div className="p-4 bg-gray-100 rounded">
                  <p className="text-lg font-semibold text-gray-900">
                    Probable Recipients: <span className="text-2xl text-[#00946b]">{emailCount}</span>
                  </p>
                  {validationStatus && (
                    <p className="text-sm text-gray-600 mt-2">{validationStatus}</p>
                  )}
                </div>
 
                <div className="flex gap-3">
                  <button
                    onClick={() => setCurrentStep(2)}
                    className="px-6 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
                  >
                    Back
                  </button>
                  <button
                    onClick={() => setCurrentStep(4)}
                    className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007555]"
                  >
                    Next: Finish and Send
                  </button>
                </div>
              </div>
            )}
 
            {/* Step 4: Finish and Send */}
            {currentStep === 4 && (
              <div className="space-y-6">
                <div className="bg-red-50 border-l-4 border-red-400 p-4 text-sm text-red-800">
                  <p>The emails will be generated and sent individually to each user. If you are sending a large number of emails, your internet provider or email systems may flag them as spam.</p>
                  <p className="mt-2">Email is not a guaranteed delivery mechanism. A percentage of recipients may never see this email.</p>
                </div>
 
                <label className="flex items-start gap-3">
                  <input
                    type="checkbox"
                    checked={acknowledged}
                    onChange={(e) => setAcknowledged(e.target.checked)}
                    className="mt-1 rounded"
                  />
                  <span className="text-sm text-gray-700">
                    I am aware that bulk emailing and/or contents is covered by law in many countries and I have verified this email is permitted.
                  </span>
                </label>
 
                <button
                  onClick={sendBulkEmail}
                  disabled={!acknowledged || loading}
                  className="px-8 py-3 bg-[#00946b] text-white rounded-lg text-lg font-semibold hover:bg-[#007555] disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {loading ? "Sending..." : "Start Sending Now"}
                </button>
 
                {sendStatus && (
                  <div className="p-4 bg-gray-100 rounded text-lg font-medium">{sendStatus}</div>
                )}
 
                <div className="mt-6 border border-gray-300 rounded p-4">
                  <h3 className="font-semibold text-gray-900 mb-2">Email Template:</h3>
                  <div className="text-sm text-gray-700">
                    <p><strong>Subject:</strong> {emailSubject}</p>
                    <div className="mt-2 border-t pt-2" dangerouslySetInnerHTML={{ __html: emailBody }} />
                  </div>
                </div>
 
                <button
                  onClick={() => setCurrentStep(3)}
                  className="px-6 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
                >
                  Back
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}