dashboards/components/catalog/PortfoliosPanel.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 {
  PORTFOLIO_PAGE_SIZE,
  portfolioImage,
  portfolioTitle,
  portfolioTitleEn,
  portfolioTitleFa,
} from "@/components/catalog/utils";
import ConfirmDialog from "@/components/ConfirmDialog";
import styles from "@/components/BusinessDetailsPage.module.css";
import { en } from "@/lib/i18n/en";
import {
  deleteMeshkeePortfolio,
  listMeshkeePortfolios,
  type MeshkeePortfolio,
} from "@/services/meshkee-content";

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

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      setBusy(true);
      setError("");
      try {
        const res = await listMeshkeePortfolios(meshkeeId, {
          page: 1,
          pageSize: PORTFOLIO_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 portfolios.",
          );
        }
      } 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 listMeshkeePortfolios(meshkeeId, {
        page: next,
        pageSize: PORTFOLIO_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 deleteMeshkeePortfolio(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 portfolio.",
      );
    } 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 portfolios…</p> : null}
      <div className={styles.portfolioGrid}>
        {items.map((item) => {
          const image = portfolioImage(item);
          const title = portfolioTitle(item);
          const titleEn = portfolioTitleEn(item);
          const titleFa = portfolioTitleFa(item);
          return (
            <article key={item.id} className={styles.portfolioCard}>
              <div className={styles.portfolioMedia}>
                {image ? (
                  <img src={image} alt="" />
                ) : (
                  <div className={styles.mediaFallback} aria-hidden />
                )}
              </div>
              <div className={styles.portfolioMeta}>
                <h3 className={styles.portfolioTitleEn}>
                  {titleEn || title}
                </h3>
                {titleFa ? (
                  <p className={`fa ${styles.portfolioTitleFa}`} lang="fa">
                    {titleFa}
                  </p>
                ) : null}
              </div>
              {controlsMode !== "none" ? (
                <div className={`tile-hover ${styles.cardFoot} ${styles.cardFootSolo}`}>
                  <CatalogCardControls
                    mode={controlsMode}
                    busy={removeBusy}
                    onManage={onManage}
                    onEdit={() =>
                      window.alert(`Edit portfolio coming soon: ${title}`)
                    }
                    onRemove={() => setRemoving(item)}
                  />
                </div>
              ) : null}
            </article>
          );
        })}
      </div>
      {!items.length && !busy ? (
        <CatalogEmptyState
          icon="/images/icons/gear.svg"
          title={emptyLabel}
          lead={en.portfolios.emptyLead}
          actionHref={addHref}
          actionLabel={en.portfolios.add}
        />
      ) : null}
      <CatalogPagination
        page={page}
        total={total}
        pageSize={PORTFOLIO_PAGE_SIZE}
        busy={busy}
        onChange={(next) => void loadPage(next)}
      />
      <ConfirmDialog
        open={controlsMode === "edit-remove" && Boolean(removing)}
        kicker="Remove"
        title={`Remove ${removing ? portfolioTitle(removing) : "portfolio"}?`}
        message="This deletes the portfolio from Meshkee. This cannot be undone."
        confirmLabel="Remove"
        cancelLabel="Keep"
        danger
        busy={removeBusy}
        onClose={() => {
          if (!removeBusy) setRemoving(null);
        }}
        onConfirm={() => {
          void confirmRemove();
        }}
      />
    </div>
  );
}