"use client";

/**
 * Internal vs curated booking split for one promo code's members.
 *
 * Uses the same `AnimatedDonut` and the same --role-internal / --role-curated
 * colours as the campaign analytics card, so the two pages describe the same
 * split identically and both follow the theme accent.
 */

import { Badge, Card, Group, Stack, Text } from "@mantine/core";
import { useMemo } from "react";
import { usePromoTheme } from "./appearance";
import { AnimatedDonut, type DonutDatum } from "./charts/AnimatedDonut";
import styles from "./promo.module.css";

interface UserBookingsAnalyticsCardProps {
  users: Array<{
    internal_bookings_count?: number;
    external_bookings_count?: number;
  }>;
  totalUsers?: number;
  analytics?: {
    totalInternalBookings?: number;
    totalExternalBookings?: number;
    byPromoCode?: Array<{
      internal_bookings?: number;
      external_bookings?: number;
    }>;
  } | null;
  withCardWrapper?: boolean;
}

export function UserBookingsAnalyticsCard({
  users,
  analytics,
  withCardWrapper = true,
}: UserBookingsAnalyticsCardProps) {
  const totals = useMemo(() => {
    if (analytics) {
      const byCode = analytics.byPromoCode?.[0];
      const internal = Number(
        analytics.totalInternalBookings ?? byCode?.internal_bookings ?? 0,
      );
      const external = Number(
        analytics.totalExternalBookings ?? byCode?.external_bookings ?? 0,
      );
      if (internal > 0 || external > 0) {
        return {
          internalBookings: internal,
          externalBookings: external,
          totalBookings: internal + external,
        };
      }
    }

    let internalBookings = 0;
    let externalBookings = 0;

    for (const u of users) {
      internalBookings += Number(u.internal_bookings_count || 0);
      externalBookings += Number(u.external_bookings_count || 0);
    }

    return {
      internalBookings,
      externalBookings,
      totalBookings: internalBookings + externalBookings,
    };
  }, [analytics, users]);

  const { roles } = usePromoTheme();

  // Zero-value slices are dropped rather than drawn: a 0-wide arc renders as a
  // hairline and its gradient has a zero-area bounding box.
  const slices = useMemo<DonutDatum[]>(
    () =>
      [
        {
          name: "Karma Subito bookings",
          value: Number(totals.internalBookings || 0),
          color: roles.internal.from,
          colorTo: roles.internal.to,
        },
        {
          name: "Curated bookings",
          value: Number(totals.externalBookings || 0),
          color: roles.external.from,
          colorTo: roles.external.to,
        },
      ].filter((s) => s.value > 0),
    [totals, roles],
  );

  const content = (
    <>
      <Group justify="space-between" align="center" mb="sm">
        <Text fw={700} size="md">
          User Booking Distribution Analytics
        </Text>
        <Group gap={6}>
          <Badge
            variant="light"
            size="md"
            className={styles.dataBadge}
            data-role="internal"
          >
            Karma Subito: {totals.internalBookings}
          </Badge>
          <Badge
            variant="light"
            size="md"
            className={styles.dataBadge}
            data-role="curated"
          >
            Curated: {totals.externalBookings}
          </Badge>
        </Group>
      </Group>

      {slices.length > 0 ? (
        <AnimatedDonut
          data={slices}
          height={220}
          centerLabel="Total bookings"
          unit="booking"
        />
      ) : (
        <Stack align="center" justify="center" py="lg" style={{ opacity: 0.6 }}>
          <Text size="sm" c="dimmed">
            No member booking activity recorded for this promo code yet.
          </Text>
        </Stack>
      )}
    </>
  );

  if (!withCardWrapper) return content;

  return (
    <Card className={styles.sectionCard} padding="md" mb="md">
      {content}
    </Card>
  );
}