'use client';

import Link from 'next/link';
import { FaYoutube } from 'react-icons/fa6';
import Image from 'next/image';
import useFancybox from '@/hooks/useFancybox';
import { getArticleVideos } from '@/lib/api/article';
import { useApiData } from '@/hooks/useApiData';
import type { ListArticle } from '@/types/article/TypeListArticle';

export const BoxVideoArticle = () => {
  const { data: videos } = useApiData(
    () => getArticleVideos(),
    [],
    { initialData: [] as ListArticle },
  );

  const getYoutubeEmbedUrl = (url: string): string => {
    try {
      const urlObj = new URL(url);
      if (urlObj.hostname.includes('youtube.com')) {
        const videoId = urlObj.searchParams.get('v');
        if (videoId) {
          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
        }
      }
      if (urlObj.hostname.includes('youtu.be')) {
        const videoId = urlObj.pathname.replace('/', '');
        if (videoId) {
          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
        }
      }
      return url;
    } catch {
      return url;
    }
  };

  const [fancyboxRef] = useFancybox({
    closeButton: 'auto',
    dragToClose: true,
  });

  return (
    <div className="box-video-article boder-radius-10">
      <div className="title-video-article flex justify-between">
        <p className="title font-bold">Youtube channel</p>
        <Link
          href="https://www.youtube.com/c/NGUYENCONGPC"
          className="follow-youtube flex items-center gap-2"
        >
          <FaYoutube />
          <span className="font-bold">Theo dõi trên YouTube</span>
        </Link>
      </div>
      <div className="list-video-article flex justify-between gap-2">
        <div className="box-left" ref={fancyboxRef}>
          {videos.slice(0, 1).map((item) => (
            <div className="item-article-video d-flex w-50 gap-10" key={item.id}>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="img-article img-article-video boder-radius-10 relative"
                data-fancybox
              >
                <Image
                  src={item.image.original}
                  width={430}
                  height={310}
                  className="boder-radius-10"
                  alt={item.title}
                />

                <i className="sprite sprite-big-play-video-article icon-play"></i>
                <Image
                  className="icon-play-small"
                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
                  alt="play"
                  width={58}
                  height={41}
                />
              </Link>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="title-article-video flex-1"
                data-fancybox
              >
                {item.title}
              </Link>
            </div>
          ))}
        </div>
        <div className="box-right grid grid-cols-2 gap-2">
          {videos.slice(1, 7).map((item) => (
            <div className="item-article-video flex w-50 gap-2" key={item.id}>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="img-article img-article-video boder-radius-10 relative"
                data-fancybox
              >
                <Image
                  src={item.image.original}
                  width={430}
                  height={310}
                  className="boder-radius-10"
                  alt={item.title}
                />

                <i className="sprite sprite-big-play-video-article icon-play"></i>
                <Image
                  className="icon-play-small"
                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
                  alt="play"
                  width={58}
                  height={41}
                />
              </Link>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="title-article-video flex-1"
                data-fancybox
              >
                {item.title}
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};