index.tsx

import {ActionIcon, Tooltip} from '@mantine/core';
import {Event, EventType, IdParam, LocationType, Product} from "../../../types.ts";
import classes from "./EventCard.module.scss";
import {NavLink, useNavigate} from "react-router";
import {
    IconArchive,
    IconCopy,
    IconDotsVertical,
    IconEye,
    IconRepeat,
    IconSettings,
} from "@tabler/icons-react";
import {t} from "@lingui/macro"
import {eventHomepagePath} from "../../../utilites/urlHelper.ts";
import {useDisclosure} from "@mantine/hooks";
import {DuplicateEventModal} from "../../modals/DuplicateEventModal";
import {useState} from "react";
import {ActionMenu, ActionMenuItemsGroup} from '../ActionMenu';
import {confirmationDialog} from "../../../utilites/confirmationDialog.tsx";
import {showError, showSuccess} from "../../../utilites/notifications.tsx";
import {useUpdateEventStatus} from "../../../mutations/useUpdateEventStatus.ts";
import {formatCurrency} from "../../../utilites/currency.ts";
import {formatNumber} from "../../../utilites/helpers.ts";
import {formatDateWithLocale, isValidDate, relativeDate} from "../../../utilites/dates.ts";
import {Card} from "../Card";
import {resolveEventLocation} from "../../../utilites/effectiveLocation.ts";
import {formatAddress} from "../../../utilites/addressUtilities.ts";

const placeholderGradients = [
    'linear-gradient(135deg, var(--mantine-color-violet-5) 0%, var(--mantine-color-indigo-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-pink-5) 0%, var(--mantine-color-grape-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-blue-5) 0%, var(--mantine-color-cyan-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-teal-5) 0%, var(--mantine-color-green-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-orange-5) 0%, var(--mantine-color-yellow-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-indigo-5) 0%, var(--mantine-color-blue-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-grape-5) 0%, var(--mantine-color-violet-5) 100%)',
    'linear-gradient(135deg, var(--mantine-color-cyan-5) 0%, var(--mantine-color-teal-5) 100%)',
];

interface EventCardProps {
    event: Event;
    compact?: boolean;
}

export function EventCard({event, compact = false}: EventCardProps) {
    const navigate = useNavigate();
    const [isDuplicateModalOpen, duplicateModal] = useDisclosure(false);
    const [eventId, setEventId] = useState<IdParam>();
    const statusToggleMutation = useUpdateEventStatus();

    const coverImage = event.images?.find(img => img.type === 'EVENT_COVER');
    const gradientIndex = event.id ? Number(event.id) % placeholderGradients.length : 0;
    const placeholderGradient = placeholderGradients[gradientIndex];

    const handleDuplicate = () => {
        setEventId(event.id);
        duplicateModal.open();
    }

    const handleStatusToggle = () => {
        const message = event?.status !== 'ARCHIVED'
            ? t`Are you sure you want to archive this event?`
            : t`Are you sure you want to restore this event? It will be restored as a draft event.`;

        confirmationDialog(message, () => {
            statusToggleMutation.mutate({
                eventId: event.id,
                status: event?.status === 'ARCHIVED' ? 'DRAFT' : 'ARCHIVED'
            }, {
                onSuccess: () => {
                    showSuccess(t`Event status updated`);
                },
                onError: (error: any) => {
                    showError(error?.response?.data?.message || t`Event status update failed. Please try again later`);
                }
            });
        })
    }

    const getStatusConfig = () => {
        if (event.status === 'ARCHIVED') {
            return {label: t`Archived`, status: 'archived', tone: 'muted'};
        }
        if (event.lifecycle_status === 'ENDED') {
            return {label: t`Ended`, status: 'ended', tone: 'muted'};
        }
        if (event.status === 'DRAFT') {
            return {label: t`Draft`, status: 'draft', tone: 'warning'};
        }
        if (event.lifecycle_status === 'ONGOING') {
            return {label: t`Live`, status: 'live', tone: 'success', pulse: true};
        }
        return {label: t`On Sale`, status: 'onsale', tone: 'success'};
    };

    const getLocationText = () => {
        const occurrences = event.occurrences ?? [];
        const resolvedList = occurrences.length > 0
            ? occurrences.map(o => resolveEventLocation(event, o))
            : [resolveEventLocation(event, null)];

        const types = new Set<string>();
        const locationIds = new Set<string>();
        for (const r of resolvedList) {
            if (r) {
                types.add(r.type);
                if (r.location_id != null) locationIds.add(String(r.location_id));
            }
        }

        const first = resolvedList[0];
        if (!first) return null;
        if (types.size > 1) return t`Online & in-person`;
        if (first.type === LocationType.Online) return t`Online`;
        if (locationIds.size > 1) return t`Multiple locations`;
        if (first.type !== LocationType.InPerson) return null;
        const city = first.location?.structured_address?.city;
        const venueName = first.location?.name || first.location?.structured_address?.venue_name;
        const formatted = first.location?.structured_address ? formatAddress(first.location.structured_address) : '';
        return venueName ?? city ?? (formatted ? formatted : null);
    };

    const getTicketAvailability = () => {
        const products = event.products;
        if (!products || products.length === 0) return null;

        const ticketProducts = products.filter((p: Product) => p.product_type === 'TICKET');
        if (ticketProducts.length === 0) return null;

        const availableCount = ticketProducts.filter((p: Product) => {
            if (p.status === 'INACTIVE') return false;
            return p.is_available !== false && p.is_sold_out !== true;
        }).length;

        const totalCount = ticketProducts.length;

        if (availableCount === 0) {
            return {text: t`Sold out`, status: 'sold-out'};
        }
        if (availableCount === totalCount) {
            return {
                text: totalCount === 1 ? t`1 ticket type` : t`${totalCount} ticket types`,
                status: 'available'
            };
        }
        return {text: t`${availableCount} of ${totalCount} available`, status: 'partial'};
    };

    const menuItems: ActionMenuItemsGroup[] = [
        {
            label: '',
            items: [
                {
                    label: t`View event page`,
                    icon: <IconEye size={14}/>,
                    onClick: () => window.location.href = eventHomepagePath(event),
                },
                {
                    label: t`Manage event`,
                    icon: <IconSettings size={14}/>,
                    onClick: () => navigate(`/manage/event/${event.id}`),
                },
                {
                    label: t`Duplicate event`,
                    icon: <IconCopy size={14}/>,
                    onClick: handleDuplicate,
                },
                {
                    label: event?.status === 'ARCHIVED' ? t`Restore event` : t`Archive event`,
                    icon: <IconArchive size={14}/>,
                    onClick: handleStatusToggle,
                },
            ],
        },
    ];

    const locationText = getLocationText();

    const revenue = event?.statistics?.sales_total_gross || 0;
    const attendees = event?.statistics?.attendees_registered || 0;

    const statusConfig = getStatusConfig();
    const ticketAvailability = getTicketAvailability();

    const isEnded = event.lifecycle_status === 'ENDED';
    const isDraft = event.status === 'DRAFT';
    const isRecurring = event.type === EventType.RECURRING;

    const displayDate = (isRecurring && event.next_occurrence_start_date) || event.start_date;
    const hasDate = isValidDate(displayDate);
    const monthShort = formatDateWithLocale(displayDate, 'monthShort', event.timezone);
    const dayOfMonth = formatDateWithLocale(displayDate, 'dayOfMonth', event.timezone);
    const shortDateTime = formatDateWithLocale(displayDate, 'shortDateTime', event.timezone);
    const relativeDateStr = relativeDate(displayDate);

    if (compact) {
        return (
            <>
                <div className={`${classes.eventCardCompact} ${isEnded ? classes.isEnded : ''} ${isDraft ? classes.isDraft : ''}`}>
                    <NavLink to={`/manage/event/${event.id}/dashboard`} className={classes.cardLinkCompact}>
                        <div className={classes.compactThumb}>
                            <div
                                className={`${classes.compactImage} ${!coverImage ? classes.placeholderImage : ''}`}
                                style={coverImage
                                    ? {backgroundImage: `url(${coverImage.url})`}
                                    : {background: placeholderGradient}
                                }
                            />
                            {hasDate && (
                                <div className={`${classes.compactDateBadge}`}>
                                    <span className={classes.compactDateDay}>{dayOfMonth}</span>
                                    <span className={classes.compactDateMonth}>{monthShort}</span>
                                </div>
                            )}
                        </div>

                        <div className={classes.compactContent}>
                            <div className={classes.compactPrimary}>
                                <span className={classes.compactTitle}>{event.title}</span>
                                {isRecurring && (
                                    <span className={classes.compactRecurringIcon} aria-label={t`Recurring`}>
                                        <IconRepeat size={12}/>
                                    </span>
                                )}
                            </div>
                            <div className={classes.compactMeta}>
                                <span className={`${classes.compactStatus} ${classes[`compactStatus-${statusConfig.tone}`]}`}>
                                    {statusConfig.pulse && <span className={classes.compactStatusDot}/>}
                                    {statusConfig.label}
                                </span>
                                <span className={classes.compactDot}>·</span>
                                <span className={classes.compactMetaItem}>
                                    {hasDate ? shortDateTime : t`No date added`}
                                </span>
                                {hasDate && (
                                    <>
                                        <span className={classes.compactDot}>·</span>
                                        <span className={classes.compactMetaItem}>{relativeDateStr}</span>
                                    </>
                                )}
                                {locationText && (
                                    <>
                                        <span className={classes.compactDot}>·</span>
                                        <span className={`${classes.compactMetaItem} ${classes.compactLocation}`}>
                                            {locationText}
                                        </span>
                                    </>
                                )}
                                {ticketAvailability && (
                                    <>
                                        <span className={classes.compactDot}>·</span>
                                        <span className={`${classes.compactTickets} ${classes[`compactTickets-${ticketAvailability.status}`]}`}>
                                            {ticketAvailability.text}
                                        </span>
                                    </>
                                )}
                            </div>
                        </div>

                        <div className={classes.compactStats}>
                            <div className={classes.compactStat}>
                                <span className={classes.compactStatValue}>{formatNumber(attendees)}</span>
                                <span className={classes.compactStatLabel}>{t`Attendees`}</span>
                            </div>
                            <div className={classes.compactStat}>
                                <span className={classes.compactStatValue}>{formatCurrency(revenue, event?.currency)}</span>
                                <span className={classes.compactStatLabel}>{t`Revenue`}</span>
                            </div>
                        </div>

                        <div className={classes.compactMenuButton} onClick={(e) => e.preventDefault()}>
                            <ActionMenu
                                itemsGroups={menuItems}
                                target={
                                    <ActionIcon
                                        className={classes.actionButton}
                                        size="sm"
                                        variant="subtle"
                                    >
                                        <IconDotsVertical size={16}/>
                                    </ActionIcon>
                                }
                            />
                        </div>
                    </NavLink>
                </div>
                {isDuplicateModalOpen && <DuplicateEventModal eventId={eventId} onClose={duplicateModal.close}/>}
            </>
        );
    }

    return (
        <>
            <Card className={`${classes.eventCard} ${isEnded ? classes.isEnded : ''} ${isDraft ? classes.isDraft : ''}`}>
                <NavLink to={`/manage/event/${event.id}/dashboard`} className={classes.cardLink}>
                    <div className={classes.imageContainer}>
                        <div
                            className={`${classes.image} ${!coverImage ? classes.placeholderImage : ''}`}
                            style={coverImage
                                ? {backgroundImage: `url(${coverImage.url})`}
                                : {background: placeholderGradient}
                            }
                        />
                        <div className={`${classes.imageOverlay} ${!coverImage ? classes.placeholderOverlay : ''}`}/>

                        <div className={`${classes.statusBadge} ${classes[`status-${statusConfig.status}`]}`}>
                            {statusConfig.pulse && <span className={classes.pulseDot}/>}
                            {statusConfig.label}
                        </div>

                        {hasDate && (
                            <div className={classes.dateBadge}>
                                <span className={classes.dateDay}>{dayOfMonth}</span>
                                <span className={classes.dateMonth}>{monthShort}</span>
                            </div>
                        )}

                        {isRecurring && (
                            <div className={classes.recurringBadge}>
                                <IconRepeat size={12}/>
                            </div>
                        )}
                    </div>

                    <div className={classes.content}>
                        <div className={classes.contentMain}>
                            <h3 className={classes.title}>{event.title}</h3>
                            <div className={classes.meta}>
                                <span className={classes.eventDate}>
                                    {hasDate ? shortDateTime : t`No date added`}
                                    {isRecurring && (
                                        <span className={classes.recurringLabel}>
                                            <IconRepeat size={11}/>
                                            {t`Recurring`}
                                        </span>
                                    )}
                                </span>
                                {hasDate && <span className={classes.relativeDate}>({relativeDateStr})</span>}
                                {locationText && (
                                    <>
                                        <span className={classes.separator}>·</span>
                                        <span className={classes.location}>{locationText}</span>
                                    </>
                                )}
                            </div>
                            <div className={classes.footer}>
                                <span
                                    role="link"
                                    tabIndex={0}
                                    className={classes.organizer}
                                    onClick={(e) => {
                                        e.preventDefault();
                                        e.stopPropagation();
                                        navigate(`/manage/organizer/${event?.organizer?.id}`);
                                    }}
                                    onKeyDown={(e) => {
                                        if (e.key === 'Enter' || e.key === ' ') {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            navigate(`/manage/organizer/${event?.organizer?.id}`);
                                        }
                                    }}
                                >
                                    {event?.organizer?.name}
                                </span>
                                {ticketAvailability && (
                                    <span className={`${classes.ticketStatus} ${classes[`ticket-${ticketAvailability.status}`]}`}>
                                        {ticketAvailability.text}
                                    </span>
                                )}
                            </div>
                        </div>

                        <div className={classes.statsPanel}>
                            <Tooltip label={t`Attendees registered`} withArrow position="top">
                                <div className={classes.stat}>
                                    <span className={classes.statValue}>{formatNumber(attendees)}</span>
                                    <span className={classes.statLabel}>{t`Attendees`}</span>
                                </div>
                            </Tooltip>
                            <Tooltip label={t`Gross revenue`} withArrow position="top">
                                <div className={classes.stat}>
                                    <span className={classes.statValueRevenue}>
                                        {formatCurrency(revenue, event?.currency)}
                                    </span>
                                    <span className={classes.statLabel}>{t`Revenue`}</span>
                                </div>
                            </Tooltip>
                        </div>

                        <div className={classes.menuButton} onClick={(e) => e.preventDefault()}>
                            <ActionMenu
                                itemsGroups={menuItems}
                                target={
                                    <ActionIcon
                                        className={classes.actionButton}
                                        size="md"
                                        variant="subtle"
                                    >
                                        <IconDotsVertical size={18}/>
                                    </ActionIcon>
                                }
                            />
                        </div>
                    </div>
                </NavLink>
            </Card>
            {isDuplicateModalOpen && <DuplicateEventModal eventId={eventId} onClose={duplicateModal.close}/>}
        </>
    );
}