"use client";

import { useEffect, useCallback, type ReactNode } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import Placeholder from "@tiptap/extension-placeholder";
import {
  Bold,
  Italic,
  Link2,
  Link2Off,
  List,
  MousePointerClick,
} from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { looksLikeHtml } from "@/lib/utils/sanitize-thank-you-html";

const BUTTON_LINK_STYLE =
  "display:inline-block;padding:10px 18px;background:#0EA5E9;color:#ffffff;font-weight:700;text-decoration:none;border-radius:8px";

function toEditorHtml(value: string): string {
  const trimmed = value?.trim() ?? "";
  if (!trimmed) return "";
  if (looksLikeHtml(trimmed)) return trimmed;
  return `<p>${escapeHtml(trimmed)}</p>`;
}

function escapeHtml(text: string): string {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

function normalizeHref(raw: string): string | null {
  const value = raw.trim();
  if (!value) return null;
  if (/^(https?:\/\/|mailto:|\/|#)/i.test(value)) return value;
  return `https://${value}`;
}

interface ThankYouRichEditorProps {
  value: string;
  onChange: (html: string) => void;
  placeholder?: string;
  id?: string;
}

export function ThankYouRichEditor({
  value,
  onChange,
  placeholder = "Write your thank-you message…",
  id,
}: ThankYouRichEditorProps) {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit.configure({
        heading: false,
        codeBlock: false,
        blockquote: false,
        horizontalRule: false,
        code: false,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          target: "_blank",
          rel: "noopener noreferrer",
        },
      }),
      Placeholder.configure({ placeholder }),
    ],
    content: toEditorHtml(value),
    editorProps: {
      attributes: {
        id: id ?? "",
        class:
          "ss-thank-you-editor min-h-[100px] px-3 py-2.5 text-sm outline-none focus:outline-none",
      },
    },
    onUpdate: ({ editor: current }) => {
      const html = current.isEmpty ? "" : current.getHTML();
      onChange(html);
    },
  });

  useEffect(() => {
    if (!editor) return;
    const next = toEditorHtml(value);
    const current = editor.isEmpty ? "" : editor.getHTML();
    if (next === current) return;
    // Avoid clobbering while typing the same logical content.
    if (!next && editor.isEmpty) return;
    editor.commands.setContent(next || "", { emitUpdate: false });
  }, [editor, value]);

  const setLink = useCallback(() => {
    if (!editor) return;
    const previous = editor.getAttributes("link").href as string | undefined;
    const input = window.prompt("Link URL", previous || "https://");
    if (input === null) return;
    const href = normalizeHref(input);
    if (!href) {
      editor.chain().focus().extendMarkRange("link").unsetLink().run();
      return;
    }
    editor
      .chain()
      .focus()
      .extendMarkRange("link")
      .setLink({ href, target: "_blank" })
      .run();
  }, [editor]);

  const insertButton = useCallback(() => {
    if (!editor) return;
    const labelInput = window.prompt("Button text", "Visit our website");
    if (labelInput === null) return;
    const label = labelInput.trim() || "Visit our website";
    const urlInput = window.prompt("Button link URL", "https://");
    if (urlInput === null) return;
    const href = normalizeHref(urlInput);
    if (!href) return;

    editor
      .chain()
      .focus()
      .insertContent(
        `<p><a href="${href}" target="_blank" rel="noopener noreferrer" style="${BUTTON_LINK_STYLE}">${escapeHtml(label)}</a></p>`
      )
      .run();
  }, [editor]);

  if (!editor) {
    return (
      <div className="min-h-[140px] rounded-[10px] border-[1.5px] border-border bg-white" />
    );
  }

  return (
    <div className="overflow-hidden rounded-[10px] border-[1.5px] border-border bg-white focus-within:border-primary">
      <div className="flex flex-wrap items-center gap-0.5 border-b border-border bg-[#F8FAFC] px-1.5 py-1.5">
        <ToolbarButton
          label="Bold"
          active={editor.isActive("bold")}
          onClick={() => editor.chain().focus().toggleBold().run()}
        >
          <Bold className="h-3.5 w-3.5" />
        </ToolbarButton>
        <ToolbarButton
          label="Italic"
          active={editor.isActive("italic")}
          onClick={() => editor.chain().focus().toggleItalic().run()}
        >
          <Italic className="h-3.5 w-3.5" />
        </ToolbarButton>
        <ToolbarButton
          label="Bullet list"
          active={editor.isActive("bulletList")}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
        >
          <List className="h-3.5 w-3.5" />
        </ToolbarButton>
        <div className="mx-1 h-4 w-px bg-border" />
        <ToolbarButton
          label="Add link"
          active={editor.isActive("link")}
          onClick={setLink}
        >
          <Link2 className="h-3.5 w-3.5" />
        </ToolbarButton>
        <ToolbarButton
          label="Remove link"
          disabled={!editor.isActive("link")}
          onClick={() => editor.chain().focus().unsetLink().run()}
        >
          <Link2Off className="h-3.5 w-3.5" />
        </ToolbarButton>
        <ToolbarButton label="Insert button" onClick={insertButton}>
          <MousePointerClick className="h-3.5 w-3.5" />
          <span className="text-[11px] font-semibold">Button</span>
        </ToolbarButton>
      </div>
      <EditorContent editor={editor} />
    </div>
  );
}

function ToolbarButton({
  children,
  label,
  active,
  disabled,
  onClick,
}: {
  children: ReactNode;
  label: string;
  active?: boolean;
  disabled?: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      title={label}
      aria-label={label}
      disabled={disabled}
      onClick={onClick}
      className={cn(
        "inline-flex items-center gap-1 rounded-[7px] px-2 py-1.5 text-muted transition-colors hover:bg-white hover:text-navy disabled:opacity-40",
        active && "bg-white text-primary shadow-sm"
      )}
    >
      {children}
    </button>
  );
}