'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import moment from "moment";
import { useState, useEffect } from "react";
import axios from "axios";

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;
    });
};

import { useSearchParams } from "next/navigation";

export default function UpcomingEventSinglePage({ slug: propSlug }) {
    const searchParams = useSearchParams();
    const [event, setEvent] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        let activeSlug = propSlug;
        if (!activeSlug && searchParams) {
            activeSlug = searchParams.get('slug') || searchParams.get('id');
        }
        if (!activeSlug && typeof window !== 'undefined') {
            const parts = window.location.pathname.split('/').filter(Boolean);
            if (parts.length > 0) {
                activeSlug = parts[parts.length - 1];
            }
        }

        const fetchEvent = async () => {
            try {
                const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
                const response = await axios.get(`${API_BASE_URL}/upcoming-events/slug/${activeSlug}`);
                if (response.data && response.data.success) {
                    const e = response.data.data;
                    setEvent({
                        ...e,
                        title: e.title || e.eventtitle,
                        date: e.date || e.eventdate,
                        image: e.image || e.eventimageurl,
                        desc: e.description || e.eventdescription,
                        btnText: e.btn_text || e.btnText,
                        link: e.link || `/upcoming-event/${e.slug}`,
                        location: e.location || e.venue,
                    });
                }
            } catch (error) {
                console.error("Error fetching event details:", error);
            } finally {
                setLoading(false);
            }
        };
        if (activeSlug) {
            fetchEvent();
        } else {
            setLoading(false);
        }
    }, [propSlug, searchParams]);

    if (loading) {
        return (
            <Layout headerStyle={1} footerStyle={1}>
                <div style={{ padding: '150px 0', textAlign: 'center' }}>
                    <div className="spinner-border" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                </div>
            </Layout>
        );
    }

    if (!event) {
        return (
            <Layout headerStyle={1} footerStyle={1}>
                <div style={{ padding: '150px 0', textAlign: 'center' }}>
                    <h2>Event not found</h2>
                    <div className="space20" />
                    <Link href="/upcoming-event" className="vl-btn3">
                        <span className="demo">Back to Events</span>
                    </Link>
                </div>
            </Layout>
        );
    }

    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>
    );
}