"use client";
import React, { useState, useRef, useEffect } from "react";
import { marked } from "marked";
import DOMPurify from "dompurify";
import { useI18n } from "@/lib/i18n";

interface MarkdownNoteEditorProps {
  value: string;
  onChange: (newValue: string) => void;
  onSave?: () => void;
}

export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEditorProps) {
  const { t } = useI18n();
  const [mode, setMode] = useState<"edit" | "preview">("edit");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const previewRef = useRef<HTMLDivElement>(null);

  // Configure marked to open links in new tabs safely
  useEffect(() => {
    const renderer = new marked.Renderer();
    renderer.link = ({ href, title, text }: { href: string; title?: string | null; text: string }) => {
      const titleAttr = title ? ` title="${title}"` : "";
      return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr} class="markdown-link">${text}</a>`;
    };
    marked.use({ renderer, breaks: true, gfm: true });
  }, []);

  // Keyboard shortcuts
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if ((e.ctrlKey || e.metaKey) && e.key === "s") {
      e.preventDefault();
      if (onSave) onSave();
    } else if (e.key === "Tab") {
      e.preventDefault();
      const ta = textareaRef.current;
      if (!ta) return;
      const start = ta.selectionStart;
      const end = ta.selectionEnd;
      const newVal = value.slice(0, start) + "  " + value.slice(end);
      onChange(newVal);
      requestAnimationFrame(() => {
        ta.selectionStart = ta.selectionEnd = start + 2;
      });
    }
  };

  // Convert markdown to sanitized HTML with safe links
  const renderMarkdownHtml = () => {
    if (!value || !value.trim()) {
      return `<p style="color: var(--text-tertiary); font-style: italic; padding: 8px 0;">${t("notesPlaceholder").split("\n")[0]}</p>`;
    }

    try {
      const textWithLinks = value.replace(
        /(^|[^"'])(https?:\/\/[^\s<]+)/g,
        (match, prefix, url) => {
          if (match.includes("](") || match.includes('href="')) return match;
          return `${prefix}[${url}](${url})`;
        }
      );

      const rawHtml = marked.parse(textWithLinks, { breaks: true, gfm: true }) as string;

      return DOMPurify.sanitize(rawHtml, {
        ALLOWED_TAGS: [
          "h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "span", "strong", "em", "del", "s",
          "ul", "ol", "li", "code", "pre", "blockquote", "hr", "br", "table", "thead", "tbody",
          "tr", "th", "td"
        ],
        ALLOWED_ATTR: ["href", "title", "target", "rel", "class", "style"],
        ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
        ADD_ATTR: ["target", "rel", "class"],
      });
    } catch {
      return value;
    }
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        width: "100%",
        minHeight: 0,
        position: "relative",
      }}
    >
      {/* Minimal Header with Mode Switcher */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "4px 8px 8px 8px",
        }}
      >
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.05em", color: "var(--text-tertiary)" }}>
          {t("notes").toUpperCase()}
        </span>

        <div className="view-switcher-group" style={{ padding: 2 }}>
          <button
            type="button"
            className={`view-switcher-btn${mode === "edit" ? " active" : ""}`}
            style={{ fontSize: 11, padding: "2px 8px" }}
            onClick={() => {
              setMode("edit");
              setTimeout(() => textareaRef.current?.focus(), 50);
            }}
          >
            ✏️ Edit
          </button>
          <button
            type="button"
            className={`view-switcher-btn${mode === "preview" ? " active" : ""}`}
            style={{ fontSize: 11, padding: "2px 8px" }}
            onClick={() => setMode("preview")}
          >
            👁️ Preview
          </button>
        </div>
      </div>

      {/* Editor / Preview Area */}
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", position: "relative" }}>
        {mode === "edit" ? (
          <textarea
            ref={textareaRef}
            className="note-editor-textarea"
            style={{
              flex: 1,
              width: "100%",
              height: "100%",
              minHeight: 120,
              padding: "8px 10px",
              background: "transparent",
              border: "none",
              outline: "none",
              color: "var(--text-primary)",
              fontSize: 13.5,
              lineHeight: 1.6,
              resize: "none",
              fontFamily: "inherit",
            }}
            placeholder={t("notesPlaceholder")}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            onKeyDown={handleKeyDown}
            onBlur={() => {
              if (onSave) onSave();
            }}
          />
        ) : (
          <div
            ref={previewRef}
            className="note-editor-preview"
            style={{
              flex: 1,
              width: "100%",
              height: "100%",
              padding: "8px 10px",
              overflowY: "auto",
              color: "var(--text-primary)",
              fontSize: 13.5,
              lineHeight: 1.6,
            }}
            dangerouslySetInnerHTML={{ __html: renderMarkdownHtml() }}
            onClick={() => {
              setMode("edit");
              setTimeout(() => textareaRef.current?.focus(), 50);
            }}
          />
        )}
      </div>
    </div>
  );
}