"use client";

import { useRef } from "react";
import { Bold, Heading2, Italic, List } from "lucide-react";
import { BlogBodyRenderer } from "@/components/BlogBodyRenderer";

type BlogBodyEditorProps = {
  value: string;
  onChange: (value: string) => void;
};

export function BlogBodyEditor({ value, onChange }: BlogBodyEditorProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  function insertEditorText(before: string, after = "") {
    const field = textareaRef.current;

    if (!field) {
      return;
    }

    const start = field.selectionStart;
    const end = field.selectionEnd;
    const selectedText = value.slice(start, end);
    const nextText = value.slice(0, start) + before + selectedText + after + value.slice(end);

    onChange(nextText);

    requestAnimationFrame(() => {
      field.focus();
      field.selectionStart = start + before.length;
      field.selectionEnd = start + before.length + selectedText.length;
    });
  }

  return (
    <div className="rounded-md border border-border bg-white">
      <div className="sticky top-16 z-10 flex flex-wrap items-center gap-2 rounded-t-md border-b border-border bg-slate-50/95 p-2 shadow-sm backdrop-blur">
        <button
          type="button"
          onClick={() => insertEditorText("## ")}
          className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
        >
          <Heading2 className="h-4 w-4" />
          Heading
        </button>
        <button
          type="button"
          onClick={() => insertEditorText("**", "**")}
          className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
        >
          <Bold className="h-4 w-4" />
          Bold
        </button>
        <button
          type="button"
          onClick={() => insertEditorText("_", "_")}
          className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
        >
          <Italic className="h-4 w-4" />
          Italic
        </button>
        <button
          type="button"
          onClick={() => insertEditorText("- ")}
          className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
        >
          <List className="h-4 w-4" />
          List
        </button>
      </div>
      <div className="grid gap-0 lg:grid-cols-2">
        <textarea
          ref={textareaRef}
          required
          name="body"
          value={value}
          onChange={(event) => onChange(event.target.value)}
          className="min-h-80 w-full resize-y border-0 bg-white px-3 py-3 text-sm font-semibold leading-7 outline-none"
          placeholder="Write each paragraph on a new line. Use the toolbar for simple formatting."
        />
        <div className="min-h-80 border-t border-border bg-slate-50 p-4 lg:border-l lg:border-t-0">
          <p className="mb-3 text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
            Preview
          </p>
          <div className="space-y-3 text-sm leading-7 text-foreground">
            {value.trim() ? (
              <BlogBodyRenderer blocks={value.split(/\n+/)} size="sm" />
            ) : (
              <p className="text-muted-foreground">Your blog content preview appears here.</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}