'use client';

import React from 'react';
import Link from 'next/link';
import { Breadcrumb } from '@/components/Common/Breadcrumb';
import Skeleton from '@/components/Common/Skeleton';

import { ArticleTopLeft } from '../ArticleTopLeft';
import { ArticleTopRight } from '../ArticleTopRight';
import { BoxVideoArticle } from './BoxVideoArticle';
import { BoxArticleMid } from './BoxArticleMid';
import { BoxArticleReview } from './BoxArticleReview';
import { getArticleCategories } from '@/lib/api/article';
import { useApiData } from '@/hooks/useApiData';
import type { TypeArticleCategory } from '@/types/article/ListCategoryArticle';

const ArticleHomeSkeleton = () => (
  <section className="page-article pb-10">
    <div className="container">
      <Skeleton className="mb-4 h-5 w-48" />
      <div className="tabs-category-article flex items-center gap-3">
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} className="h-8 w-24" />
        ))}
      </div>
      <div className="box-article-home-top mt-4 grid grid-cols-3 gap-3">
        <div className="col-span-2 flex gap-3">
          <Skeleton className="aspect-video flex-1" />
          <div className="flex flex-1 flex-col gap-3">
            {Array.from({ length: 4 }).map((_, i) => (
              <Skeleton key={i} className="h-20 w-full" />
            ))}
          </div>
        </div>
        <div className="flex flex-col gap-3">
          <Skeleton className="h-10 w-full" />
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-full" />
          ))}
        </div>
      </div>
    </div>
  </section>
);

const ArticleHome = () => {
  const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];
  const { data: categories, isLoading } = useApiData(
    () => getArticleCategories(),
    [],
    { initialData: [] as TypeArticleCategory[] },
  );

  if (isLoading) return <ArticleHomeSkeleton />;

  return (
    <section className="page-article pb-10">
      <div className="container">
        <Breadcrumb items={breadcrumbItems} />

        <div className="tabs-category-article flex items-center">
          {categories.map((item, index) => (
            <Link href={item.url} key={`${item.id}-${index}`} className="item-tab-article">
              <h2 className="title-cate-article font-[400]">{item.title}</h2>
            </Link>
          ))}
        </div>

        <div className="box-article-home-top grid grid-cols-3 gap-3">
          <div className="col-left-article border-box-article box-new-article boder-radius-10 col-span-2">
            <ArticleTopLeft />
          </div>
          <ArticleTopRight />
        </div>

        <BoxVideoArticle />
        <BoxArticleMid />
        <BoxArticleReview />
      </div>
    </section>
  );
};

export default ArticleHome;