"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 { getCookiesDecrypt } from "@/lib/utils";
import { listCuratedContent } from "@/service/curated-content/curated-content";

import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import {
  listDataAllNonPagination,
  listDataTracking,
  mediaTrackingSave,
} from "@/service/media-tracking/media-tracking";

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

const ImageSliderPage = () => {
  const router = useRouter();
  const roleId = Number(getCookiesDecrypt("urie")) || 0;
  const [imageData, setImageData] = useState<ImageData[]>([]);
  const [page, setPage] = useState(1);
  const [limit] = useState(10);

  const ALLOWED_LEVEL = ["POLDA", "POLRES", "SATKER", "MABES"];

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

  // const fetchData = async () => {
  //   const response = await listCuratedContent("", limit, page - 1, 1, "1");
  //   const data = response?.data?.data?.content || [];
  //   setImageData(data);
  // };

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

    const res = await listDataTracking(
      limit,
      page - 1,
      "",
      "",
      "",
      levelName
    );

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

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

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

    setImageData(mapped);
  } catch (error) {
    console.error(error);
  }
};

  return (
    <div className="w-full px-2">
      {imageData.length > 0 && (
        <div>
          <div className="flex justify-between items-center mb-2">
            <h2 className="text-xl font-semibold">Foto</h2>
            <Link
              href={"/shared/curated-content/giat-routine/image/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>
              {imageData.map((image, 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={
                          roleId === 12
                            ? `/shared/curated-content/giat-routine/image/accept-assignment/detail/${image.id}`
                            : `/shared/curated-content/giat-routine/image/detail/${image.id}`
                        }
                      >
                        <CardContent className="p-0">
                          <img
                            src={image?.thumbnailLink}
                            alt={image?.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(image?.createdAt),
                              )}{" "}
                              {image?.timezone || "WIB"} |
                              <Icon
                                icon="formkit:eye"
                                width="15"
                                height="15"
                                className="inline ml-1"
                              />
                              {image?.clickCount}
                            </p>
                            <h3 className="font-semibold text-sm truncate">
                              {image?.title}
                            </h3>
                          </div>
                        </CardContent>
                      </Link>
                      {roleId === 11 && (
                        <div className="flex flex-row justify-between mx-3 mb-3">
                          <Link
                            href={`/shared/curated-content/giat-routine/image/ask-the-expert/${image.id}`}
                          >
                            <Button color="primary" size="md">
                              Ask The Expert
                            </Button>
                          </Link>
                          <Link
                            href={`/shared/curated-content/giat-routine/image/do-it-yourself/${image.id}`}
                          >
                            <Button color="primary" size="md">
                              Do it Yourself
                            </Button>
                          </Link>
                        </div>
                      )}

                      {roleId === 12 && (
                        <div className="mx-3 mb-3">
                          <Link
                            href={`/shared/curated-content/giat-routine/image/accept-assignment/${image.id}`}
                          >
                            <Button
                              className="w-full "
                              color="primary"
                              size="md"
                            >
                              Accept Assignment
                            </Button>
                          </Link>
                        </div>
                      )}
                    </Card>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        </div>
      )}
    </div>
  );
};

export default ImageSliderPage;