"use client";
import { Link } from "@/components/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Label } from "@/components/ui/label";
import { listCuratedContent } from "@/service/curated-content/curated-content";
import { getListContent } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import image from "next/image";
import React, { useEffect, useState } from "react";
import { listDataTracking } from "@/service/media-tracking/media-tracking"; // sesuaikan path
import { getCookiesDecrypt } from "@/lib/utils";

type VideoData = {
  id: string;
  title: string;
  createdAt: string;
  timezone: string;
  thumbnailLink: string;
  clickCount: string;
};

const VideoSliderPage = () => {
  const [allVideoData, setAllVideoData] = useState<any[]>([]);
  const [videoData, setVideoData] = useState<VideoData[]>([]);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState("");

  useEffect(() => {
    fetchData();
  }, [page, limit, search]);

  // const fetchData = async () => {
  //   const response = await listCuratedContent(search, limit, page - 1, 2, "1");
  //   // console.log(response);

  //   const data = response?.data?.data;
  //   const contentData = data?.content;
  //   setVideoData(contentData);
  // };

  const fetchData = async () => {
    try {
      const levelName = (getCookiesDecrypt("levelName") || "").toUpperCase();

      const res = await listDataTracking(
        limit,
        page - 1,
        search,
        "", // category
        "", // status
        levelName,
        "2",
      );

      const data = res?.data?.data?.content || [];

      console.log("VIDEO DATA:", data);

      const mapped = data.map((item: any) => ({
        id: item.id,
        title: item.title,
        createdAt: item.createdAt,
        timezone: item.timezone,
        thumbnailLink: item.thumbnailLink, // ✅ penting (bukan thumbnailUrl)
        clickCount: item.clickCount || 0,
      }));

      setVideoData(mapped);
    } catch (error) {
      console.error("Error fetching video:", error);
    }
  };

  return (
    <div className="w-full px-2">
      {videoData.length > 0 && (
        <div>
          <div className="flex justify-between items-center mb-2">
            <h2 className="text-xl font-semibold">Video</h2>
            <Link
              href={"/shared/curated-content/giat-routine/video/all"}
              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
            >
              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
            </Link>
          </div>
          <Carousel className="w-full">
            <CarouselContent>
              {videoData.map((video, index) => (
                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
                  <div className="p-2">
                    <Card className="shadow-md rounded-lg overflow-hidden">
                      <Link
                        href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
                      >
                        <CardContent className="p-0">
                          <img
                            src={video?.thumbnailLink}
                            alt={video?.title}
                            className="w-full h-56 object-cover rounded-t-lg"
                          />
                          <div className="p-3">
                            <p className="text-xs text-gray-500">
                              {formatDateToIndonesian(
                                new Date(video?.createdAt),
                              )}{" "}
                              {video?.timezone || "WIB"} |
                              <Icon
                                icon="formkit:eye"
                                width="15"
                                height="15"
                                className="inline ml-1"
                              />
                              {video?.clickCount}
                            </p>
                            <h3 className="font-semibold text-sm truncate">
                              {video?.title}
                            </h3>
                          </div>
                        </CardContent>
                      </Link>
                    </Card>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        </div>
      )}
    </div>
  );
};

export default VideoSliderPage;