import { useEffect } from "react";
import type { ReactNode } from "react";

import PageHeader from "@/components/PageHeader";
import { useEventsActions } from "@/hooks/useEventsActions";
import { useEventsStore } from "@/stores/useEventsStore";
import type { ApiEvent } from "@/types";
import { formatEventDate } from "@/utils/eventDate";

/**
 * Where "register today" points. Already-registered events have nothing to
 * register for, and an event without a registration link has nowhere to go —
 * in both cases the row is plain text rather than a dead link.
 */
const registrationLink = (event: ApiEvent) =>
    event.is_participant ? null : event.registration_link;

interface RegisterLinkProps {
    children: ReactNode;
    className?: string;
    event: ApiEvent;
}

const RegisterLink = ({ children, className, event }: RegisterLinkProps) => {
    const href = registrationLink(event);

    if (!href) {
        return <span className={className}>{children}</span>;
    }

    return (
        <a
            aria-label={`Register for ${event.name}`}
            className={className}
            href={href}
            rel="noreferrer"
            target="_blank"
        >
            {children}
        </a>
    );
};

const UpcomingEventsPage = () => {
    const { error, events, isLoading } = useEventsStore();
    const { fetchEvents } = useEventsActions();

    useEffect(() => {
        void fetchEvents();
    }, []);

    return (
        <article className="portal-card from-lsi-page upcoming-events-page">
            <PageHeader
                eyebrowParent="From LSI"
                eyebrowCurrent="Your Upcoming Events"
                title="Your upcoming events"
                description="Registrations, travel logistics, and what's next on your LSI calendar."
            />

            <section className="from-lsi-panel">
                <p className="from-lsi-panel__intro mb-0">
                    Registrations and travel for the year ahead
                </p>

                <div className="from-lsi-divider" />

                {error ? (
                    <p className="alert alert-danger mb-4" role="alert">
                        {error}
                    </p>
                ) : null}

                {isLoading ? (
                    <p className="text-muted">Loading events…</p>
                ) : events.length === 0 ? (
                    <p className="text-muted mb-0">
                        No upcoming events available.
                    </p>
                ) : (
                    <div className="row g-3 g-md-4">
                        {events.map((event) => (
                            <div className="col-6" key={event.id}>
                                <article className="upcoming-event-row bg-white d-flex flex-column flex-md-row align-items-md-center gap-3 h-100">
                                    <RegisterLink
                                        className="upcoming-event-row__thumb flex-shrink-0"
                                        event={event}
                                    >
                                        <img
                                            className="lsi-event-thumb"
                                            src={event.image ?? undefined}
                                            alt=""
                                            aria-hidden="true"
                                        />
                                    </RegisterLink>

                                    <div className="min-w-0 flex-grow-1">
                                        <h2 className="lsi-event-title mb-2">
                                            <RegisterLink
                                                className="upcoming-event-row__title"
                                                event={event}
                                            >
                                                {event.name}
                                            </RegisterLink>
                                        </h2>
                                        <p className="lsi-event-meta mb-0">
                                            {formatEventDate(event)} &middot;{" "}
                                            {event.location}
                                        </p>
                                    </div>

                                    {event.is_participant ? (
                                        <span className="portal-status portal-status--success">
                                            registered
                                        </span>
                                    ) : (
                                        <RegisterLink
                                            className="portal-status portal-status--warning"
                                            event={event}
                                        >
                                            register today
                                        </RegisterLink>
                                    )}
                                </article>
                            </div>
                        ))}
                    </div>
                )}
            </section>
        </article>
    );
};

export default UpcomingEventsPage;