"use client";
import { Suspense, useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { format } from "date-fns";
import { homePageEffect } from "@/effects/homeEffect";
import { ArticleListDataType } from "@/types/article";
import { fetchListArticles } from "@/api/apiService";

export default function Home() {
  const [articleList, setArticleList] = useState<ArticleListDataType | null>(
    null
  );

  const [loadingUi, setLoadingUI] = useState(true);

  useEffect(() => {
    const typingNode = document.getElementById("typewriter") as HTMLElement;
    if (typingNode) {
      homePageEffect.showTypingEffect(typingNode);
    }

    // slider đối tác
    homePageEffect.startCarousel("#navheight", true, 3000);

    const fetchArticleNews = async () => {
      const data = await fetchListArticles();
      setArticleList(data.list);
      setLoadingUI(false);
    };

    fetchArticleNews();
  }, []);

  return (
    <>
      <div className="homepage">
        <div className="box-slogan">
          <div className="content-slogan">
            <div className="main-sologan">
              Cung cấp{" "}
              <span id="typewriter">
                các giải pháp tmđt toàn diện & chuyên nghiệp.
              </span>
              <span className="caret"></span>
            </div>
            <div className="note">
              Tư vấn và phát triển website, marketing online, chăm sóc khách
              hàng, tên miền, cloud hosting
            </div>
            <div className="group-btn flex items-center justify-center">
              <Link href="/contact" className="btn btn-contact">
                <i className="icon_2024 phone"></i>
                <span>Liên hệ</span>
              </Link>
            </div>
          </div>
        </div>

        <div className="box-customer">
          <div className="container">
            <h2 className="title">Khách hàng đồng hành</h2>
            <div className="navheight" id="navheight">
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <Suspense>
          <div className="box-product">
            <div className="container">
              <h2 className="title">Sản phẩm</h2>

              {loadingUi ? (
                <div className="list-product flex">
                  <div className="item-product">
                    <div className="top">
                      <div className="icon w-full bg-gray-50 h-[35px] rounded-[12px]"></div>
                      <div className="w-full h-[100px] mb-[28px] mt-[20px] bg-gray-50 rounded-[12px]"></div>
                    </div>
                    <div className="w-full h-[16px] bg-gray-50 rounded-[12px]"></div>
                  </div>
                  <div className="item-product">
                    <div className="top">
                      <div className="icon w-full bg-gray-50 h-[35px] rounded-[12px]"></div>
                      <div className="w-full h-[100px] mb-[28px] mt-[20px] bg-gray-50 rounded-[12px]"></div>
                    </div>
                    <div className="w-full h-[16px] bg-gray-50 rounded-[12px]"></div>
                  </div>
                  <div className="item-product">
                    <div className="top">
                      <div className="icon w-full bg-gray-50 h-[35px] rounded-[12px]"></div>
                      <div className="w-full h-[100px] mb-[28px] mt-[20px] bg-gray-50 rounded-[12px]"></div>
                    </div>
                    <div className="w-full h-[16px] bg-gray-50 rounded-[12px]"></div>
                  </div>
                  <div className="item-product">
                    <div className="top">
                      <div className="icon w-full bg-gray-50 h-[35px] rounded-[12px]"></div>
                      <div className="w-full h-[100px] mb-[28px] mt-[20px] bg-gray-50 rounded-[12px]"></div>
                    </div>
                    <div className="w-full h-[16px] bg-gray-50 rounded-[12px]"></div>
                  </div>
                </div>
              ) : (
                <div className="list-product flex">
                  <div className="item-product">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-hura8.png"
                          width={100}
                          height={100}
                          alt="hura 8"
                        />
                      </div>
                      <p className="txt line-clamp-5">
                        Phần mềm tạo website TMĐT chạy nên nền tảng Cloud dành
                        cho doanh nghiệp lớn
                      </p>
                    </div>
                    <a href="//hura8.com" target="_blank" className="more">
                      Xem thêm <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-product">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/logo-xstore.png"
                          width={93}
                          height={35}
                          alt="xstore"
                        />
                      </div>
                      <p className="txt line-clamp-5">
                        Nền tảng quản lý cửa hàng nhỏ toàn diện, bao gồm: Quản
                        lý đơn hàng đa kênh, Kho hàng, Website và POS
                      </p>
                    </div>
                    <a href="//xstore.vn" target="_blank" className="more">
                      Xem thêm <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-product">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-adman.png"
                          width={100}
                          height={100}
                          alt="icon-adman"
                        />
                      </div>
                      <p className="txt line-clamp-5">
                        Nền tảng marketing toàn diện dành cho các chuyên gia.
                      </p>
                    </div>
                    <a href="//adman.vn" target="_blank" className="more">
                      Xem thêm <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-product chatngay">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-chatngay.png"
                          width={100}
                          height={100}
                          alt="icon-chatngay"
                        />
                      </div>
                      <p className="txt line-clamp-5">
                        Phần mềm hỗ trợ, cskh tích hợp website giúp khách hàng
                        tương tác nhanh chóng và thuận tiện.
                      </p>
                    </div>
                    <a href="//chatngay.com" target="_blank" className="more">
                      Xem thêm <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                </div>
              )}
            </div>
          </div>
        </Suspense>

        <Suspense>
          <div className="box-article">
            <div className="container">
              <h2 className="title">Có gì mới?</h2>
              {loadingUi ? (
                <div className="content-item-article" id="js-article-new">
                  <div className="flex">
                    <div className="info">
                      <div className="tag-blog block bg-gray-100 rounded-[12px] w-[74px] h-[28px]"></div>
                      <div className="name w-full bg-gray-100 h-[36px] rounded-[12px] mb-[24px]"></div>
                      <div className="summary bg-gray-100 block line-clamp-4 w-full h-[80px] rounded-[12px] mb-[20px]"></div>
                      <div className="more w-full h-[24px] bg-gray-100 block"></div>
                      <div className="info-author w-[200px] h-[50px] block bg-gray-100"></div>
                    </div>
                    <div className="image-right bg-gray-100 h-[370px] rounded-[12px]"></div>
                  </div>
                </div>
              ) : Array.isArray(articleList) && articleList.length > 0 ? (
                <div className="content-item-article" id="js-article-new">
                  {articleList.slice(0, 1).map((item) => (
                    <div className="flex" key={item.id}>
                      <div className="info">
                        <div className="tag-blog flex items-center">
                          <i className="icon_2024 blog"></i>
                          <span>Blog</span>
                        </div>
                        <a href={item.url} className="name line-clamp-4">
                          {item.title}
                        </a>
                        <div className="summary line-clamp-4">
                          {item.summary}
                        </div>
                        <a href={item.url} className="more">
                          Chi tiết <i className="fa-solid fa-arrow-right"></i>
                        </a>

                        <div className="info-author">
                          <div className="author flex items-center">
                            <span>Đăng bởi</span>
                            <span className="name-author">Admin</span>
                          </div>
                          <div className="time">
                            <i className="far fa-clock"></i>{" "}
                            <span>
                              {format(
                                new Date(item.last_update * 1000),
                                "dd/MM/yyyy HH:mm"
                              )}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="image-right">
                        <img
                          src={`https://hurasoft8.hurasoft.com/${item.image.large}`}
                          width={100}
                          height={100}
                          alt={item.title}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <></> // Nếu không có dữ liệu, không hiển thị gì
              )}
            </div>
          </div>
        </Suspense>
      </div>
    </>
  );
}
