"use client";
import Image from "next/image";
import Author from "../landing-page/author";
import { useEffect, useState } from "react";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { close } from "@/config/swal";

type TabKey = "trending" | "comments" | "latest";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    file_url: string;
    file_alt: string;
  }[];
};

export default function DetailContent() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [articles, setArticles] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");
  const [search, setSearch] = useState("");
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  const [tabArticles, setTabArticles] = useState<Article[]>([]);

  const [activeTab, setActiveTab] = useState<TabKey>("trending");

  const tabs: { id: TabKey; label: string }[] = [
    { id: "trending", label: "Trending" },
    { id: "comments", label: "Comments" },
    { id: "latest", label: "Latest" },
  ];

  useEffect(() => {
    fetchTabArticles();
  }, [activeTab]);

  async function fetchTabArticles() {
    const req = {
      limit: "5",
      page: 1,
      search: "",
      categorySlug: "",
      sort: "desc",
      sortBy: "created_at",
    };

    try {
      if (activeTab === "trending") {
        req.sortBy = "view_count";
      } else if (activeTab === "comments") {
        req.sortBy = "comment_count";
      } else {
        req.sortBy = "created_at";
      }

      const res = await getListArticle(req);
      setTabArticles(res?.data?.data || []);
    } catch (error) {
      console.error("Failed fetching tab articles:", error);
    }
  }

  const content: Record<
    TabKey,
    { image: string; title: string; date: string }[]
  > = {
    trending: [
      {
        image: "/thumb1.png",
        title:
          "#StopBullyDiSekolah: Peran Positif Media Sosial dalam Mengatasi Bullying",
        date: "22 FEBRUARI 2024",
      },
      {
        image: "/thumb2.png",
        title:
          "Polri Gelar Lomba Orasi Unjuk Rasa dalam Rangka Hari HAM Sedunia Berhadiah Total Lebih dari Rp 150 juta!",
        date: "29 NOVEMBER 2021",
      },
      {
        image: "/thumb3.png",
        title: "Tingkatkan Ibadah Sambut #RamadhanPenuhDamai",
        date: "7 MARET 2024",
      },
      {
        image: "/thumb4.png",
        title:
          "Exploring the Charm of Papua’s Traditional Clothing: A Captivating and Meaningful Cultural Heritage",
        date: "1 AGUSTUS 2024",
      },
    ],
    comments: [
      {
        image: "/thumb-comment.png",
        title: "Pengunjung Komentar Positif tentang Fitur Baru",
        date: "3 JUNI 2024",
      },
    ],
    latest: [
      {
        image: "/thumb-latest.png",
        title: "Update Terbaru dari Redaksi Hari Ini",
        date: "2 JULI 2025",
      },
    ],
  };

  useEffect(() => {
    initState();
  }, [page, showData, startDateValue, selectedCategories]);

  async function initState() {
    // loading();
    const req = {
      limit: showData,
      page,
      search,
      categorySlug: Array.from(selectedCategories).join(","),
      sort: "desc",
      sortBy: "created_at",
    };

    try {
      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
      setTotalPage(res?.data?.meta?.totalPage || 1);
    } finally {
      // close();
    }
  }
  return (
    <>
      <div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
        <Image
          src="/mikul.png"
          alt="Background"
          width={272}
          height={90}
          className="w-full md:w-[272px] h-[90px] object-cover border"
          priority
        />
      </div>
      <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
        <div className="md:col-span-2">
          <p className="text-sm text-gray-500 mb-2">Home &gt; Internasional</p>
          <h1 className="text-3xl md:text-4xl font-bold text-[#1a1a1a] leading-tight mb-4">
            Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan
            Puluhan Terluka
          </h1>
          <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
            <Image
              src="/author.png"
              alt="author"
              width={30}
              height={30}
              className="rounded-full"
            />
            <span className="text-[#3ba6ed] font-medium">
              christine natalia
            </span>
            <span>•</span>
            <span>23 Juni 2025</span>
            <span>•</span>
            <span>Internasional</span>
          </div>

          <div className="w-full h-auto mb-6">
            <Image
              src="/bom.png"
              alt="Berita"
              width={800}
              height={400}
              className="rounded-lg w-full object-cover"
            />
            <p className="text-sm text-gray-500 mt-2 text-end">
              Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan
              Puluhan Terluka
            </p>
          </div>
          <div className="flex relative">
            <div className=" flex flex-col w-fit rounded overflow-hidden  mr-5">
              <Link
                href="#"
                aria-label="Facebook"
                className="bg-[#3b5998] p-4 flex justify-center items-center"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  fill="white"
                  viewBox="0 0 24 24"
                >
                  <path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z" />
                </svg>
              </Link>

              <Link
                href="#"
                aria-label="Twitter"
                className="bg-[#55acee] p-4 flex justify-center items-center"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  fill="white"
                  viewBox="0 0 24 24"
                >
                  <path d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016" />
                </svg>
              </Link>

              <Link
                href="#"
                aria-label="Google"
                className="bg-[#fce9e7] p-4 flex justify-center items-center text-white"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z" />
                </svg>
              </Link>

              <Link
                href="#"
                aria-label="Share"
                className="bg-[#cccccc] p-4 flex justify-center items-center text-white"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path d="m21 12l-7-7v4C7 10 4 15 3 20c2.5-3.5 6-5.1 11-5.1V19z" />
                </svg>
              </Link>
            </div>
            <div className="flex-1 overflow-y-auto">
              <p className="text-gray-700 leading-relaxed text-justify">
                Sebuah aksi bom bunuh diri terjadi di Gereja Saint Elias,
                kawasan Dwelaa, Damaskus, Suriah, pada Minggu (22/6), menewaskan
                sedikitnya 20 orang dan melukai 52 lainnya. Insiden tragis ini
                terjadi saat gereja tengah dipenuhi jemaat, termasuk anak-anak
                dan lansia, yang sedang mengikuti ibadah mingguan. Kementerian
                Dalam Negeri Suriah mengonfirmasi bahwa pelaku serangan
                merupakan anggota kelompok teroris ISIS. Dalam keterangan resmi,
                pihak kementerian menyebut pelaku memasuki gereja dengan membawa
                senjata api, melepaskan tembakan, dan kemudian meledakkan diri
                dengan sabuk peledak yang dibawanya. Pasca ledakan, aparat
                keamanan langsung mengamankan lokasi dan menutup akses ke area
                sekitar untuk mencegah kemungkinan serangan susulan. Pihak
                berwenang juga mengerahkan tim penyelamat dan tenaga medis untuk
                mengevakuasi korban dan memberikan perawatan darurat kepada yang
                terluka. Kementerian Kesehatan, melalui kantor berita SANA,
                menginformasikan bahwa sebagian besar korban luka mengalami
                cedera serius akibat serpihan ledakan. Sejumlah korban masih
                dalam kondisi kritis dan dirawat di beberapa rumah sakit rujukan
                di Damaskus. Seorang saksi mata bernama Lawrence Maamari
                menuturkan bahwa pelaku masuk ke dalam gereja dengan senapan di
                tangan. Jemaat yang panik sempat mencoba menghadang pelaku
                sebelum akhirnya terjadi ledakan. Saksi lainnya, Ziad (40),
                pemilik toko di dekat lokasi, mengatakan mendengar suara
                tembakan disusul ledakan besar. “Kami melihat kobaran api di
                dalam gereja dan bangku-bangku terlempar ke arah pintu masuk,”
                ujarnya. Suasana mencekam sempat terjadi selama beberapa jam.
                Beberapa warga kehilangan anggota keluarga dan berupaya
                mencarinya di antara puing-puing bangunan serta rumah sakit
                terdekat. Insiden ini menuai kecaman internasional. Utusan
                Khusus PBB untuk Suriah, Geir Pedersen, menyebut aksi tersebut
                sebagai kejahatan keji dan mendesak adanya penyelidikan
                menyeluruh. Sementara itu, Kementerian Luar Negeri Prancis
                menyatakan bahwa serangan ini merupakan bentuk terorisme brutal,
                serta kembali menyuarakan pentingnya transisi damai di Suriah
                agar seluruh warga dapat hidup dalam keamanan tanpa
                diskriminasi. Pemerintah Suriah menilai serangan ini sebagai
                langkah terdesak dari kelompok radikal untuk mengganggu
                stabilitas nasional dan menciptakan ketegangan sektarian.
                Menteri Dalam Negeri, Anas Khattab, menyampaikan belasungkawa
                kepada keluarga korban dan menyatakan bahwa penyelidikan sudah
                dimulai oleh tim khusus kementeriannya. Dalam keterangannya,
                Khattab menegaskan bahwa aksi teror serupa tidak akan
                menghentikan tekad pemerintah dalam menciptakan perdamaian. Ia
                juga mengungkapkan bahwa kelompok ISIS kini menargetkan
                komunitas-komunitas tertentu, termasuk umat Kristen dan Syiah,
                dengan pola serangan yang lebih terorganisir. Beberapa minggu
                sebelumnya, aparat keamanan berhasil menggagalkan sejumlah
                rencana serangan dan menangkap sel-sel ISIS di wilayah Damaskus.
                Operasi kontra-terorisme di Aleppo bahkan menewaskan tiga
                anggota kelompok tersebut dan satu petugas keamanan. Insiden bom
                bunuh diri di Damaskus menjadi pengingat bahwa ancaman
                ekstremisme belum sepenuhnya sirna di Suriah. Pemerintah pun
                terus berupaya meningkatkan keamanan dan memperkuat kerja sama
                dengan pihak internasional dalam memberantas terorisme.
              </p>
              <Author />
              <div className=" flex flex-row gap-2 items-center">
                <span className="font-semibold text-sm text-gray-700">
                  Tags:
                </span>
                <div className="flex flex-wrap gap-2 mt-1">
                  {[
                    "Bom bunuh diri Suriah",
                    "Bom Damaskus",
                    "Gereja Saint Elias",
                    "Serangan ISIS",
                  ].map((tag, index) => (
                    <span
                      key={index}
                      className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
            <Image
              src="/image-kolom.png"
              alt="Berita Utama"
              fill
              className="object-contain"
            />
          </div>
          <div className="mt-10">
            <div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
              <Image
                src="/author.png"
                alt="Author"
                width={60}
                height={60}
                className="rounded-full"
              />
              <div>
                <p className="text-green-600 font-bold text-lg">
                  christine natalia
                </p>
              </div>
            </div>

            <h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
            <p className="text-gray-600 mb-4 text-sm">
              Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
              ditandai <span className="text-green-600">*</span>
            </p>

            <form className="space-y-6 mt-6">
              <div>
                <label
                  htmlFor="komentar"
                  className="block text-sm font-medium mb-1"
                >
                  Komentar <span className="text-green-600">*</span>
                </label>
                <textarea
                  id="komentar"
                  className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
                  required
                />
              </div>

              <div>
                <label
                  htmlFor="nama"
                  className="block text-sm font-medium mb-1"
                >
                  Nama <span className="text-green-600">*</span>
                </label>
                <input
                  type="text"
                  id="nama"
                  className="w-full border border-gray-300 rounded-md p-2"
                  required
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium mb-1"
                  >
                    Email <span className="text-green-600">*</span>
                  </label>
                  <input
                    type="email"
                    id="email"
                    className="w-full border border-gray-300 rounded-md p-2"
                    required
                  />
                </div>
                <div>
                  <label
                    htmlFor="website"
                    className="block text-sm font-medium mb-1"
                  >
                    Situs Web
                  </label>
                  <input
                    type="url"
                    id="website"
                    className="w-full border border-gray-300 rounded-md p-2"
                  />
                </div>
              </div>

              <div className="flex items-start space-x-2 mt-2">
                <input type="checkbox" id="saveInfo" className="mt-1" />
                <label htmlFor="saveInfo" className="text-sm text-gray-700">
                  Simpan nama, email, dan situs web saya pada peramban ini untuk
                  komentar saya berikutnya.
                </label>
              </div>

              <p className="text-red-600 text-sm">
                The reCAPTCHA verification period has expired. Please reload the
                page.
              </p>

              <button
                type="submit"
                className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
              >
                KIRIM KOMENTAR
              </button>
            </form>
          </div>
        </div>

        <div className="md:col-span-1 space-y-6">
          <div className="sticky top-0 space-y-6">
            <div className="bg-white shadow p-4 rounded-lg">
              <Image
                src="/kolom.png"
                alt="Iklan"
                width={345}
                height={345}
                className="rounded"
              />
              <button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
                Learn More
              </button>
            </div>

            <div className="bg-white shadow p-4 rounded-lg">
              <h2 className="text-lg font-semibold mb-2">Connect with us</h2>
              <div className="flex space-x-2">
                <div className="bg-[#0057ff] text-white px-3 py-2 rounded">
                  <p className="text-sm font-bold">Bē</p>
                  <p className="text-xs">139 Followers</p>
                </div>
                <div className="bg-[#ff0000] text-white px-3 py-2 rounded">
                  <p className="text-sm font-bold">YouTube</p>
                  <p className="text-xs">205k Subscribers</p>
                </div>
                <div className="bg-[#f9a825] text-white px-3 py-2 rounded">
                  <p className="text-sm font-bold">RSS</p>
                  <p className="text-xs">23.9k Followers</p>
                </div>
              </div>
            </div>
            <div className="bg-white shadow p-4 rounded-lg">
              <div className="flex space-x-4 border-b mb-4">
                {tabs.map((tab) => (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`pb-2 text-sm font-medium ${
                      activeTab === tab.id
                        ? "border-b-2 border-green-600 text-green-600"
                        : "text-gray-600"
                    }`}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>

              <div className="space-y-4">
                {tabArticles.map((item, idx) => (
                  <div key={idx} className="flex space-x-3">
                    <Image
                      src={item.thumbnailUrl || "/default-thumb.png"}
                      alt={item.title}
                      width={70}
                      height={70}
                      className="rounded w-[70px] h-[70px] object-cover"
                    />
                    <div>
                      <p className="text-sm font-semibold leading-snug">
                        {item.title}
                      </p>
                      <p className="text-xs text-gray-500 mt-1">
                        {new Date(item.createdAt).toLocaleDateString("id-ID", {
                          day: "2-digit",
                          month: "long",
                          year: "numeric",
                        })}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-6">
              <h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
                Recommended
              </h3>

              <div className="space-y-4">
                <div className="relative">
                  <Image
                    src="/gaza.png"
                    alt="Recommended Article"
                    width={400}
                    height={200}
                    className="rounded-lg w-full h-auto object-cover"
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
                    <p className="text-sm font-semibold leading-tight">
                      Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas
                      dan Puluhan Terluka
                    </p>
                    <p className="text-xs text-gray-300 mt-1">
                      📅 23 JUNI 2025
                    </p>
                  </div>
                </div>

                <div className="space-y-3">
                  <div className="flex space-x-3">
                    <Image
                      src="/perang.png"
                      alt="OPM Serang Gereja"
                      width={80}
                      height={60}
                      className="rounded object-cover w-[80px] h-[60px]"
                    />
                    <div>
                      <p className="text-sm font-semibold leading-snug">
                        OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai
                        Serang Gereja
                      </p>
                      <p className="text-xs text-gray-500 mt-1">
                        📅 15 JUNI 2025
                      </p>
                    </div>
                  </div>

                  <div className="flex space-x-3">
                    <Image
                      src="/jateng.png"
                      alt="Denda Merokok"
                      width={80}
                      height={60}
                      className="rounded object-cover w-[80px] h-[60px]"
                    />
                    <div>
                      <p className="text-sm font-semibold leading-snug">
                        Jakarta Terapkan Denda Rp 250.000 bagi Warga yang
                        Merokok Sembarangan
                      </p>
                      <p className="text-xs text-gray-500 mt-1">
                        📅 13 JUNI 2025
                      </p>
                    </div>
                  </div>

                  <div className="flex space-x-3">
                    <Image
                      src="/investasi.jpg"
                      alt="Pengguna Internet"
                      width={80}
                      height={60}
                      className="rounded object-cover w-[80px] h-[60px]"
                    />
                    <div>
                      <p className="text-sm font-semibold leading-snug">
                        Warga Indonesia Jadi Pengguna Internet via Ponsel
                        Terbanyak di Dunia
                      </p>
                      <p className="text-xs text-gray-500 mt-1">
                        📅 26 MEI 2025
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}