import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { API_URL } from "./constants";
import type { Blog } from "./types";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import "../styles/markdown.css";

export function BlogViewer() {
  const { slug } = useParams<{ slug: string }>();
  const [blog, setBlog] = useState<Blog | null>(null);
  const navigate = useNavigate();
  const me = localStorage.getItem("user_id");

  useEffect(() => {
    if (!slug) return;
    fetch(`${API_URL}/blogs/${slug}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data: Blog) => setBlog(data))
      .catch((err) => console.error(err));
  }, [slug]);

  if (!blog) return <p>Loading…</p>;

  const isAuthor = me === String(blog.author_id);

  const handleDelete = async () => {
    if (!window.confirm(`Are you sure you want to delete ${blog.title}`))
      return;

    try {
      const res = await fetch(`${API_URL}/blogs/${slug}`, {
        method: "DELETE",
        headers: { Accept: "application/json" },
      });
      if (!res.ok) throw new Error(await res.text());
      navigate("/");
    } catch (err) {
      console.error("Delete failed:", err);
      alert("Could not delete post. See console for details.");
    }
  };

  return (
    <div className="max-w-2xl mx-auto py-10 space-y-6">
      {isAuthor && (
        <div className="flex space-x-4">
          <button
            onClick={() => navigate(`/blog/${slug}/edit`)}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Edit
          </button>
          <button
            onClick={handleDelete}
            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          >
            Delete
          </button>
        </div>
      )}
      <h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
      <p className="text-sm text-gray-500">By {blog.author_name}</p>
      <div className="markdown-body mx-auto p-4">
        <Markdown
          remarkPlugins={[remarkGfm, remarkRehype]}
          rehypePlugins={[rehypeRaw]}
          children={blog.body}
        ></Markdown>
      </div>
    </div>
  );
}