Metatron_Admin_Frontend/app/(defaults)/(blog)/create-blog/page.tsx

"use client";
import React, { useState } from "react";
import ReactQuill from "react-quill";
import axios from "axios";
import IconTrashLines from "@/components/icon/icon-trash-lines";
import "react-quill/dist/quill.snow.css";

// ReactQuill toolbar options
const modules = {
  toolbar: {
    container: [
      [{ header: [1, 2, 3, false] }],
      ["bold", "italic", "underline", "strike"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["blockquote", "code-block"],
      [{ align: [] }],
      ["link", "image", "video"],
      ["clean"],
    ],
    handlers: {
      image: function () {
        const input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("accept", "image/*");
        input.click();

        input.onchange = async () => {
          const file = input.files?.[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = () => {
              const quill = this.quill;
              const range = quill.getSelection();
              quill.insertEmbed(range?.index || 0, "image", reader.result);
            };
            reader.readAsDataURL(file);
          }
        };
      },
    },
  },
};

const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "code-block",
  "list",
  "bullet",
  "align",
  "link",
  "image",
  "video",
];

const PostForm = () => {
  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    coverImage: null as File | null,
    description: "",
    projectId: "",
  });

  const [loading, setLoading] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => {
      const updated = { ...prev, [name]: value };
      // Auto-generate slug from title if empty
      if (name === "title" && !prev.slug) {
        updated.slug = value.toLowerCase().replace(/\s+/g, "-");
      }
      return updated;
    });
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    setFormData((prev) => ({ ...prev, coverImage: file }));
  };

  const handleRemoveImage = () => {
    setFormData((prev) => ({ ...prev, coverImage: null }));
  };

  const handleDescriptionChange = (value: string) => {
    setFormData((prev) => ({ ...prev, description: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.projectId) {
      alert("Project ID is required!");
      return;
    }

    const data = new FormData();
    data.append("title", formData.title);
    data.append("slug", formData.slug);
    data.append("description", formData.description);
    data.append("projectId", formData.projectId);
    if (formData.coverImage) data.append("image", formData.coverImage);

    try {
      setLoading(true);
      const res = await axios.post("http://localhost:3010/api/blog", data, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      alert("Blog created successfully!");
      console.log("Blog created:", res.data);
      // Reset form
      setFormData({
        title: "",
        slug: "",
        coverImage: null,
        description: "",
        projectId: "",
      });
    } catch (err: any) {
      console.error("Error creating blog:", err.response?.data || err.message);
      alert("Failed to create blog. " + (err.response?.data?.error || ""));
    } finally {
      setLoading(false);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="space-y-5 max-w-4xl mx-auto p-6 bg-white rounded shadow-md"
    >
      <h2 className="text-xl font-bold mb-4">Create Blog</h2>

      {/* Blog Title */}
      <div>
        <label className="block font-medium mb-1">Blog Title</label>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          placeholder="Enter blog title"
          className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none"
        />
      </div>

      {/* Slug */}
      <div>
        <label className="block font-medium mb-1">Slug</label>
        <input
          type="text"
          name="slug"
          value={formData.slug}
          onChange={handleChange}
          placeholder="Enter slug (or auto-generated)"
          className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-green-500 outline-none"
        />
      </div>

      {/* Project ID */}
      <div>
        <label className="block font-medium mb-1">Project ID</label>
        <input
          type="text"
          name="projectId"
          value={formData.projectId}
          onChange={handleChange}
          placeholder="Enter project ID"
          className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-yellow-500 outline-none"
        />
      </div>

      {/* Cover Image Upload */}
      <div>
        <label className="block font-medium mb-1">Cover Image</label>
        <input
          type="file"
          accept="image/*"
          onChange={handleImageChange}
          className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none"
        />
      </div>

      {/* Image Preview */}
      {formData.coverImage && (
        <div className="mt-3">
          <p className="text-sm font-medium">Preview:</p>
          <div className="relative inline-block mt-2">
            <img
              src={URL.createObjectURL(formData.coverImage)}
              alt="Selected"
              className="w-48 h-32 object-cover rounded border"
            />
            <button
              type="button"
              onClick={handleRemoveImage}
              className="absolute top-1 right-1 bg-red-600 text-white text-xs px-2 py-1 rounded hover:bg-red-700"
            >
              <IconTrashLines className="shrink-0" />
            </button>
          </div>
        </div>
      )}

      {/* Description */}
      <div className="mb-5">
        <ReactQuill
          value={formData.description}
          onChange={handleDescriptionChange}
          modules={modules}
          formats={formats}
          placeholder="Write your description..."
          className="bg-white text-black rounded-md"
        />
      </div>

      {/* Submit Button */}
      <button
        type="submit"
        disabled={loading}
        className={`bg-blue-600 text-white px-6 py-2 mt-5 rounded-md hover:bg-blue-700 transition ${
          loading ? "opacity-50 cursor-not-allowed" : ""
        }`}
      >
        {loading ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};

export default PostForm;