"use client";

import { Alert, Drawer, Group, Loader, Stack, Text } from "@mantine/core";
import { useEffect, useState } from "react";
import MemberClientPage from "@/routes/members/account/_client";
import { getBookingsByMembership } from "@/lib/features/bookings/query";
import type { CoreBookingUnit } from "@/lib/features/bookings/types";
import {
  getMemberShipContacts,
  getMembershipDetails,
} from "@/lib/features/members/query";
import type {
  CoreMemberDetailed,
  VpAccountDetails,
} from "@/lib/features/members/types";

interface Props {
  membershipNumber: string | null;
  onClose: () => void;
}

export default function MemberDetailDrawer({
  membershipNumber,
  onClose,
}: Props) {
  const [loading, setLoading] = useState(false);
  const [account, setAccount] = useState<VpAccountDetails | null>(null);
  const [contacts, setContacts] = useState<CoreMemberDetailed[]>([]);
  const [bookings, setBookings] = useState<{
    data: CoreBookingUnit[];
    totalRows: number;
  }>({ data: [], totalRows: 0 });
  const [errors, setErrors] = useState<{
    account?: string;
    contacts?: string;
    bookings?: string;
  }>({});

  useEffect(() => {
    if (!membershipNumber) return;
    let cancelled = false;
    setLoading(true);
    setAccount(null);
    setContacts([]);
    setBookings({ data: [], totalRows: 0 });
    setErrors({});

    (async () => {
      const acc = await getMembershipDetails(membershipNumber);
      if (cancelled) return;
      const accountData = acc?.success ? (acc.data?.account ?? null) : null;
      setAccount(accountData);
      if (!acc?.success) {
        setErrors((e) => ({
          ...e,
          account: acc?.message || "Failed to load account",
        }));
      }
      const realId = (accountData?.AccountID as string) || membershipNumber;
      const [contactsRes, bookingsRes] = await Promise.all([
        getMemberShipContacts(realId),
        getBookingsByMembership(1, 15, realId),
      ]);
      if (cancelled) return;
      setContacts(
        contactsRes?.success ? (contactsRes.data?.members ?? []) : [],
      );
      if (!contactsRes?.success) {
        setErrors((e) => ({
          ...e,
          contacts: contactsRes?.message || "Failed to load contacts",
        }));
      }
      setBookings({
        data: bookingsRes?.success ? (bookingsRes.data?.bookings ?? []) : [],
        totalRows: bookingsRes?.success
          ? (bookingsRes.data?.pagination?.total ?? 0)
          : 0,
      });
      if (!bookingsRes?.success) {
        setErrors((e) => ({
          ...e,
          bookings: bookingsRes?.message || "Failed to load bookings",
        }));
      }
      setLoading(false);
    })();

    return () => {
      cancelled = true;
    };
  }, [membershipNumber]);

  return (
    <Drawer
      opened={!!membershipNumber}
      onClose={onClose}
      position="right"
      size="80%"
      padding={0}
      withCloseButton
      title={null}
    >
      {loading && !account ? (
        <Group justify="center" py="xl">
          <Loader size="sm" />
        </Group>
      ) : !account ? (
        <Stack px="md" py="lg" gap="sm">
          <Alert color="red" variant="light">
            {errors.account || "No account details found for this member."}
          </Alert>
          {errors.contacts && (
            <Alert color="orange" variant="light">
              Contacts: {errors.contacts}
            </Alert>
          )}
          {errors.bookings && (
            <Alert color="orange" variant="light">
              Bookings: {errors.bookings}
            </Alert>
          )}
          <Text size="sm" c="dimmed">
            Membership #: {membershipNumber}
          </Text>
        </Stack>
      ) : (
        <MemberClientPage
          account={account}
          contacts={contacts}
          bookings={bookings}
          syncTabWithUrl={false}
        />
      )}
    </Drawer>
  );
}