community-rule/app/(app)/create/screens/review/CommunityReviewScreen.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Rule from "../../../../components/cards/Rule";
import Button from "../../../../components/buttons/Button";
import { useTranslation } from "../../../../contexts/MessagesContext";
import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
import { useCreateFlow } from "../../context/CreateFlowContext";
import { useCreateFlowLgUp } from "../../hooks/useCreateFlowLgUp";
import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
import {
  CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
} from "../../components/createFlowLayoutTokens";
import {
  getAssetPath,
  vectorMarkPath,
} from "../../../../../lib/assetUtils";
import { methodSectionsPinsForHydratedSelections } from "../../../../../lib/create/publishedDocumentToCreateFlowState";
import { CREATE_ROUTES, createFlowStepPath } from "../../utils/createFlowPaths";

/** Create Community review — Figma `19706:12135` (`/create/review`; two columns from `lg:`; column caps in `createFlowLayoutTokens`). */
export function CommunityReviewScreen() {
  const router = useRouter();
  const lgUp = useCreateFlowLgUp();
  const t = useTranslation("create.community.review");
  const { state, updateState } = useCreateFlow();
  /**
   * Server layout has an empty context; the client layout may already hold a
   * named draft. Defer empty-vs-congrats until after mount so the first paint
   * matches SSR (`null`) instead of swapping HeaderLockup titles.
   */
  const [reviewReady, setReviewReady] = useState(false);
  useEffect(() => {
    setReviewReady(true);
  }, []);

  /**
   * If the user picked **Customize** from a template before finishing community
   * stage, we pinned `pendingTemplateAction` so this screen can skip itself
   * and `replace` to `core-values`. **Use without changes** does not skip
   * identity: if they land here with that pin, send them to `community-name`
   * and leave the pin so name → description → photo stay in the skip list.
   *
   * Ref guard covers React 18 StrictMode's double-mount in dev so we don't
   * fire `router.replace` twice on the same transition.
   */
  const firedRedirectRef = useRef(false);
  useEffect(() => {
    if (firedRedirectRef.current) return;
    const pending = state.pendingTemplateAction;
    if (!pending) return;
    if (pending.mode !== "customize") {
      firedRedirectRef.current = true;
      router.replace(createFlowStepPath("community-name"));
      return;
    }
    const target = createFlowStepPath("core-values");
    firedRedirectRef.current = true;
    const pinMerge = {
      methodSectionsPinCommitted: {
        ...state.methodSectionsPinCommitted,
        ...methodSectionsPinsForHydratedSelections(state),
      },
    };
    updateState({ pendingTemplateAction: undefined, ...pinMerge });
    router.replace(target);
  }, [
    router,
    state.pendingTemplateAction,
    state.methodSectionsPinCommitted,
    state.selectedCommunicationMethodIds,
    state.selectedMembershipMethodIds,
    state.selectedDecisionApproachIds,
    state.selectedConflictManagementIds,
    updateState,
  ]);

  const cardTitle =
    typeof state.title === "string" && state.title.trim().length > 0
      ? state.title.trim()
      : "";
  /**
   * No placeholder fallback: if the user skipped `community-context`, leave
   * the card description off rather than render sample copy as real user data.
   */
  const cardDescription =
    typeof state.communityContext === "string" &&
    state.communityContext.trim().length > 0
      ? state.communityContext.trim()
      : undefined;

  const avatarUrl =
    typeof state.communityAvatarUrl === "string" &&
    state.communityAvatarUrl.trim().length > 0
      ? state.communityAvatarUrl.trim()
      : null;

  if (state.pendingTemplateAction || !reviewReady) {
    return null;
  }

  if (!cardTitle) {
    return (
      <CreateFlowStepShell
        variant="centeredNarrow"
        contentTopBelowMd="space-1400"
      >
        <div
          className={`flex flex-col items-start gap-6 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
        >
          <CreateFlowHeaderLockup
            title={t("empty.title")}
            description={t("empty.description")}
          />
          <Button
            buttonType="filled"
            palette="default"
            size="xsmall"
            href={CREATE_ROUTES.createFirstStep}
          >
            {t("empty.startLabel")}
          </Button>
        </div>
      </CreateFlowStepShell>
    );
  }

  return (
    <CreateFlowStepShell
      variant="wideGridLoosePadding"
      contentTopBelowMd="space-1400"
    >
      <div
        className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--measures-spacing-1200,48px)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
      >
        <div
          className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
        >
          <CreateFlowHeaderLockup
            title={t("header.title")}
            description={t("header.description")}
          />
        </div>
        <div className={CREATE_FLOW_MD_UP_GRID_CELL_CLASS}>
          <Rule
            title={cardTitle}
            description={cardDescription}
            size={lgUp ? "L" : "M"}
            expanded={false}
            backgroundColor="bg-[var(--color-teal-teal50,#c9fef9)]"
            logoUrl={
              avatarUrl ?? getAssetPath(vectorMarkPath("mutual-aid"))
            }
            logoAlt={cardTitle}
            className="rounded-[24px]"
          />
        </div>
      </div>
    </CreateFlowStepShell>
  );
}