'use client';

import { useState } from "react";
import Image from "next/image";
import { useParams } from "next/navigation";

import dayjs from "dayjs";
import parse from "html-react-parser";
import BASE_URL from "@/links";

import { useGetEvents } from "@/api/endpoints/event";
import { EventApiResponse } from "@/api/types/event";
import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";

import { Spinner } from "@/components/ui/spinner";
import ListCategory from "@/components/base/list-category";
import EventCalendar from "@/components/base/event-calendar";
import { CreditCard, MapPin, Clock } from "lucide-react";

export default function EventDetailPage() {
  // get url
  const params = useParams();
  const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
  const lastpath = slug[slug.length - 1];

  // query
  const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
    code: `${slug[0]}`,
  });

  const { data: eventsDetail, isLoading } = useGetEvents<EventApiResponse>({
    filters: `id==${lastpath}`,
  });

  return (
    <div className='container w-full flex justify-center items-center pb-10'>
      {isLoading ? (
        <div className="flex justify-center items-center w-full h-64">
          <Spinner />
        </div>
      ) : (
        <div className='flex flex-col gap-5 w-full'>
          <ListCategory categories={categoriesPage?.responseData?.children} />
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            <main className="lg:col-span-2 bg-white border rounded-md py-10 px-5 md:px-20">
              <div className='pb-5 text-primary text-2xl leading-normal font-medium'>
                {eventsDetail?.responseData?.rows[0]?.name}
              </div>
              <hr className="py-2" />

              {/* Top summary with image + details */}
              <div className="flex flex-col md:flex-row gap-6 my-6">
                <div className="w-full lg:w-1/2 bg-gray-50 rounded-md overflow-hidden">
                  {eventsDetail?.responseData?.rows[0].image ? (
                    <div className="w-full h-52 relative ">
                      <EventImage
                        src={`${BASE_URL.imageEndpoint}${eventsDetail?.responseData?.rows[0].image}`}
                        alt={eventsDetail?.responseData?.rows[0]?.name || "image"}
                      />
                    </div>
                  ) : (
                    <div className="w-full h-52 bg-gray-200" />
                  )}
                </div>

                <div className="w-full lg:w-1/2 bg-white border rounded-md p-3 md:p-6">
                  <div className="flex flex-col gap-3">
                    <div className="text-sm text-gray-500 flex flex-row items-center gap-2">
                      <Clock className="h-5 w-5 text-yellow-500" />
                      <div>
                        <div className="text-sm font-medium text-gray-800">
                          Bắt đầu: {eventsDetail?.responseData?.rows[0].start_time
                            ? dayjs(
                              eventsDetail.responseData.rows[0].start_time
                            ).format('HH:mm DD/MM/YYYY')
                            : "-"}
                        </div>
                        <div className="text-sm font-medium text-gray-800">
                          Kết thúc: {eventsDetail?.responseData?.rows[0].end_time
                            ? dayjs(
                              eventsDetail.responseData.rows[0].end_time
                            ).format('HH:mm DD/MM/YYYY')
                            : "-"}
                        </div>
                      </div>
                    </div>

                    <div className="text-sm text-gray-500 flex items-center gap-2">
                      <MapPin className="h-5 w-5 text-blue-600" />
                      <div className="text-sm font-medium text-gray-800">
                        Địa điểm: {eventsDetail?.responseData?.rows[0]?.location ??
                          eventsDetail?.responseData?.rows[0]?.province ??
                          "-"}
                      </div>
                    </div>

                    <div className="text-sm text-gray-500 flex items-center gap-2">
                      <CreditCard className="h-5 w-5 text-yellow-400" />
                      <div className="text-sm font-medium text-gray-800">
                        Phí tham dự: {eventsDetail?.responseData?.rows[0]?.table_cost
                          ? `${eventsDetail?.responseData?.rows[0]?.table_count
                          } Bàn : ${eventsDetail?.responseData?.rows[0]?.table_cost.toLocaleString()} đ`
                          : "Vui lòng xem chi tiết trong bài"}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Full description */}
              <div className="prose tiptap overflow-hidden">
                {parse(eventsDetail?.responseData?.rows[0]?.description ?? "")}
              </div>
            </main>

            {/* Sidebar */}
            <aside className="space-y-6">
              <EventCalendar />
              <div className="bg-white border rounded-md overflow-hidden">
                <div className="w-full h-75 relative bg-gray-100">
                  <Image
                    src="/banner.webp"
                    alt="Quảng cáo"
                    fill
                    className="object-contain"
                  />
                </div>
              </div>
            </aside>
          </div>
        </div>
      )}
    </div >
  );
}

// Local small component to safely handle Image src fallback without mutating DOM
type EventImageProps = {
  src: string;
  alt?: string;
};

function EventImage({ src, alt }: EventImageProps) {
  const [imgSrc, setImgSrc] = useState<string>(src);

  return (
    <Image
      src={imgSrc}
      alt={alt ?? "image"}
      fill
      className="object-cover"
      onError={() => {
        // swap to local fallback file when Next/Image fails to load the provided URL
        if (imgSrc !== "/img-error.png") setImgSrc("/img-error.png");
      }}
    />
  );
}