import Layout from "@/components/layout/Layout";
import Link from "next/link";
import moment from "moment";
import { events } from "@/utility/constant.utils";

const formatEventDate = (dateStr) => {
    if (!dateStr) return "Details will be announced";

    return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
        const m = moment(date, "YYYY-MM-DD", true);
        return m.isValid() ? m.format("MMM D, YYYY") : date;
    });
};

export default function UpcomingEventSinglePage({ slug }) {
    const event = events.find((item) => item.slug === slug);

    if (!event) {
        return null;
    }

    const eventDate = formatEventDate(event.date);
    const eventLocation = event.location || "Venue will be confirmed";

    return (
        <Layout headerStyle={1} footerStyle={1}>
            <div>
                <div
                    className="inner-page-header"
                    style={{
                        backgroundImage: "url(/assets/img/event/upcoming-event/upcoming-events-banner.webp)",
                        backgroundSize: "cover",
                        backgroundPosition: "center",
                    }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="heading1">
                                    <h1>{event.title}</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" />{" "}
                                        <span>{event.title}</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="blog-details-section sp4 pb-4 mb-4">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="blog-deatils-content heading2">
                                    <div className="about2-header heading4 text-center">
                                        <h2 className="text-anime-style-3">{event.title}</h2>
                                        <div className="space16" />
                                        <p>{event.desc || "More details will be updated soon."}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="about6-section-area sp4 pt-0">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6 order-2 order-lg-1">
                                <div
                                    className="img text-center"
                                    style={{
                                        background: "#f8f8f8",
                                        borderRadius: "8px",
                                        padding: "24px",
                                    }}
                                >
                                    <img
                                        src={event.image}
                                        alt={event.title}
                                        style={{
                                            width: "100%",
                                            maxWidth: "420px",
                                            height: "auto",
                                            objectFit: "contain",
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="col-lg-6 order-1 order-lg-2 mb-5">
                                <div className="about2-header heading4">
                                    <h3 className="text-anime-style-3">Event Details</h3>
                                    <div className="space16" />
                                    <div className="about6-header heading9 space-margin60 mb-4">
                                        <ul>
                                            <li>Date: {eventDate}</li>
                                        </ul>
                                        <div className="space18" />
                                        <ul>
                                            <li>Venue: {eventLocation}</li>
                                        </ul>
                                        <div className="space18" />
                                        <ul>
                                            <li>Time: {event.time || "Details will be announced"}</li>
                                        </ul>
                                        <div className="space18" />
                                        {event.admission && (
                                            <>
                                                <ul>
                                                    <li>Admission: {event.admission}</li>
                                                </ul>
                                                <div className="space18" />
                                            </>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="pricing-lan-section-area sp4 pt-0">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-10 m-auto">
                                <div className="mission">
                                    <div className="heading2 mb-4">
                                        <h3>Additional Information</h3>
                                    </div>
                                    <ul className="list-unstyled">
                                        <li className="d-flex mb-3">
                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                            <span>Program details will be updated as they are confirmed.</span>
                                        </li>
                                        <li className="d-flex mb-3">
                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                            <span>Registration or ticket information will be added here when available.</span>
                                        </li>
                                        <li className="d-flex mb-3">
                                            <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                            <span>Please check back closer to the event date for final details.</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}