"use client";

import { ActionIcon, Alert, Container, Group } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { useNavigate } from "react-router";
import MemberContactClientPage from "@/routes/members/account/contact/_client";
import type {
  CoreMemberDetailed,
  CoreMemberSession,
} from "@/lib/features/members/types";
import type { AccessScope } from "@/lib/features/types";

interface Props {
  // Omitted when reached from the standalone promo-codes route (no campaign).
  campaignId?: string;
  promoCodeId: string;
  membershipNumber: string;
  member: CoreMemberDetailed | undefined;
  sessions: CoreMemberSession[];
  accessScope: AccessScope;
  // Overrides the back link for non-promo sections (e.g. Reports).
  backHref?: string;
}

export default function ContactInPromoCodeClient({
  campaignId,
  promoCodeId,
  membershipNumber,
  member,
  sessions,
  accessScope,
  backHref,
}: Props) {
  const navigate = useNavigate();
  const memberHref =
    backHref ??
    (campaignId
      ? `/admin/promo-code-campaigns/${campaignId}/promo-codes/${promoCodeId}/members/${membershipNumber}`
      : `/admin/promo-codes/${promoCodeId}/members/${membershipNumber}`);
  return (
    <Container fluid px={0} py="md">
      <Group px="xl" mb="sm">
        <ActionIcon variant="subtle" onClick={() => navigate(memberHref)}>
          <IconArrowLeft size={18} />
        </ActionIcon>
      </Group>
      {!member ? (
        <Alert color="red" mx="xl" variant="light">
          Couldn&apos;t load contact details.
        </Alert>
      ) : (
        <MemberContactClientPage
          member={member}
          sessions={sessions}
          accessScope={accessScope}
        />
      )}
    </Container>
  );
}