"use client";

/**
 * Figma: "Section / Your Turn" (24239:1397)
 */

import { memo, useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useMessages } from "../../../contexts/MessagesContext";
import { fetchAuthSession } from "../../../../lib/create/api";
import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
import AskOrganizerInquiryModal from "../../modals/AskOrganizerInquiry";
import YourTurnView from "./YourTurn.view";

const YourTurnContainer = memo(() => {
  const router = useRouter();
  const copy = useMessages().pages.about.yourTurn;
  const [signedIn, setSignedIn] = useState(false);
  const [inquiryOpen, setInquiryOpen] = useState(false);

  useEffect(() => {
    let cancelled = false;
    void fetchAuthSession()
      .then(({ user }) => {
        if (!cancelled) setSignedIn(Boolean(user));
      })
      .catch(() => {
        /* guest fallback */
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const onCreateRule = useCallback(() => {
    prepareFreshCreateFlowEntrySync({ signedIn });
    router.push("/create/informational");
  }, [router, signedIn]);

  return (
    <>
      <YourTurnView
        heading={copy.heading}
        body={copy.body}
        createRule={copy.createRule}
        facilitator={copy.facilitator}
        facilitatorHref={copy.facilitatorHref}
        questionsLead={copy.questionsLead}
        faq={copy.faq}
        faqHref={copy.faqHref}
        or={copy.or}
        askOrganizer={copy.askOrganizer}
        illustrationCaption={copy.illustrationCaption}
        onCreateRule={onCreateRule}
        onAskOrganizer={() => setInquiryOpen(true)}
      />
      <AskOrganizerInquiryModal
        isOpen={inquiryOpen}
        onClose={() => setInquiryOpen(false)}
      />
    </>
  );
});

YourTurnContainer.displayName = "YourTurn";

export default YourTurnContainer;