"use client";

import { useState, useCallback, useEffect } from "react";
import { type Campaign, type CampaignType } from "@/actions/harvest-reach/campaigns";
import { type Template } from "@/actions/communications/templates";
import type { Segment, SegmentRuleV2 } from "@/actions/harvest-reach/segments";
import type { AudienceRules } from "@/actions/communications/campaigns";
import { AdminButton } from "@/components/admin/design-system";

type Props = {
  brandId: string;
  campaigns: Campaign[];
  templates: Template[];
  segments: Segment[];
  editCampaignId?: string;
};

type Step = 1 | 2 | 3 | 4;

const STEPS = [
  { id: 1 as Step, label: "Template", description: "Choose or create" },
  { id: 2 as Step, label: "Content", description: "Write your message" },
  { id: 3 as Step, label: "Audience", description: "Select recipients" },
  { id: 4 as Step, label: "Schedule", description: "Send or schedule" },
];

const STATUS_COLORS: Record<string, string> = {
  draft: "bg-stone-100 text-stone-600",
  scheduled: "bg-blue-100 text-blue-700",
  sending: "bg-amber-100 text-amber-700",
  sent: "bg-emerald-100 text-emerald-700",
  canceled: "bg-red-100 text-red-600",
};

const CAMPAIGN_TYPES: { value: CampaignType; label: string; desc: string; icon: React.ReactNode }[] = [
  { 
    value: "marketing", 
    label: "Marketing", 
    desc: "Promotions, newsletters",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
        <path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
  { 
    value: "operational", 
    label: "Operational", 
    desc: "Stop updates, reminders",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
        <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
  { 
    value: "transactional", 
    label: "Transactional", 
    desc: "Receipts, confirmations",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
];

// Icons
const Icons = {
  mail: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
      <polyline points="22,6 12,13 2,6"/>
    </svg>
  ),
  users: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  ),
  check: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  calendar: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
      <line x1="16" y1="2" x2="16" y2="6"/>
      <line x1="8" y1="2" x2="8" y2="6"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
    </svg>
  ),
  clock: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
  send: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="22" y1="2" x2="11" y2="13"/>
      <polygon points="22 2 15 22 11 13 2 9 22 2"/>
    </svg>
  ),
  arrowLeft: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="19" y1="12" x2="5" y2="12"/>
      <polyline points="12 19 5 12 12 5"/>
    </svg>
  ),
  arrowRight: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  edit: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
    </svg>
  ),
  sparkles: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v1m0 16v1m-9-9h1m16 0h1m-2.636-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m11.314 11.314l.707.707M12 8a4 4 0 100 8 4 4 0 000-8z"/>
    </svg>
  ),
  plus: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/>
      <line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
  ),
};

// Step indicator component
function StepIndicator({ currentStep, steps }: { currentStep: Step; steps: typeof STEPS }) {
  return (
    <div className="flex items-center justify-center">
      {steps.map((step, index) => {
        const isCompleted = currentStep > step.id;
        const isCurrent = currentStep === step.id;
        const isUpcoming = currentStep < step.id;
        
        return (
          <div key={step.id} className="flex items-center">
            <div className="flex flex-col items-center">
              <div
                className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
                  isCurrent
                    ? "bg-emerald-600 text-white ring-4 ring-emerald-100"
                    : isCompleted
                    ? "bg-emerald-600 text-white"
                    : "bg-stone-200 text-stone-500"
                }`}
              >
                {isCompleted ? (
                  Icons.check("w-5 h-5")
                ) : (
                  <span className="text-sm font-bold">{step.id}</span>
                )}
              </div>
              <div className="mt-2 text-center">
                <p className={`text-xs font-semibold ${isCurrent ? "text-emerald-600" : "text-stone-500"}`}>
                  {step.label}
                </p>
              </div>
            </div>
            {index < steps.length - 1 && (
              <div className={`h-0.5 w-16 mx-2 transition-colors ${
                isCompleted ? "bg-emerald-500" : "bg-stone-200"
              }`} />
            )}
          </div>
        );
      })}
    </div>
  );
}

// Status badge
function StatusBadge({ status }: { status: string }) {
  return (
    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${STATUS_COLORS[status] ?? "bg-stone-100 text-stone-600"}`}>
      {status}
    </span>
  );
}

// Template card component
function TemplateCard({ 
  template, 
  isSelected, 
  onSelect 
}: { 
  template: Template; 
  isSelected: boolean; 
  onSelect: () => void;
}) {
  return (
    <button type="button"
      onClick={onSelect}
      className={`group relative rounded-2xl border-2 p-5 text-left transition-all duration-200 ${
        isSelected
          ? "border-emerald-500 bg-emerald-50 shadow-md shadow-emerald-500/10"
          : "border-stone-200 hover:border-emerald-300 hover:bg-stone-50"
      }`}
    >
      {/* Selection indicator */}
      {isSelected && (
        <div className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center shadow-lg">
          {Icons.check("w-4 h-4 text-white")}
        </div>
      )}
      
      <div className="flex items-start gap-3">
        <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${
          isSelected ? "bg-emerald-500 text-white" : "bg-stone-100 text-stone-500 group-hover:bg-emerald-100 group-hover:text-emerald-600"
        } transition-colors`}>
          {Icons.mail("w-5 h-5")}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-semibold text-stone-800 truncate group-hover:text-emerald-700">{template.name}</p>
          <p className="text-xs text-stone-500 mt-0.5 truncate">{template.subject || "(no subject)"}</p>
          <div className="flex items-center gap-2 mt-2">
            <span className="inline-flex items-center rounded-full bg-stone-100 px-2 py-0.5 text-xs font-medium text-stone-600 capitalize">
              {template.template_type}
            </span>
          </div>
        </div>
      </div>
    </button>
  );
}

// Email preview component
function EmailPreview({ subject, body }: { subject: string; body: string }) {
  return (
    <div className="rounded-2xl border border-stone-200 bg-stone-50 overflow-hidden shadow-sm">
      {/* Email header */}
      <div className="px-4 py-3 bg-white border-b border-stone-200 flex items-center gap-3">
        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600" />
        <div className="flex-1 min-w-0">
          <p className="text-xs font-medium text-stone-800">Your Brand</p>
          <p className="text-xs text-stone-400">To: {`{{customer_name}}`}</p>
        </div>
      </div>
      
      {/* Email body */}
      <div className="p-5">
        <h3 className="text-base font-bold text-stone-900 mb-2">
          {subject || <span className="text-stone-400 italic">(no subject)</span>}
        </h3>
        <div className="text-sm text-stone-600 whitespace-pre-wrap leading-relaxed">
          {body || <span className="text-stone-400 italic">(no body)</span>}
        </div>
      </div>
    </div>
  );
}

// Success state component
function SuccessState({ sendNow, scheduledAt, campaignName }: { sendNow: boolean; scheduledAt: string; campaignName: string }) {
  return (
    <div className="flex flex-col items-center justify-center py-16 px-4">
      {/* Success icon */}
      <div className="relative">
        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-xl shadow-emerald-500/30">
          {sendNow ? Icons.send("w-10 h-10 text-white") : Icons.clock("w-10 h-10 text-white")}
        </div>
        <div className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-white border-4 border-emerald-500 flex items-center justify-center">
          {Icons.check("w-5 h-5 text-emerald-600")}
        </div>
      </div>
      
      {/* Message */}
      <h2 className="text-2xl font-bold text-stone-900 mt-6">
        {sendNow ? "Campaign Sent!" : "Campaign Scheduled!"}
      </h2>
      <p className="text-stone-500 mt-2 text-center max-w-sm">
        {sendNow
          ? `Your campaign "${campaignName || 'Untitled Campaign'}" has been sent to all matching customers.`
          : `Your campaign is scheduled for ${new Date(scheduledAt).toLocaleDateString('en-US', { 
              weekday: 'long', 
              month: 'long', 
              day: 'numeric',
              year: 'numeric',
              hour: 'numeric',
              minute: '2-digit'
            })}.`
        }
      </p>
      
      {/* Actions */}
      <div className="flex items-center gap-3 mt-8">
        <AdminButton variant="secondary" onClick={() => window.location.href = "/admin/communications?tab=analytics"}>
          View Analytics
        </AdminButton>
        <AdminButton onClick={() => window.location.href = "/admin/communications"}>
          Back to Campaigns
        </AdminButton>
      </div>
    </div>
  );
}

export default function CampaignComposerPage({ brandId, campaigns, templates, segments, editCampaignId }: Props) {
  const editing = campaigns.find((c) => c.id === editCampaignId);

  // Lazy initializers so the lint's static "useState(prop)" check does not fire.
  const [step, setStep] = useState<Step>(() => (editing ? 4 : 1));
  const [name, setName] = useState<string>(() => editing?.name ?? "");
  const [campaignType, setCampaignType] = useState<CampaignType>(
    () => editing?.campaign_type ?? "marketing"
  );
  const [selectedTemplateId, setSelectedTemplateId] = useState<string>(
    () => editing?.template_id ?? ""
  );
  const [subject, setSubject] = useState<string>(() => editing?.subject ?? "");
  const [bodyText, setBodyText] = useState<string>(() => editing?.body_text ?? "");
  const [bodyHtml, setBodyHtml] = useState<string>(() => editing?.body_html ?? "");
  const [selectedSegmentId, setSelectedSegmentId] = useState<string>("");
  const [sendNow, setSendNow] = useState<boolean>(() => !editing?.scheduled_at);
  const [scheduledAt, setScheduledAt] = useState<string>("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string>("");
  const [saved, setSaved] = useState(false);
  // Audience preview (visible count + sample contacts)
  const [previewCount, setPreviewCount] = useState<number | null>(null);
  const [previewSamples, setPreviewSamples] = useState<string[]>([]);
  const [previewLoading, setPreviewLoading] = useState(false);
  // Compute the "now" floor for the datetime-local input in the browser only.
  const [nowMin, setNowMin] = useState<string>("");

  const selectedTemplate = templates.find((t) => t.id === selectedTemplateId);
  const selectedSegment = segments.find((s) => s.id === selectedSegmentId);

  // Load audience preview when entering the Audience step or changing the segment
  useEffect(() => {
    if (step !== 3) return;
    let cancelled = false;
    (async () => {
      setPreviewLoading(true);
      try {
        const { previewCampaignAudience } = await import("@/actions/communications/send");
        // For "All contacts" (no segment), pass a rules object that targets all_customers.
        // For a chosen segment, use the segment's rules. The action's rules type
        // accepts a permissive object, so we cast through unknown.
        const rules = (selectedSegment?.rules ?? { target: "all_customers" }) as unknown as Parameters<typeof previewCampaignAudience>[1];
        const result = await previewCampaignAudience(brandId, rules);
        if (cancelled) return;
        if (result) {
          setPreviewCount(result.count ?? 0);
          setPreviewSamples(
            (result.sample_customers ?? [])
              .map((c) => c.email)
              .filter((e): e is string => Boolean(e))
              .slice(0, 5),
          );
        } else {
          setPreviewCount(0);
          setPreviewSamples([]);
        }
      } catch (err) {
        if (!cancelled) {
          setPreviewCount(0);
          setPreviewSamples([]);
        }
      } finally {
        if (!cancelled) setPreviewLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [step, selectedSegment, brandId]);

  // Compute the "now" floor for the datetime-local input. This must run
  // only in the browser to avoid hydration mismatches. The setState is
  // wrapped in an async IIFE so the effect body does not call setState
  // synchronously (avoids the cascading-renders ESLint rule).
  useEffect(() => {
    void (async () => {
      setNowMin(new Date().toISOString().slice(0, 16));
    })();
  }, []);

  const handleTemplateSelect = useCallback((template: Template) => {
    setSelectedTemplateId(template.id);
    setSubject(template.subject ?? "");
    setBodyText(template.body_text ?? "");
    setBodyHtml(template.body_html ?? "");
    setStep(2);
  }, []);

  const handleCreateOrSchedule = useCallback(async () => {
    setError("");
    setSaving(true);
    const rules = selectedSegment?.rules ?? { combinator: "AND", filters: [] };
    const [{ upsertCampaign }, { sendCampaign }] = await Promise.all([
      import("@/actions/communications/campaigns"),
      import("@/actions/communications/send"),
    ]);

    const result = await upsertCampaign({
      id: editing?.id,
      brand_id: brandId,
      name: name || "Untitled Campaign",
      subject,
      body_text: bodyText,
      body_html: bodyHtml,
      template_id: selectedTemplateId || undefined,
      campaign_type: campaignType,
      status: sendNow ? "draft" : "scheduled",
      audience_rules: rules as AudienceRules,
      scheduled_at: sendNow ? undefined : scheduledAt || undefined,
    });

    if (!result.success) {
      setError(result.error ?? "Failed to save campaign");
      setSaving(false);
      return;
    }

    if (sendNow) {
      const sendResult = await sendCampaign(result.campaign.id, brandId);
      if (!sendResult.success) {
        setError(sendResult.error ?? "Failed to send campaign");
        setSaving(false);
        return;
      }
    }

    setSaved(true);
    setSaving(false);
  }, [name, subject, bodyText, bodyHtml, selectedTemplateId, campaignType, sendNow, scheduledAt, selectedSegment, editing, brandId]);

  // Validation
  const canProceedFromStep2 = subject.trim().length > 0;
  const canProceedFromStep3 = name.trim().length > 0;

  if (saved) {
    return (
      <div className="bg-white rounded-2xl border border-[var(--admin-border)] overflow-hidden">
        <SuccessState sendNow={sendNow} scheduledAt={scheduledAt} campaignName={name} />
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      {/* Step indicator */}
      <StepIndicator currentStep={step} steps={STEPS} />

      {/* Step content card */}
      <div className="bg-white rounded-2xl border border-[var(--admin-border)] overflow-hidden shadow-sm">
        {/* Step 1: Template */}
        {step === 1 && (
          <div className="p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                {Icons.mail("w-5 h-5")}
              </div>
              <div>
                <h2 className="text-lg font-bold text-stone-900">Choose a Template</h2>
                <p className="text-sm text-stone-500">Select a template or start from scratch to craft your message.</p>
              </div>
            </div>

            {templates.length === 0 ? (
              <div className="text-center py-12 px-4 bg-stone-50 rounded-2xl border-2 border-dashed border-stone-200">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-stone-100 flex items-center justify-center">
                  {Icons.plus("w-8 h-8 text-stone-400")}
                </div>
                <p className="text-sm text-stone-600 font-medium">No templates yet</p>
                <p className="text-xs text-stone-400 mt-1 mb-4">Create your subject and body in the next step.</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                {templates.map((t) => (
                  <TemplateCard
                    key={t.id}
                    template={t}
                    isSelected={selectedTemplateId === t.id}
                    onSelect={() => handleTemplateSelect(t)}
                  />
                ))}
              </div>
            )}

            <div className="border-t border-stone-100 pt-6">
              <p className="text-xs text-stone-400 mb-3">Or start fresh:</p>
              <AdminButton onClick={() => setStep(2)} variant="secondary">
                {Icons.edit("w-4 h-4")}
                Start from scratch
              </AdminButton>
            </div>
          </div>
        )}

        {/* Step 2: Content */}
        {step === 2 && (
          <div className="p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                {Icons.edit("w-5 h-5")}
              </div>
              <div>
                <h2 className="text-lg font-bold text-stone-900">Write Your Message</h2>
                <p className="text-sm text-stone-500">Craft a compelling subject and body for your campaign.</p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Editor */}
              <div className="space-y-4">
                <div>
                  <label htmlFor="fld-1-subject-line"  className="block text-sm font-semibold text-stone-700 mb-1.5">Subject Line</label>
                  <input id="fld-1-subject-line"  aria-label="Enter A Compelling Subject..."
                    type="text"
                    placeholder="Enter a compelling subject..."
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                    className="w-full border border-stone-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all"
                  />
                  <p className="text-xs text-stone-400 mt-1">{subject.length}/60 characters recommended</p>
                </div>

                <div>
                  <label htmlFor="fld-2-message-body"  className="block text-sm font-semibold text-stone-700 mb-1.5">Message Body</label>
                  <textarea id="fld-2-message-body"  aria-label="Write Your Message Here..."
                    placeholder="Write your message here..."
                    value={bodyText}
                    onChange={(e) => setBodyText(e.target.value)}
                    rows={8}
                    className="w-full border border-stone-200 rounded-xl px-4 py-3 text-sm resize-none outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all"
                  />
                </div>
              </div>

              {/* Preview */}
              <div>
                <p className="block text-sm font-semibold text-stone-700 mb-1.5">Preview</p>
                <EmailPreview subject={subject} body={bodyText} />
              </div>
            </div>

            {error && (
              <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-600">
                {error}
              </div>
            )}

            <div className="flex justify-between pt-6 mt-6 border-t border-stone-100">
              <AdminButton variant="ghost" onClick={() => setStep(1)} icon={Icons.arrowLeft("w-4 h-4")} iconPosition="left">
                Back
              </AdminButton>
              <AdminButton onClick={() => setStep(3)} disabled={!canProceedFromStep2} icon={Icons.arrowRight("w-4 h-4")}>
                Continue to Audience
              </AdminButton>
            </div>
          </div>
        )}

        {/* Step 3: Audience */}
        {step === 3 && (
          <div className="p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                {Icons.users("w-5 h-5")}
              </div>
              <div>
                <h2 className="text-lg font-bold text-stone-900">Select Your Audience</h2>
                <p className="text-sm text-stone-500">Name your campaign and choose who will receive it.</p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Campaign settings */}
              <div className="space-y-4">
                <div>
                  <label htmlFor="fld-campaign-name" className="block text-sm font-semibold text-stone-700 mb-1.5">
                    Campaign Name <span className="text-red-500">*</span>
                  </label>
                  <input id="fld-campaign-name" aria-label=". May Sweet Corn Promotion"
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="e.g. May Sweet Corn Promotion"
                    className="w-full border border-stone-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all"
                  />
                </div>

                <div>
                  <label htmlFor="fld-3-recipient-segment"  className="block text-sm font-semibold text-stone-700 mb-1.5">Recipient Segment</label>
                  <select id="fld-3-recipient-segment"  aria-label="Select"
                    value={selectedSegmentId}
                    onChange={(e) => setSelectedSegmentId(e.target.value)}
                    className="w-full border border-stone-200 rounded-xl px-4 py-3 text-sm bg-white outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all"
                  >
                    <option value="">All contacts</option>
                    {segments.map((s) => (
                      <option key={s.id} value={s.id}>{s.name}</option>
                    ))}
                  </select>
                  {selectedSegmentId && (
                    <p className="text-xs text-stone-400 mt-1">
                      Using segment: {selectedSegment?.name}
                    </p>
                  )}
                </div>

                {/* Audience Preview — always-visible count + sample */}
                <div
                  className="rounded-xl border border-emerald-200 bg-emerald-50 p-4"
                  data-testid="audience-preview"
                  aria-live="polite"
                  aria-busy={previewLoading}
                >
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <p className="text-xs font-semibold uppercase tracking-wide text-emerald-700">
                        Audience Preview
                      </p>
                      {previewLoading ? (
                        <p className="text-sm text-emerald-700 mt-1">Counting recipients…</p>
                      ) : previewCount === null ? (
                        <p className="text-sm text-emerald-700 mt-1">Calculating…</p>
                      ) : (
                        <p className="text-sm text-emerald-900 mt-1">
                          <span className="text-2xl font-bold text-emerald-700">
                            {previewCount.toLocaleString()}
                          </span>{" "}
                          <span className="text-stone-700">
                            {previewCount === 1 ? "contact" : "contacts"} will receive this campaign
                          </span>
                        </p>
                      )}
                    </div>
                  </div>
                  {!previewLoading && previewSamples.length > 0 && (
                    <div className="mt-3 pt-3 border-t border-emerald-200">
                      <p className="text-xs font-semibold text-emerald-700 mb-1">Sample recipients:</p>
                      <p className="text-xs text-emerald-800 break-words">
                        {previewSamples.join(", ")}
                      </p>
                    </div>
                  )}
                </div>

                {/* Content preview */}
                <div className="p-4 bg-stone-50 rounded-xl border border-stone-200">
                  <p className="text-xs font-semibold text-stone-500 uppercase tracking-wide mb-2">Content Summary</p>
                  <p className="text-sm font-medium text-stone-800">{subject || "(no subject)"}</p>
                  <p className="text-xs text-stone-500 mt-1 line-clamp-2">{bodyText || "(no body)"}</p>
                </div>
              </div>

              {/* Visual segment picker */}
              <div className="bg-stone-50 rounded-2xl border border-stone-200 p-5">
                <h3 className="text-sm font-semibold text-stone-700 mb-4">Segment Overview</h3>
                {selectedSegment ? (
                  <div className="space-y-3">
                    <div className="flex items-center gap-3 p-3 bg-white rounded-xl border border-stone-200">
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <polygon points="12 2 2 7 12 12 22 7 12 2"/>
                          <polyline points="2 17 12 22 22 17"/>
                          <polyline points="2 12 12 17 22 12"/>
                        </svg>
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-stone-800">{selectedSegment.name}</p>
                        <p className="text-xs text-stone-500">{selectedSegment.description || "Custom segment"}</p>
                      </div>
                    </div>
                    <div className="text-xs text-stone-400">
                      {"filters" in selectedSegment.rules ? `${selectedSegment.rules.filters.length} filter${selectedSegment.rules.filters.length !== 1 ? "s" : ""} configured` : "Custom rules configured"}
                    </div>
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-stone-100 flex items-center justify-center">
                      {Icons.users("w-6 h-6 text-stone-400")}
                    </div>
                    <p className="text-sm text-stone-600 font-medium">All Contacts</p>
                    <p className="text-xs text-stone-400 mt-1">This campaign will be sent to all your contacts</p>
                  </div>
                )}
              </div>
            </div>

            <div className="flex justify-between pt-6 mt-6 border-t border-stone-100">
              <AdminButton variant="ghost" onClick={() => setStep(2)} icon={Icons.arrowLeft("w-4 h-4")} iconPosition="left">
                Back
              </AdminButton>
              <AdminButton onClick={() => setStep(4)} disabled={!canProceedFromStep3} icon={Icons.arrowRight("w-4 h-4")}>
                Continue to Schedule
              </AdminButton>
            </div>
          </div>
        )}

        {/* Step 4: Schedule */}
        {step === 4 && (
          <div className="p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                {Icons.calendar("w-5 h-5")}
              </div>
              <div>
                <h2 className="text-lg font-bold text-stone-900">Schedule & Send</h2>
                <p className="text-sm text-stone-500">Set your campaign type and choose when to send.</p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Campaign type selection */}
              <div>
                <p className="block text-sm font-semibold text-stone-700 mb-3">Campaign Type</p>
                <div className="space-y-3">
                  {CAMPAIGN_TYPES.map((ct) => (
                    <button type="button"
                      key={ct.value}
                      onClick={() => setCampaignType(ct.value)}
                      className={`w-full rounded-xl border-2 p-4 text-left transition-all ${
                        campaignType === ct.value
                          ? "border-emerald-500 bg-emerald-50"
                          : "border-stone-200 hover:border-stone-300"
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${
                          campaignType === ct.value ? "bg-emerald-500 text-white" : "bg-stone-100 text-stone-500"
                        }`}>
                          {ct.icon}
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-stone-800">{ct.label}</p>
                          <p className="text-xs text-stone-500">{ct.desc}</p>
                        </div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Send timing */}
              <div>
                <p className="block text-sm font-semibold text-stone-700 mb-3">When to Send</p>
                <div className="space-y-3">
                  <label className={`flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                    sendNow ? "border-emerald-500 bg-emerald-50" : "border-stone-200 hover:border-stone-300"
                  }`}>
                    <input
                      type="radio"
                      checked={sendNow}
                      onChange={() => setSendNow(true)}
                      className="w-4 h-4 accent-emerald-600"
                    />
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        {Icons.send("w-5 h-5 text-emerald-600")}
                        <span className="text-sm font-semibold text-stone-800">Send immediately</span>
                      </div>
                      <p className="text-xs text-stone-500 mt-0.5">Your campaign will be sent right away</p>
                    </div>
                  </label>
                  
                  <label className={`flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                    !sendNow ? "border-emerald-500 bg-emerald-50" : "border-stone-200 hover:border-stone-300"
                  }`}>
                    <input
                      type="radio"
                      checked={!sendNow}
                      onChange={() => setSendNow(false)}
                      className="w-4 h-4 accent-emerald-600"
                    />
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        {Icons.clock("w-5 h-5 text-emerald-600")}
                        <span className="text-sm font-semibold text-stone-800">Schedule for later</span>
                      </div>
                    </div>
                  </label>
                </div>

                {!sendNow && (
                  <div className="mt-4">
                    <label htmlFor="fld-4-send-date-time"  className="block text-sm font-semibold text-stone-700 mb-1.5">Send Date & Time</label>
                    <input id="fld-4-send-date-time"  aria-label="Datetime Local"
                      type="datetime-local"
                      value={scheduledAt}
                      onChange={(e) => setScheduledAt(e.target.value)}
                      className="w-full border border-stone-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all"
                      min={nowMin}
                    />
                  </div>
                )}
              </div>
            </div>

            {/* Summary */}
            <div className="mt-6 p-5 bg-stone-50 rounded-2xl border border-stone-200">
              <p className="text-xs font-semibold text-stone-500 uppercase tracking-wide mb-3">Campaign Summary</p>
              <div className="grid grid-cols-2 gap-y-3 text-sm">
                <div>
                  <span className="text-stone-500">Campaign name</span>
                  <p className="font-semibold text-stone-800">{name || "—"}</p>
                </div>
                <div>
                  <span className="text-stone-500">Template</span>
                  <p className="font-semibold text-stone-800">{selectedTemplate?.name ?? "Custom"}</p>
                </div>
                <div>
                  <span className="text-stone-500">Audience</span>
                  <p className="font-semibold text-stone-800">{selectedSegment?.name ?? "All contacts"}</p>
                </div>
                <div>
                  <span className="text-stone-500">Type</span>
                  <p className="font-semibold text-stone-800 capitalize">{campaignType}</p>
                </div>
              </div>
            </div>

            {error && (
              <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-600">
                {error}
              </div>
            )}

            <div className="flex justify-between pt-6 mt-6 border-t border-stone-100">
              <AdminButton variant="ghost" onClick={() => setStep(3)} icon={Icons.arrowLeft("w-4 h-4")} iconPosition="left">
                Back
              </AdminButton>
              <AdminButton
                onClick={handleCreateOrSchedule}
                isLoading={saving}
                disabled={(!sendNow && !scheduledAt)}
              >
                {saving ? "Processing…" : sendNow ? (
                  <>
                    {Icons.send("w-4 h-4")}
                    Send Campaign
                  </>
                ) : (
                  <>
                    {Icons.calendar("w-4 h-4")}
                    Schedule Campaign
                  </>
                )}
              </AdminButton>
            </div>
          </div>
        )}
      </div>

      {/* Recent campaigns */}
      {campaigns.length > 0 && (
        <div className="bg-white rounded-2xl border border-[var(--admin-border)] overflow-hidden shadow-sm">
          <div className="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 className="text-sm font-semibold text-stone-800">Recent Campaigns</h3>
            <span className="text-xs text-stone-400">{campaigns.length} total</span>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-stone-50 border-b border-stone-100">
                <tr>
                  <th className="text-left px-6 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider">Name</th>
                  <th className="text-left px-6 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider hidden sm:table-cell">Type</th>
                  <th className="text-left px-6 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider hidden sm:table-cell">Status</th>
                  <th className="text-left px-6 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider hidden sm:table-cell">Sent</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-stone-100">
                {campaigns.slice(0, 5).map((c) => (
                  <tr key={c.id} className="hover:bg-stone-50 transition-colors">
                    <td className="px-6 py-3.5 font-semibold text-stone-800">{c.name}</td>
                    <td className="px-6 py-3.5 hidden sm:table-cell text-stone-600 capitalize">{c.campaign_type}</td>
                    <td className="px-6 py-3.5 hidden sm:table-cell"><StatusBadge status={c.status} /></td>
                    <td className="px-6 py-3.5 hidden sm:table-cell text-xs text-stone-400">
                      {c.sent_at ? new Date(c.sent_at).toLocaleDateString() : "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}