import { useEffect, useState, type FormEvent } from "react";

import { useParams, useNavigate } from "react-router-dom";
import { API_URL } from "./constants";
import type { Blog } from "./types";
import { countWords } from "./countWords";

export function EditBlog() {
  const { slug } = useParams<{ slug: string }>();
  const [blog, setBlog] = useState<Blog | null>(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [body, setBody] = useState("");
  const [authorName, setAuthorName] = useState("");
  const navigate = useNavigate();

  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);
        setTitle(data.title);
        setDescription(data.description);
        setBody(data.body);
        setAuthorName(data.author_name);
      })
      .catch(console.error);
  }, [slug]);

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

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const updatedBlog = {
      title,
      description,
      body,
      author_name: authorName, // from the form field
      updated_at: new Date().toISOString(),
      word_count: countWords(body),
      version: blog ? blog.version + 1 : 1,
    };

    const res = await fetch(`${API_URL}/blogs/${slug}`, {
      method: "PUT", // or "PATCH" if your API prefers
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(updatedBlog),
    });
    if (res.ok) {
      navigate(`/blogs/${slug}`); // go back to the viewer
    } else {
      console.error("Update failed:", await res.text());
      alert("Could not update the post. See console for details.");
    }
  }

  return (
    <div className="max-w-2xl mx-auto py-10">
      <h2 className="text-2xl font-bold mb-4">Edit Blog Post</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block font-medium">Title</label>
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full border px-2 py-1 rounded"
          />
        </div>
        <div>
          <label className="block font-medium">Description</label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="w-full border px-2 py-1 rounded"
          />
        </div>
        <div>
          <label className="block font-medium">Author Name</label>
          <input
            type="text"
            value={authorName}
            onChange={(e) => setAuthorName(e.target.value)}
            className="w-full border px-2 py-1 rounded"
            required
          />
        </div>
        <div>
          <label className="block font-medium">Body (Markdown)</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            rows={10}
            className="w-full border px-2 py-1 rounded font-mono"
          />
        </div>
        <button
          type="submit"
          className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
        >
          Save Changes
        </button>
      </form>
    </div>
  );
}