"use client";

import { useState } from "react";
import { sanitizeAdminHtml } from "@/lib/sanitize-html";

export function NewsletterSendForm({
  subscriberCount,
}: {
  subscriberCount: number;
}) {
  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [sending, setSending] = useState(false);
  const [result, setResult] = useState<{
    type: "success" | "error";
    message: string;
  } | null>(null);
  const [preview, setPreview] = useState(false);

  async function handleSend() {
    if (
      !confirm(
        `Send this campaign to ${subscriberCount} subscribers? This cannot be undone.`
      )
    ) {
      return;
    }

    setSending(true);
    setResult(null);

    try {
      const res = await fetch("/api/admin/newsletters/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ subject, body }),
      });

      const data = await res.json();

      if (res.ok) {
        setResult({
          type: "success",
          message: `Campaign queued for ${data.count} subscribers`,
        });
        setSubject("");
        setBody("");
      } else {
        setResult({
          type: "error",
          message: data.error || "Failed to send campaign",
        });
      }
    } catch {
      setResult({ type: "error", message: "Network error" });
    } finally {
      setSending(false);
    }
  }

  return (
    <div className="space-y-4">
      {result && (
        <div
          className={`px-4 py-3 rounded-lg text-sm ${
            result.type === "success"
              ? "bg-green-500/20 border border-green-500/50 text-green-400"
              : "bg-red-500/20 border border-red-500/50 text-red-400"
          }`}
        >
          {result.message}
        </div>
      )}

      <div>
        <label className="block text-sm font-medium mb-1.5">Subject</label>
        <input
          type="text"
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          placeholder="Campaign subject line..."
          className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
        />
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5">
          Body (HTML allowed)
        </label>
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          rows={10}
          placeholder="<p>Your newsletter content here...</p>"
          className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm"
        />
      </div>

      {preview && body && (
        <div className="bg-surface-light rounded-lg p-4">
          <p className="text-text-muted text-xs uppercase tracking-wider mb-2">
            Preview
          </p>
          {/* A.5: sanitize before dangerouslySetInnerHTML — strips <script>,
              event handlers, and javascript: URLs so a crafted payload can't
              execute in the admin context on preview. */}
          <div
            className="prose prose-invert max-w-none text-sm"
            dangerouslySetInnerHTML={{ __html: sanitizeAdminHtml(body) }}
          />
        </div>
      )}

      <div className="flex gap-3">
        <button
          onClick={() => setPreview(!preview)}
          type="button"
          className="bg-surface-light hover:bg-surface text-text-muted px-4 py-2.5 rounded-lg text-sm transition-colors"
        >
          {preview ? "Hide Preview" : "Preview"}
        </button>
        <button
          onClick={handleSend}
          disabled={sending || !subject.trim() || !body.trim()}
          className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg text-sm transition-colors disabled:opacity-50"
        >
          {sending
            ? "Sending..."
            : `Send to ${subscriberCount} subscribers`}
        </button>
      </div>
    </div>
  );
}