"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
export default function Team() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await axios.get("/api/get-component-data", {
          params: { component_name: "Team" },
        });
        setData(res.data.data);
      } catch (err) {
        setError("获取Team数据失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div className="text-center py-20">Loading...</div>;
  if (error) return null;
  if (!data) return null;

  // 标题
  const title = data.title || "";
  // items 子表
  const items = data.items || [];
  const icon = data.icon || "/files/icon.svg";
  const htmlCode = data.html_code || "";
  
  return (
    <>
      <div className="flex flex-wrap mx-[-15px] !mb-3">
        <div className="md:w-10/12 lg:w-10/12 xl:w-9/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
          {htmlCode ? (
              <div
                style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem"  }}
                dangerouslySetInnerHTML={{ __html: htmlCode }}
              />
            ) : (
              <img
                src={icon}
                alt="icon"
                style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
              />
            )}
          <h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 xl:!px-[4.5rem] lg:!px-[4.5rem]">
            {title}
          </h2>
        </div>
        {/*/column */}
      </div>
      {/*/.row */}
      <div className="!relative">
        <div
          className="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute z-[1]"
          data-rellax-speed={1}
          style={{ bottom: "0.5rem", right: "-1.7rem" }}
        />
        <div
          className="shape !rounded-[50%] bg-line red rellax !w-[6rem] !h-[6rem] absolute z-[1] opacity-50"
          data-rellax-speed={1}
          style={{ top: "0.5rem", left: "-1.7rem" }}
        />
        <div className="swiper-container dots-closer !mb-6">
          <Swiper
            className="swiper"
            modules={[Pagination]}
            pagination={{
              clickable: true,
              el: ".spd13",
            }}
            spaceBetween={0}
            breakpoints={{
              0: { slidesPerView: 1 },
              575: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
              992: {
                slidesPerView: 3,
              },
              1200: {
                slidesPerView: 3,
              },
              1400: {
                slidesPerView: 4,
              },
            }}
          >
            {items.map((slide, idx) => (
              <SwiperSlide className="swiper-slide" key={slide.no || idx}>
                <div className="item-inner">
                  <div className="card">
                    <div className="card-body p-[40px]">
                      <Image
                        className="rounded-[50%] !w-[5rem] !mb-4"
                        srcSet={slide.item_image ? `${slide.item_image} 2x` : undefined}
                        alt="image"
                        src={slide.item_image || "/assets/img/photos/team-default.jpg"}
                        width={100}
                        height={100}
                      />
                      <h4 className="!mb-1">{slide.item_title}</h4>
                      <div className="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">
                        {slide.item_subtitle}
                      </div>
                      <p className="!mb-2">{slide.item_description}</p>
                      <nav className="nav social !mb-0">
                        {(() => {
                          let social = {};
                          try {
                            if (slide.item_html_code) {
                              social = JSON.parse(slide.item_html_code);
                            }
                          } catch (e) {
                            // ignore parse error
                          }
                          const icons = [
                            { key: "twitter", icon: "uil-twitter", color: "#5daed5" },
                            { key: "facebook", icon: "uil-facebook-f", color: "#4470cf" },
                            { key: "linkedin", icon: "uil-linkedin", color: "#3393c1" },
                            { key: "instagram", icon: "uil-instagram", color: "#e6683c" },
                            { key: "whatsapp", icon: "uil-whatsapp", color: "#25d366" },
                            { key: "youtube", icon: "uil-youtube", color: "#ff0000" },
                            { key: "dribbble", icon: "uil-dribbble", color: "#e94d88" },
                            { key: "tiktok", icon: "tiktok-svg", color: "#000" },
                          ];
                          return icons.map(({ key, icon, color }) => {
                            if (!social[key]) return null;
                            if (key === "tiktok") {
                              return (
                                <a
                                  key={key}
                                  className="m-[0_.3rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
                                  href={social[key]}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                >
                                  <img src="/files/tiktok.svg" alt="tiktok" style={{ display: "inline-block", verticalAlign: "middle" }} />
                                </a>
                              );
                            }
                            return (
                              <a
                                key={key}
                                className="m-[0_.3rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
                                href={social[key]}
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                <i className={`uil ${icon} text-[1rem]`} style={{ color }} />
                              </a>
                            );
                          });
                        })()}
                      </nav>
                      {/* /.social */}
                    </div>
                    {/*/.card-body */}
                  </div>
                  {/* /.card */}
                </div>
                {/* /.item-inner */}
              </SwiperSlide>
            ))}
            {/*/.swiper-wrapper */}
          </Swiper>
          <div className="swiper-controls">
            <div className="swiper-pagination spd13"></div>
          </div>
          {/* /.swiper */}
        </div>
        {/* /.swiper-container */}
      </div>
    </>
  );
}