dashboards/components/catalog/BlogPanel.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import CatalogCardControls, {
  type CatalogControlsMode,
} from "@/components/catalog/CatalogCardControls";
import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
import CatalogPagination from "@/components/catalog/CatalogPagination";
import {
  BLOG_PAGE_SIZE,
  blogImage,
  excerpt,
  formatDate,
  toPlainText,
} from "@/components/catalog/utils";
import ConfirmDialog from "@/components/ConfirmDialog";
import styles from "@/components/BusinessDetailsPage.module.css";
import { en } from "@/lib/i18n/en";
import {
  deleteMeshkeeBlog,
  listMeshkeeBlogs,
  type MeshkeeBlog,
} from "@/services/meshkee-content";

export default function BlogPanel({
  meshkeeId,
  emptyLabel = en.blog.empty,
  addHref,
  controlsMode = "edit-remove",
  onManage,
}: {
  meshkeeId: string;
  emptyLabel?: string;
  addHref?: string;
  controlsMode?: CatalogControlsMode;
  onManage?: () => void;
}) {
  const sectionRef = useRef<HTMLDivElement>(null);
  const [items, setItems] = useState<MeshkeeBlog[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [busy, setBusy] = useState(false);
  const [removing, setRemoving] = useState<MeshkeeBlog | null>(null);
  const [removeBusy, setRemoveBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      setBusy(true);
      setError("");
      try {
        const res = await listMeshkeeBlogs(meshkeeId, {
          page: 1,
          pageSize: BLOG_PAGE_SIZE,
        });
        if (cancelled) return;
        setItems(res.items);
        setTotal(res.total);
        setPage(1);
      } catch (err) {
        if (!cancelled) {
          setError(
            err instanceof Error ? err.message : "Could not load blog posts.",
          );
        }
      } finally {
        if (!cancelled) setBusy(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [meshkeeId]);

  function scrollToSection() {
    const node = sectionRef.current;
    if (!node) return;
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        node.scrollIntoView({ behavior: "smooth", block: "start" });
      });
    });
  }

  async function loadPage(next: number) {
    setBusy(true);
    try {
      const res = await listMeshkeeBlogs(meshkeeId, {
        page: next,
        pageSize: BLOG_PAGE_SIZE,
      });
      setItems(res.items);
      setTotal(res.total);
      setPage(res.page);
      scrollToSection();
    } finally {
      setBusy(false);
    }
  }

  async function confirmRemove() {
    if (!removing) return;
    setRemoveBusy(true);
    try {
      await deleteMeshkeeBlog(meshkeeId, removing.id);
      setItems((prev) => prev.filter((item) => item.id !== removing.id));
      setTotal((value) => Math.max(0, value - 1));
      setRemoving(null);
    } catch (err) {
      window.alert(
        err instanceof Error ? err.message : "Could not remove blog post.",
      );
    } finally {
      setRemoveBusy(false);
    }
  }

  if (error) {
    return <p className={styles.panelHint}>{error}</p>;
  }

  return (
    <div ref={sectionRef} className={styles.productsSection}>
      {busy ? <p className={styles.panelHint}>Loading blog…</p> : null}
      <div className={styles.blogGrid}>
        {items.map((post) => {
          const image = blogImage(post);
          const text = post.abstract
            ? excerpt(toPlainText(post.abstract), 160)
            : "";
          return (
            <article key={post.id} className={styles.blogCard}>
              <div className={styles.cardMedia}>
                {image ? (
                  <img src={image} alt="" />
                ) : (
                  <div className={styles.mediaFallback} aria-hidden />
                )}
              </div>
              <div className={`tile-hover ${styles.cardFoot}`}>
                <div className={styles.blogBody}>
                  <h3 dir="auto">{post.title}</h3>
                  {text ? <p dir="auto">{text}</p> : null}
                  {post.createdAt ? (
                    <span className={styles.meta}>{formatDate(post.createdAt)}</span>
                  ) : null}
                </div>
                <CatalogCardControls
                  mode={controlsMode}
                  busy={removeBusy}
                  onManage={onManage}
                  onEdit={() =>
                    window.alert(`Edit blog coming soon: ${post.title}`)
                  }
                  onRemove={() => setRemoving(post)}
                />
              </div>
            </article>
          );
        })}
      </div>
      {!items.length && !busy ? (
        <CatalogEmptyState
          icon="/images/icons/calendar.svg"
          title={emptyLabel}
          lead={en.blog.emptyLead}
          actionHref={addHref}
          actionLabel={en.blog.add}
        />
      ) : null}
      <CatalogPagination
        page={page}
        total={total}
        pageSize={BLOG_PAGE_SIZE}
        busy={busy}
        onChange={(next) => void loadPage(next)}
      />
      <ConfirmDialog
        open={controlsMode === "edit-remove" && Boolean(removing)}
        kicker="Remove"
        title={`Remove ${removing?.title ?? "post"}?`}
        message="This deletes the blog post from Meshkee. This cannot be undone."
        confirmLabel="Remove"
        cancelLabel="Keep"
        danger
        busy={removeBusy}
        onClose={() => {
          if (!removeBusy) setRemoving(null);
        }}
        onConfirm={() => {
          void confirmRemove();
        }}
      />
    </div>
  );
}