"use client";

import { useParams } from "next/navigation";
import { useState } from "react";
import { Spinner } from "@/components/ui";
import { Pagination } from "@/components/base/pagination";
import { ListFilter } from "@/components/base/list-filter";
import EventCalendar from "@/components/base/event-calendar";
import ListCategory from "@/components/base/list-category";
import CardNews from "@/components/base/card-news";
import Image from "next/image";
import parse from "html-react-parser";
import dayjs from "dayjs";

// API hooks
import { useGetNews, useGetNewsId } from "@/api/endpoints/news";
import { GetNewsResponseType } from "@/api/types/news";
import { GetNewsDetailResponseType } from "./page.type";
import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";

export default function DynamicPage() {
  const params = useParams();
  const slugArray = Array.isArray(params.slug) ? params.slug : [params.slug];
  const lastPart = slugArray[slugArray.length - 1];
  const url = slugArray.join("/");

  // states
  const [submitSearch, setSubmitSearch] = useState("");
  const [page, setPage] = useState(1);
  const pageSize = 5;

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

  const { data: newsDetail, isLoading: isLoadingDetail } = useGetNews<GetNewsResponseType>({
    filters: `external_link@=${lastPart}`,
  });

  const { data: news, isLoading } = useGetNews<GetNewsResponseType>({
    pageSize: String(pageSize),
    currentPage: String(page),
    filters: `page_config.static_link==/${url}` + (submitSearch ? `,title@=${submitSearch}` : ""),
  });

  if (isLoadingDetail) {
    return (
      <div className="flex justify-center py-12">
        <Spinner />
      </div>
    );
  }

  // detail news page
  const isDetailPage = newsDetail?.responseData?.rows?.length === 1;
  if (isDetailPage) {
    return (
      <div className='container w-full flex justify-center items-center pb-10'>
        <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 p-8">
              <div className='pb-5 text-primary text-2xl leading-normal font-medium'>
                {newsDetail?.responseData?.rows[0].title}
              </div>
              <div className='flex items-center gap-2 text-sm mb-4'>
                <span className='text-base text-blue-700'>
                  {dayjs(newsDetail?.responseData?.rows[0].created_at).format('DD/MM/YYYY')}
                </span>
              </div>
              <hr className="my-5" />
              <div className='flex-1 text-app-grey text-base overflow-hidden'>
                <div className="prose tiptap overflow-hidden">
                  {parse(newsDetail?.responseData?.rows[0].description ?? '')}
                </div>
              </div>
            </main>
            <aside className="space-y-6">
              <EventCalendar />
            </aside>
          </div>
        </div>
      </div>
    );
  }

  // list news page
  return (
    <div className="min-h-screen container mx-auto">
      <div className="w-full flex flex-col gap-5">
        <ListCategory categories={categoriesPage?.responseData?.children} />
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <main className="lg:col-span-2 bg-background">
            <div className="pb-5 overflow-hidden">
              {isLoading ? (
                <div className="flex justify-center items-center py-12">
                  <Spinner className="size-8" />
                  <span className="ml-2 text-gray-600">Đang tải tin VCCI...</span>
                </div>
              ) : news?.responseData.rows.length === 0 ? (
                <p className="text-center py-4">Không có dữ liệu</p>
              ) : (
                <>
                  {news?.responseData.rows.map((item) => (
                    <CardNews
                      key={item.id}
                      news={item}
                      link={`${item.external_link}`}
                    />
                  ))}
                  <div className="w-full flex justify-center mt-4">
                    <Pagination
                      pageCount={Number(news?.responseData.totalPages ?? 1)}
                      page={Number(news?.responseData.currentPage ?? page)}
                      onChangePage={setPage}
                      onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
                      onGoToNextPage={() =>
                        setPage(Math.min(Number(news?.responseData.totalPages ?? 1), page + 1))
                      }
                    />
                  </div>
                </>
              )}
            </div>
          </main>
          <aside className="space-y-6">
            <ListFilter onSearch={setSubmitSearch} />
            <EventCalendar />
            <div className="bg-white border rounded-md overflow-hidden">
              <div className="w-full relative bg-gray-100">
                <img src="/banner.webp" alt="Quảng cáo" className="object-cover" />
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}