tvone/app/(page)/manage-category/components/CategoryTree.tsx

"use client";

import React, { useEffect, useState } from "react";
import {
  FolderTree,
  Edit3,
  Trash2,
  Plus,
  ChevronRight,
  ChevronDown,
} from "lucide-react";
import { getTree, getFlat, updateCategory, createCategory, deleteCategory } from "@/lib/categories.api";

/* ================= TYPES ================= */
interface Category {
  id: string;
  name: string;
  slug: string;
  parentId?: string | null;
  children?: Category[];
}

/* ================= API ================= */

/* ================= UTIL ================= */
function slugify(text: string) {
  return text
    .toLowerCase()
    .trim()
    .replace(/\s+/g, "-")
    .replace(/[^a-z0-9-]/g, "");
}

/* ================= PAGE ================= */
export default function CategoriesPage() {
  const [tree, setTree] = useState<Category[]>([]);
  const [flat, setFlat] = useState<Category[]>([]);
  const [loading, setLoading] = useState(false);

  const [modalOpen, setModalOpen] = useState(false);

  const [form, setForm] = useState({
    id: null as string | null,
    name: "",
    slug: "",
    parentId: null as string | null,
  });

  /* ================= LOAD ================= */
  async function load() {
    setLoading(true);
    try {
      const [t, f] = await Promise.all([getTree(), getFlat()]);
      setTree(t);
      setFlat(f);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  /* ================= CRUD ================= */
  async function save() {
    const payload = {
      name: form.name,
      slug: form.slug || slugify(form.name),
      parentId: form.parentId,
    };

    if (form.id) {
      await updateCategory(form.id, payload);
    } else {
      await createCategory(payload);
    }

    closeModal();
    load();
  }

  async function remove(id: string) {
    if (!confirm("Delete this category?")) return;
    await deleteCategory(id);
    load();
  }

  /* ================= MODAL ================= */
  function openCreate(parentId?: string) {
    setForm({
      id: null,
      name: "",
      slug: "",
      parentId: parentId || null,
    });
    setModalOpen(true);
  }

  function openEdit(cat: Category) {
    setForm({
      id: cat.id,
      name: cat.name,
      slug: cat.slug,
      parentId: cat.parentId || null,
    });
    setModalOpen(true);
  }

  function closeModal() {
    setModalOpen(false);
    setForm({ id: null, name: "", slug: "", parentId: null });
  }

  /* ================= TREE ================= */
  function TreeNode({
    node,
    level = 0,
  }: {
    node: Category;
    level?: number;
  }) {
    const [open, setOpen] = useState(true);

    return (
      <div style={{ marginLeft: level * 14 }} className="border-l pl-3">

        {/* NODE */}
        <div className="flex items-center justify-between py-2 group">

          <div className="flex items-center gap-2">

            <button onClick={() => setOpen(!open)}>
              {open ? (
                <ChevronDown size={14} />
              ) : (
                <ChevronRight size={14} />
              )}
            </button>

            <FolderTree size={14} className="text-blue-500" />

            <span
              onClick={() => openEdit(node)}
              className="text-sm font-medium cursor-pointer hover:text-blue-600"
            >
              {node.name}
            </span>
          </div>

          {/* ACTIONS */}
          <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">

            <button
              onClick={() => openCreate(node.id)}
              className="text-green-600"
            >
              <Plus size={14} />
            </button>

            <button onClick={() => openEdit(node)}>
              <Edit3 size={14} />
            </button>

            <button onClick={() => remove(node.id)}>
              <Trash2 size={14} className="text-red-500" />
            </button>
          </div>
        </div>

        {/* CHILDREN */}
        {open &&
          node.children?.map((child) => (
            <TreeNode
              key={child.id}
              node={child}
              level={level + 1}
            />
          ))}
      </div>
    );
  }

  /* ================= UI ================= */
  return (
    <div className="p-8 bg-slate-50 min-h-screen">

      {/* HEADER */}
      <div className="flex justify-between mb-6">
        <h1 className="text-xl font-semibold">
          Category Manager
        </h1>

        <button
          onClick={() => openCreate()}
          className="bg-blue-600 text-white px-4 py-2 rounded"
        >
          + New Category
        </button>
      </div>

      {/* TREE */}
      <div className="bg-white border rounded-xl p-4">
        {loading ? (
          <p>Loading...</p>
        ) : (
          tree.map((node) => (
            <TreeNode key={node.id} node={node} />
          ))
        )}
      </div>

      {/* MODAL */}
      {modalOpen && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">

          <div className="bg-white w-[420px] p-5 rounded-xl">

            <h2 className="font-semibold mb-4">
              {form.id ? "Edit Category" : "Create Category"}
            </h2>

            <input
              className="w-full border p-2 rounded mb-2"
              placeholder="Name"
              value={form.name}
              onChange={(e) =>
                setForm({
                  ...form,
                  name: e.target.value,
                  slug: slugify(e.target.value),
                })
              }
            />

            <input
              className="w-full border p-2 rounded mb-3"
              placeholder="Slug"
              value={form.slug}
              onChange={(e) =>
                setForm({ ...form, slug: e.target.value })
              }
            />

            <div className="flex justify-end gap-2">

              <button onClick={closeModal}>
                Cancel
              </button>

              <button
                onClick={save}
                className="bg-blue-600 text-white px-3 py-1 rounded"
              >
                Save
              </button>

            </div>
          </div>
        </div>
      )}
    </div>
  );
}