"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { ThumbsUp, ThumbsDown } from "lucide-react";
import { Card } from "../ui/card";
import Link from "next/link";
import { listData, listArticles } from "@/service/landing/landing";
import { toggleBookmark, getBookmarkSummaryForUser } from "@/service/content";
import { getCookiesDecrypt } from "@/lib/utils";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

// Format tanggal
function formatTanggal(dateString: string) {
  if (!dateString) return "";
  return (
    new Date(dateString)
      .toLocaleString("id-ID", {
        day: "2-digit",
        month: "short",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
        timeZone: "Asia/Jakarta",
      })
      .replace(/\./g, ":") + " WIB"
  );
}

export default function MediaUpdate() {
  const [tab, setTab] = useState<"latest" | "popular">("latest");
  const [dataToRender, setDataToRender] = useState<any[]>([]);
  const [bookmarkedIds, setBookmarkedIds] = useState<Set<number>>(new Set());
  const [loading, setLoading] = useState(true);
  const MySwal = withReactContent(Swal);

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

  async function fetchData(section: "latest" | "popular") {
    try {
      setLoading(true);

      // 🔹 Ambil data artikel
      const response = await listArticles(
        1,
        20,
        1, // typeId = image
        undefined,
        undefined,
        section === "latest" ? "createdAt" : "viewCount"
      );

      let articlesData: any[] = [];

      if (response?.error) {
        console.error("Articles API failed, fallback ke old API");
        const fallbackRes = await listData(
          "1",
          "",
          "",
          20,
          0,
          section === "latest" ? "createdAt" : "clickCount",
          "",
          "",
          ""
        );
        articlesData = fallbackRes?.data?.data?.content || [];
      } else {
        articlesData = response?.data?.data || [];
      }

      // 🔹 Normalisasi struktur data
      const transformedData = articlesData.map((article: any) => ({
        id: article.id,
        title: article.title,
        category:
          article.categoryName ||
          (article.categories && article.categories[0]?.title) ||
          "Tanpa Kategori",
        createdAt: article.createdAt,
        smallThumbnailLink: article.thumbnailUrl,
        label:
          article.typeId === 1
            ? "Image"
            : article.typeId === 2
            ? "Video"
            : article.typeId === 3
            ? "Text"
            : article.typeId === 4
            ? "Audio"
            : "",
        ...article,
      }));

      setDataToRender(transformedData);

      // 🔹 Sinkronisasi bookmark
      const roleId = Number(getCookiesDecrypt("urie"));
      if (roleId && !isNaN(roleId)) {
        const savedLocal = localStorage.getItem("bookmarkedIds");
        let localSet = new Set<number>();
        if (savedLocal) {
          localSet = new Set(JSON.parse(savedLocal));
          setBookmarkedIds(localSet);
        }

        const res = await getBookmarkSummaryForUser();
        const bookmarks =
          res?.data?.data?.recentBookmarks ||
          res?.data?.data?.bookmarks ||
          res?.data?.data ||
          [];

        const ids = new Set<number>(
          (Array.isArray(bookmarks) ? bookmarks : [])
            .map((b: any) => Number(b.articleId ?? b.id ?? b.article?.id))
            .filter((x) => !isNaN(x))
        );

        const merged = new Set([...localSet, ...ids]);
        setBookmarkedIds(merged);
        localStorage.setItem(
          "bookmarkedIds",
          JSON.stringify(Array.from(merged))
        );
      }
    } catch (err) {
      console.error("Gagal memuat data:", err);
    } finally {
      setLoading(false);
    }
  }

  // 🔹 Simpan perubahan bookmark ke localStorage
  useEffect(() => {
    if (bookmarkedIds.size > 0) {
      localStorage.setItem(
        "bookmarkedIds",
        JSON.stringify(Array.from(bookmarkedIds))
      );
    }
  }, [bookmarkedIds]);

  const handleSave = async (id: number) => {
    const roleId = Number(getCookiesDecrypt("urie"));
    if (!roleId || isNaN(roleId)) {
      MySwal.fire({
        icon: "warning",
        title: "Login diperlukan",
        text: "Silakan login terlebih dahulu untuk menyimpan artikel.",
        confirmButtonText: "Login Sekarang",
        confirmButtonColor: "#d33",
      });
      return;
    }

    try {
      const res = await toggleBookmark(id);
      if (res?.error) {
        MySwal.fire({
          icon: "error",
          title: "Gagal",
          text: "Gagal menyimpan artikel.",
          confirmButtonColor: "#d33",
        });
      } else {
        const updated = new Set(bookmarkedIds);
        updated.add(Number(id));
        setBookmarkedIds(updated);
        localStorage.setItem(
          "bookmarkedIds",
          JSON.stringify(Array.from(updated))
        );

        MySwal.fire({
          icon: "success",
          title: "Berhasil",
          text: "Artikel berhasil disimpan ke bookmark.",
          timer: 1500,
          showConfirmButton: false,
        });
      }
    } catch (err) {
      console.error("Error saving bookmark:", err);
      MySwal.fire({
        icon: "error",
        title: "Kesalahan",
        text: "Terjadi kesalahan saat menyimpan artikel.",
      });
    }
  };

  return (
    <section className="bg-white px-4 py-10 border max-w-[1350px] mx-auto rounded-md border-[#CDD5DF] my-10">
      <div className="max-w-screen-xl mx-auto">
        <h2 className="text-2xl font-semibold text-center mb-6">
          Media Update
        </h2>

        {/* Tab */}
        <div className="flex justify-center mb-8 bg-white">
          <Card className="bg-[#FFFFFF] rounded-xl flex flex-row p-3 gap-2">
            <button
              onClick={() => setTab("latest")}
              className={`px-5 py-2 rounded-lg text-sm font-medium ${
                tab === "latest" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
              }`}
            >
              Konten Terbaru
            </button>
            <button
              onClick={() => setTab("popular")}
              className={`px-5 py-2 rounded-lg text-sm font-medium ${
                tab === "popular" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
              }`}
            >
              Konten Terpopuler
            </button>
          </Card>
        </div>

        {/* Slider */}
        {loading ? (
          <p className="text-center">Loading...</p>
        ) : (
          <Swiper
            modules={[Navigation]}
            navigation
            spaceBetween={20}
            slidesPerView={1}
            breakpoints={{
              640: { slidesPerView: 2 },
              1024: { slidesPerView: 4 },
            }}
          >
            {dataToRender.map((item) => (
              <SwiperSlide key={item.id}>
                <div className="rounded-xl shadow-md overflow-hidden bg-white">
                  <div className="w-full h-[204px] relative">
                    <Image
                      src={item.smallThumbnailLink || "/placeholder.png"}
                      alt={item.title || "No Title"}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="p-3">
                    <div className="flex gap-2 mb-1">
                      <span className="text-xs text-white px-2 py-0.5 rounded bg-blue-600">
                        {item.category || "Tanpa Kategori"}
                      </span>
                      <span className="text-xs font-medium text-[#b3882e]">
                        {item.label || ""}
                      </span>
                    </div>
                    <p className="text-xs text-gray-500 mb-1">
                      {formatTanggal(item.createdAt)}
                    </p>
                    <p className="text-sm font-semibold mb-3 line-clamp-2">
                      {item.title}
                    </p>

                    <div className="flex items-center justify-between">
                      <div className="flex gap-2 text-gray-600">
                        <ThumbsUp className="w-4 h-4 cursor-pointer" />
                        <ThumbsDown className="w-4 h-4 cursor-pointer" />
                      </div>
                      <Button
                        onClick={() => handleSave(item.id)}
                        disabled={bookmarkedIds.has(Number(item.id))}
                        variant="default"
                        size="sm"
                        className={`rounded px-4 ${
                          bookmarkedIds.has(Number(item.id))
                            ? "bg-gray-400 cursor-not-allowed text-white"
                            : "bg-blue-600 text-white hover:bg-blue-700"
                        }`}
                      >
                        {bookmarkedIds.has(Number(item.id)) ? "Saved" : "Save"}
                      </Button>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        )}

        {/* Lihat lebih banyak */}
        <div className="text-center mt-10">
          <Link
            href={
              tab === "latest"
                ? "https://mediahub.polri.go.id/"
                : "https://tribratanews.polri.go.id/"
            }
          >
            <Button
              size={"lg"}
              className="text-[#b3882e] bg-transparent border border-[#b3882e] px-6 py-2 rounded-s-sm text-sm font-medium hover:bg-[#b3882e]/10 transition"
            >
              Lihat Lebih Banyak
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
}

// "use client";

// import { useState, useEffect } from "react";
// import Image from "next/image";
// import { Button } from "@/components/ui/button";
// import { ThumbsUp, ThumbsDown } from "lucide-react";
// import { Card } from "../ui/card";
// import Link from "next/link";
// import { listData, listArticles } from "@/service/landing/landing";
// import { Swiper, SwiperSlide } from "swiper/react";
// import "swiper/css";
// import "swiper/css/navigation";
// import { Navigation } from "swiper/modules";

// // Format tanggal
// function formatTanggal(dateString: string) {
//   if (!dateString) return "";
//   return (
//     new Date(dateString)
//       .toLocaleString("id-ID", {
//         day: "2-digit",
//         month: "short",
//         year: "numeric",
//         hour: "2-digit",
//         minute: "2-digit",
//         hour12: false,
//         timeZone: "Asia/Jakarta",
//       })
//       .replace(/\./g, ":") + " WIB"
//   );
// }

// export default function MediaUpdate() {
//   const [tab, setTab] = useState<"latest" | "popular">("latest");
//   const [dataToRender, setDataToRender] = useState<any[]>([]);
//   const [loading, setLoading] = useState(true);

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

//   async function fetchData(section: "latest" | "popular") {
//     try {
//       setLoading(true);

//       // Use new Articles API
//       const response = await listArticles(
//         1,
//         20,
//         1, // typeId for images
//         undefined,
//         undefined,
//         section === "latest" ? "createdAt" : "viewCount"
//       );

//       console.log("Media Update Articles API response:", response);

//       if (response?.error) {
//         console.error("Articles API failed, falling back to old API");
//         // Fallback to old API
//         const fallbackRes = await listData(
//           "1",
//           "",
//           "",
//           20,
//           0,
//           section === "latest" ? "createdAt" : "clickCount",
//           "",
//           "",
//           ""
//         );
//         setDataToRender(fallbackRes?.data?.data?.content || []);
//         return;
//       }

//       // Handle new API response structure
//       const articlesData = response?.data?.data || [];

//       // Transform articles data to match old structure for backward compatibility
//       const transformedData = articlesData.map((article: any) => ({
//         id: article.id,
//         title: article.title,
//         category: article.categoryName || (article.categories && article.categories[0]?.title) || "Tanpa Kategori",
//         createdAt: article.createdAt,
//         smallThumbnailLink: article.thumbnailUrl,
//         label: article.typeId === 1 ? "Image" : article.typeId === 2 ? "Video" : article.typeId === 3 ? "Text" : article.typeId === 4 ? "Audio" : "",
//         ...article
//       }));

//       setDataToRender(transformedData);
//     } catch (err) {
//       console.error("Gagal memuat data:", err);
//       // Try fallback to old API if new API fails
//       try {
//         const fallbackRes = await listData(
//           "1",
//           "",
//           "",
//           20,
//           0,
//           section === "latest" ? "createdAt" : "clickCount",
//           "",
//           "",
//           ""
//         );
//         setDataToRender(fallbackRes?.data?.data?.content || []);
//       } catch (fallbackError) {
//         console.error("Fallback API also failed:", fallbackError);
//       }
//     } finally {
//       setLoading(false);
//     }
//   }

//   return (
//     <section className="bg-white px-4 py-10 border max-w-[1350px] mx-auto rounded-md border-[#CDD5DF] my-10">
//       <div className="max-w-screen-xl mx-auto">
//         <h2 className="text-2xl font-semibold text-center mb-6">
//           Media Update
//         </h2>

//         {/* Tab */}
//         <div className="flex justify-center mb-8 bg-white">
//           <Card className="bg-[#FFFFFF] rounded-xl flex flex-row p-3 gap-2">
//             <button
//               onClick={() => setTab("latest")}
//               className={`px-5 py-2 rounded-lg text-sm font-medium ${
//                 tab === "latest" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
//               }`}
//             >
//               Konten Terbaru
//             </button>
//             <button
//               onClick={() => setTab("popular")}
//               className={`px-5 py-2 rounded-lg text-sm font-medium ${
//                 tab === "popular" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
//               }`}
//             >
//               Konten Terpopuler
//             </button>
//           </Card>
//         </div>

//         {/* Slider */}
//         {loading ? (
//           <p className="text-center">Loading...</p>
//         ) : (
//           <Swiper
//             modules={[Navigation]}
//             navigation
//             spaceBetween={20}
//             slidesPerView={1}
//             breakpoints={{
//               640: { slidesPerView: 2 },
//               1024: { slidesPerView: 4 },
//             }}
//           >
//             {dataToRender.map((item) => (
//               <SwiperSlide key={item.id}>
//                 <div className="rounded-xl shadow-md overflow-hidden bg-white">
//                   <div className="w-full h-[204px] relative">
//                     <Image
//                       src={item.smallThumbnailLink || "/placeholder.png"}
//                       alt={item.title || "No Title"}
//                       fill
//                       className="object-cover"
//                     />
//                   </div>
//                   <div className="p-3">
//                     <div className="flex gap-2 mb-1">
//                       <span className="text-xs text-white px-2 py-0.5 rounded bg-blue-600">
//                         {item.category || "Tanpa Kategori"}
//                       </span>
//                       <span className="text-xs font-medium text-[#b3882e]">
//                         {item.label || ""}
//                       </span>
//                     </div>
//                     <p className="text-xs text-gray-500 mb-1">
//                       {formatTanggal(item.createdAt)}
//                     </p>
//                     <p className="text-sm font-semibold mb-3 line-clamp-2">
//                       {item.title}
//                     </p>

//                     <div className="flex items-center justify-between">
//                       <div className="flex gap-2 text-gray-600">
//                         <ThumbsUp className="w-4 h-4 cursor-pointer" />
//                         <ThumbsDown className="w-4 h-4 cursor-pointer" />
//                       </div>
//                       <Button
//                         variant="default"
//                         size="sm"
//                         className="text-white bg-blue-600 rounded px-4"
//                       >
//                         Save
//                       </Button>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>
//             ))}
//           </Swiper>
//         )}

//         {/* Lihat lebih banyak */}
//         <div className="text-center mt-10">
//           <Link
//             href={
//               tab === "latest"
//                 ? "https://mediahub.polri.go.id/"
//                 : "https://tribratanews.polri.go.id/"
//             }
//           >
//             <Button
//               size={"lg"}
//               className="text-[#b3882e] bg-transparent border border-[#b3882e] px-6 py-2 rounded-s-sm text-sm font-medium hover:bg-[#b3882e]/10 transition"
//             >
//               Lihat Lebih Banyak
//             </Button>
//           </Link>
//         </div>
//       </div>
//     </section>
//   );
// }