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 { useMemo, useState } from 'react';
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 [loading, setLoading] = useState(false);
  const [title, setTitle] = useState('');
  const [summary, setSummary] = useState({ open: false, content: '' });
  const [cover, setCover] = useState('');

  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 {
      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);
    }
  };

  return (
    <div className="flex h-full flex-col justify-between">
      <div className="flex flex-col gap-4">
        {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 text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 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 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>
  );
}
