cyberia/research/events/client/src/features/event-details/ui/EventDetails.tsx

import { eventQueries } from "@/entities/event";
import { cn } from "@/shared/lib/utils";
import { useQuery } from "@tanstack/react-query";

import { useAuthSlice } from "@/app/providers";
import type { LatLng } from "@/entities/geodata";
import { StatusBage } from "@/features/events-list/ui/StatusBage";
import { MaybeManageEvent } from "@/features/manage-event";
import { Ticket } from "@/features/ticket";
import { getTicketPriceRangeDisplay } from "@/shared/lib/formatTicketPriceRange";
import { formatTimestamp } from "@/shared/lib/formatTimestamp";
import { getTimeString } from "@/shared/lib/getTimeString";
import { pluralDays, pluralTickets } from "@/shared/lib/pluralDays";
import { ErrorMessage } from "@/shared/ui/ErrorMessage";
import { Loader } from "@/shared/ui/Loader";
import { Button } from "@/shared/ui/button";
import { useNavigate } from "react-router";
import { DetailsBlock } from "./DetailsBlock";

import { useLogin } from "@/features/login";
import { checkPermission } from "@/shared/lib/RBAC";

type EventDetailsProps = {
  eventId: number;
};

export const EventDetails: React.FC<EventDetailsProps> = ({ eventId }) => {
  const navigate = useNavigate();
  const { user } = useAuthSlice();
  const { LoginBtn, buttonProps } = useLogin();
  const {
    data: event,
    error,
    isLoading,
  } = useQuery(eventQueries.detail(eventId));

  if (isLoading) return <Loader />;
  if (error) return <ErrorMessage errors={error} />;
  if (!event) return <ErrorMessage errors={error} />;

  const {
    imageUrl,
    title,
    description,
    place,
    ticketPriceRange,
    ticketsBought,
    startDateTimestamp,
    daysAmount,
    status,
    website,
  } = event;

  const priceMinDisplay = getTicketPriceRangeDisplay(ticketPriceRange);

  function placeClickHandler() {
    const location = place.geometry.coordinates[0] as LatLng;
    const url = `/map/?lat=${location.lat}&lng=${location.lng}`;
    navigate(url);
  }

  const isCreator = user?.address === event.creator.address;
  const isPermitted = checkPermission(user?.roles, "event:edit");

  return (
    <div className="flex flex-col">
      <div className="relative">
        <a
          href={website || undefined}
          target="_blank"
          className="absolute top-3 right-2 aspect-square h-10 rounded-full flex items-center justify-center bg-black"
          rel="noreferrer"
        >
          <p className="text-3xl font-bold text-primary">?</p>
        </a>
        <img
          className="w-full aspect-video object-cover object-center"
          src={imageUrl ?? "/event_default.jpg"}
          alt={title}
        />
        <div className="absolute top-3 left-2">
          {status === "approved" ? (
            <div className="px-3 py-1 text-primary text-md font-semibold rounded-full self-start bg-black">
              {pluralTickets(place.maxTickets - (ticketsBought || 0))} available
            </div>
          ) : (
            <StatusBage status={status} />
          )}
        </div>
      </div>
      <div className="bg-secondary py-10 px-4 text-black space-y-8">
        <h2 className="font-semibold text-3xl">{title}</h2>
        <p className="text-xl break-words">{description}</p>
      </div>

      <div className="px-4 pt-5">
        <DetailsBlock
          icon="/icons/event place_2.svg"
          title="Location"
          information={
            <button
              type="button"
              className="underline underline-offset-2 text-secondary"
              onClick={placeClickHandler}
            >
              {place.title}
            </button>
          }
        />
      </div>
      <div className="grid grid-cols-2 gap-3 px-4 py-3">
        <DetailsBlock
          icon="/icons/calendar.svg"
          title="Date and time"
          information={`${formatTimestamp(startDateTimestamp)} (${getTimeString(startDateTimestamp)})`}
          className={cn(isCreator || isPermitted || "col-span-2")}
        />
        <DetailsBlock
          icon="/icons/duration_2.svg"
          title="Duration"
          information={`${daysAmount} ${pluralDays(daysAmount)}`}
        />

        {(isCreator || isPermitted) && (
          <DetailsBlock
            icon="/icons/Attendees_2.svg"
            title="Tickets available"
            information={pluralTickets(
              place.maxTickets - Number(ticketsBought),
            )}
          />
        )}
        <DetailsBlock
          icon="/icons/price_2.svg"
          title={priceMinDisplay ? "Price from" : "Price"}
          information={priceMinDisplay ?? "Sold out"}
        />
      </div>

      {status !== "submitted" && (
        <Button
          filling="outline"
          className="m-5"
          onClick={() => navigate("attendees")}
        >
          Event Attendees
        </Button>
      )}
      {user ? (
        <>
          <MaybeManageEvent
            eventId={eventId}
            canEdit={isPermitted}
            roles={user.roles}
            status={event.status}
          />

          <div className="sticky bottom-2 mt-2 px-4">
            <Ticket event={event} user={user} />
          </div>
        </>
      ) : (
        <div className="p-5">
          <LoginBtn {...buttonProps} title="Login to get the ticket" />
        </div>
      )}
    </div>
  );
};