import { NDKEvent, NDKKind, NDKTag } from '@nostr-dev-kit/ndk';
import CharacterCount from '@tiptap/extension-character-count';
import Image from '@tiptap/extension-image';
import Placeholder from '@tiptap/extension-placeholder';
import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';
import { twMerge } from 'tailwind-merge';
import { Markdown } from 'tiptap-markdown';

import { ArticleCoverUploader, MediaUploader, MentionPopup } from '@app/new/components';

import { useNDK } from '@libs/ndk/provider';

import {
  BoldIcon,
  Heading1Icon,
  Heading2Icon,
  Heading3Icon,
  ItalicIcon,
  LoaderIcon,
  ThreadsIcon,
} from '@shared/icons';

export function NewArticleScreen() {
  const { ndk } = useNDK();

  const [height, setHeight] = useState(0);
  const [loading, setLoading] = useState(false);
  const [title, setTitle] = useState('');
  const [summary, setSummary] = useState({ open: false, content: '' });
  const [cover, setCover] = useState('');

  const navigate = useNavigate();
  const containerRef = useRef(null);
  const ident = useMemo(() => String(Date.now()), []);
  const editor = useEditor({
    extensions: [
      StarterKit.configure(),
      Placeholder.configure({ placeholder: 'Type something...' }),
      Image.configure({
        HTMLAttributes: {
          class:
            'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
        },
      }),
      CharacterCount.configure(),
      Markdown.configure({
        html: false,
        tightLists: true,
        linkify: true,
        transformPastedText: true,
      }),
    ],
    content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
    editorProps: {
      attributes: {
        class:
          'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
      },
    },
    onUpdate: ({ editor }) => {
      const jsonContent = JSON.stringify(editor.getJSON());
      localStorage.setItem('editor-article', jsonContent);
    },
  });

  const submit = async () => {
    try {
      if (!ndk.signer) return navigate('/new/privkey');

      setLoading(true);

      // get markdown content
      const content = editor.storage.markdown.getMarkdown();

      // define tags
      const tags: NDKTag[] = [
        ['d', ident],
        ['title', title],
        ['image', cover],
        ['summary', summary.content],
        ['published_at', String(Math.floor(Date.now() / 1000))],
      ];

      // add hashtag to tags if present
      const hashtags = content.split(/\s/gm).filter((s: string) => s.startsWith('#'));
      hashtags?.forEach((tag: string) => {
        tags.push(['t', tag.replace('#', '')]);
      });

      const event = new NDKEvent(ndk);
      event.content = content;
      event.kind = NDKKind.Article;
      event.tags = tags;

      // publish
      const publishedRelays = await event.publish();

      if (publishedRelays) {
        toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);

        // update state
        setLoading(false);

        // reset editor
        editor.commands.clearContent();
        localStorage.setItem('editor-article', '{}');
      }
    } catch (e) {
      setLoading(false);
      toast.error(e);
    }
  };

  useLayoutEffect(() => {
    setHeight(containerRef.current.clientHeight);
  }, []);

  return (
    <div className="flex flex-1 flex-col justify-between">
      <div className="flex-1 overflow-y-auto">
        <div
          className="flex flex-col gap-4"
          ref={containerRef}
          style={{ height: `${height}px` }}
        >
          {cover ? (
            <img
              src={cover}
              alt="post cover"
              className="h-72 w-full rounded-lg object-cover"
            />
          ) : null}
          <div className="group flex justify-between gap-2">
            <input
              name="title"
              className="h-9 flex-1 border-none bg-transparent px-0 text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 focus:border-none focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-600"
              placeholder="Untitled"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
            <div
              className={twMerge(
                'inline-flex shrink-0 gap-2 group-hover:inline-flex',
                title.length > 0 ? '' : 'hidden'
              )}
            >
              <ArticleCoverUploader setCover={setCover} />
              <button
                type="button"
                onClick={() => setSummary((prev) => ({ ...prev, open: !prev.open }))}
                className="inline-flex h-9 w-max items-center gap-2 rounded-lg bg-neutral-100 px-2.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
              >
                <ThreadsIcon className="h-4 w-4" />
                Add summary
              </button>
            </div>
          </div>
          {summary.open ? (
            <div className="flex gap-3">
              <div className="h-16 w-1 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" />
              <div className="flex-1">
                <textarea
                  className="h-16 w-full border-none bg-transparent px-1 py-1 text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
                  placeholder="A brief summary of your article"
                  value={summary.content}
                  onChange={(e) =>
                    setSummary((prev) => ({ ...prev, content: e.target.value }))
                  }
                />
              </div>
            </div>
          ) : null}
          <div>
            {editor && (
              <FloatingMenu
                editor={editor}
                tippyOptions={{ duration: 100 }}
                className="ml-36 inline-flex h-10 items-center gap-1 rounded-lg border border-neutral-200 bg-neutral-100 px-px dark:border-neutral-800 dark:bg-neutral-900"
              >
                <button
                  onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
                  className={twMerge(
                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
                    editor.isActive('heading', { level: 1 })
                      ? 'bg-white shadow dark:bg-black'
                      : ''
                  )}
                >
                  <Heading1Icon className="h-5 w-5" />
                </button>
                <button
                  onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                  className={twMerge(
                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
                    editor.isActive('heading', { level: 2 })
                      ? 'bg-white shadow dark:bg-black'
                      : ''
                  )}
                >
                  <Heading2Icon className="h-5 w-5" />
                </button>
                <button
                  onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                  className={twMerge(
                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
                    editor.isActive('heading', { level: 3 })
                      ? 'bg-white shadow dark:bg-black'
                      : ''
                  )}
                >
                  <Heading3Icon className="h-5 w-5" />
                </button>
                <button
                  onClick={() => editor.chain().focus().toggleBold().run()}
                  className={twMerge(
                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
                    editor.isActive('bold') ? 'bg-white shadow dark:bg-black' : ''
                  )}
                >
                  <BoldIcon className="h-5 w-5" />
                </button>
                <button
                  onClick={() => editor.chain().focus().toggleItalic().run()}
                  className={twMerge(
                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
                    editor.isActive('italic') ? 'bg-white shadow dark:bg-black' : ''
                  )}
                >
                  <ItalicIcon className="h-5 w-5" />
                </button>
              </FloatingMenu>
            )}
            <EditorContent
              editor={editor}
              spellCheck="false"
              autoComplete="off"
              autoCorrect="off"
              autoCapitalize="off"
            />
          </div>
        </div>
      </div>
      <div>
        <div className="mb-3 flex h-12 w-full items-center rounded-lg bg-yellow-100 px-3 text-yellow-700">
          <p className="text-sm">
            Article editor is still in beta. If you need a stable and more reliable
            feature, you can use <b>Habla (habla.news)</b> instead.
          </p>
        </div>
        <div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
          <div className="inline-flex items-center gap-3">
            <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
              {editor?.storage?.characterCount.characters()} characters
            </span>
            <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
              -
            </span>
            <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
              <b>Identifier:</b>
              {ident}
            </span>
          </div>
          <div className="flex items-center">
            <div className="inline-flex items-center gap-2">
              <MediaUploader editor={editor} />
              <MentionPopup editor={editor} />
            </div>
            <div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
            <button
              onClick={() => submit()}
              disabled={editor && editor.isEmpty}
              className="inline-flex h-9 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
            >
              {loading === true ? (
                <LoaderIcon className="h-5 w-5 animate-spin" />
              ) : (
                'Publish article'
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}