import type {
  CoreMemberActivityLog,
  CoreMemberDetailed,
  CoreMemberSavedSearch,
  CoreMemberSession,
} from "@/lib/features/members/types";
import type { AccessScope } from "@/lib/features/types";
import {
  ActionIcon,
  Avatar,
  Badge,
  Divider,
  Flex,
  Group,
  Grid,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { Link } from "react-router";
import ContactDetails from "./(widgets)/contactDetails";
import ContactInterests from "./(widgets)/contactInterests";
import MoreDetailsTab from "./(widgets)/moreDetailsTab";
import ResetPasswordPopup from "./(widgets)/resetPasswordPopup";
import SyncProfile from "./(widgets)/syncProfile";

const MemberContactClientPage: React.FC<{
  member: CoreMemberDetailed;
  sessions: CoreMemberSession[];
  memberLogs?: CoreMemberActivityLog[];
  savedSearches?: CoreMemberSavedSearch[];
  /** Per-area read scopes; a false entry hides that sub-tab entirely. */
  tabScopes?: {
    sessions: boolean;
    activityLogs: boolean;
    savedSearches: boolean;
  };
  /** Member-module capabilities for the signed-in user. */
  actionScopes?: { resetPassword: boolean; syncProfile: boolean };
  /** Where the user came from (promo drilldowns redirect here). */
  backHref?: string;
  backLabel?: string;
  accessScope: AccessScope;
}> = ({
  member,
  sessions,
  memberLogs,
  savedSearches,
  tabScopes,
  actionScopes,
  accessScope,
  backHref,
  backLabel,
}) => {
  return (
    <Stack px={28}>
      {backHref ? (
        <Group gap={6} pt={12}>
          <ActionIcon
            variant="subtle"
            component={Link}
            to={backHref}
            aria-label="Back"
          >
            <IconArrowLeft size={18} />
          </ActionIcon>
          <Text fz={12} c="dimmed">
            Back{backLabel ? ` to ${backLabel}` : ""}
          </Text>
        </Group>
      ) : null}
      <Flex gap={24} direction={"column"} pb={34}>
        <Flex align={"end"} justify={"space-between"} py={32}>
          <Flex align={"center"} gap={15}>
            <Avatar
              src={member?.avatar}
              alt={member?.first_name}
              w={50}
              h={50}
            />
            <Flex direction={"column"} gap={2}>
              <Flex align={"center"} gap={8}>
                <Title fz={18} fw={"bold"}>
                  {member?.first_name}, {member?.last_name}
                </Title>
                <Divider orientation="vertical" h={26} my={"auto"} />
                <Text c="var(--promo-accent)" fz={18} tt={"capitalize"}>
                  {member?.account_type_name?.toLowerCase()}
                </Text>
                <Badge
                  variant="light"
                  radius={4}
                  fz={12}
                  tt={"capitalize"}
                  size="lg"
                >
                  {member?.is_active ? "Active" : "Inactive"}
                </Badge>
              </Flex>
              <Flex gap={5}>
                <Text fz={12} fw={500}>
                  {member?.membership_number}
                </Text>
                <Divider orientation="vertical" h={12} my={"auto"} />
                <Text fz={12} fw={500}>
                  {member?.member_number}
                </Text>
              </Flex>
            </Flex>
          </Flex>
          <Flex gap={12} align={"center"}>
            {member?.member_id && member?.id && actionScopes?.syncProfile && (
              <SyncProfile
                profileID={member.id}
                accountId={member.membership_number}
                contactId={member.member_number}
              />
            )}
            {member?.member_id && actionScopes?.resetPassword && (
              <ResetPasswordPopup memberRecordId={member.member_id} />
            )}
          </Flex>
        </Flex>
        {member?.personal_interests?.length && (
          <Grid
            style={{
              borderBlock:
                "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
            }}
            overflow="hidden"
          >
            <Grid.Col
              span={8}
              px={25}
              py={30}
              style={{
                borderRight:
                  "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
              }}
            >
              <ContactDetails member={member} />
            </Grid.Col>
            <Grid.Col span={4} px={25} py={30}>
              <ContactInterests interests={member?.personal_interests} />
            </Grid.Col>
          </Grid>
        )}

        {/* {member?.crmData?.length ? <CrmData crmData={member?.crmData} /> : null} */}
        <MoreDetailsTab
          crmData={member?.crmData ?? []}
          sessions={sessions}
          memberLogs={memberLogs}
          savedSearches={savedSearches}
          tabScopes={tabScopes}
        />
      </Flex>
    </Stack>
  );
};

export default MemberContactClientPage;