"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useState } from "react";

const dummyImage = [
  { id: 1, thumbnail: "/assets/banner-sample.png" },
  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
];

const dummyData = {
  id: 12312,
  title: "ahahah",
  createdBy: "Mabes",
  createdAt: "21-21-2021",
  time: "18:23",
  desc: "sdaasd",
  htmlDescription:
    '<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
};

const DetailInfo = () => {
  const [selectedSize, setSelectedSize] = useState<string>("L");
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;

  const sizes = [
    { label: "XL", value: "3198 x 1798 px" },
    { label: "L", value: "2399 x 1349 px" },
    { label: "M", value: "1599 x 899 px" },
    { label: "S", value: "1066 x 599 px" },
    { label: "XS", value: "800 x 450 px" },
  ];

  return (
    <div className="min-h-screen p-4 md:p-8">
      {/* Container Utama */}
      <div className="rounded-md overflow-hidden md:flex">
        {/* Bagian Kiri */}
        <div className="md:w-2/3">
          {/* Gambar Utama */}
          <div className="relative">
            <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="w-full" />
            <div className="absolute top-4 left-4"></div>
          </div>

          {/* Thumbnail */}
          <div className="p-4 grid grid-cols-4 gap-2">
            {[1, 2, 3, 4].map((_, index) => (
              <img
                key={index}
                src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018"
                alt={`Thumbnail ${index + 1}`}
                className="w-full h-16 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
              />
            ))}
          </div>
        </div>

        {/* Bagian Kanan */}
        <div className="md:w-1/3 p-4 bg-gray-300 rounded-lg mx-4">
          <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
              <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
            </svg>
            <p className="text-base lg:text-lg">Simpan</p>
          </div>
          {/* garis */}
          <div className="border-t border-black my-4"></div>

          <Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
            OPS MANTAP PRAJA & PILKADA 2024
          </Link>

          <div className="flex justify-center flex-wrap gap-2 mb-4">
            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">poldajabar</p>
            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">pilkadamai2024</p>
          </div>

          <div className="border-t border-black my-4"></div>

          {/* Opsi Ukuran Foto */}
          <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>

          <div className="border-t border-black my-4"></div>

          <div className="space-y-2">
            {sizes.map((size) => (
              <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
                <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
                <div className="text-sm">
                  {size.label} ---------------------------------------- {size.value}
                </div>
              </label>
            ))}
          </div>

          {/* Download Semua */}
          <div className="mt-4">
            <label className="flex items-center space-x-2 text-sm">
              <input type="checkbox" className="text-red-600 focus:ring-red-600" />
              <span>Download Semua File?</span>
            </label>
          </div>

          {/* Tombol Download */}
          <button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
              <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
            </svg>
            Download
          </button>
        </div>
      </div>

      {/* Footer Informasi */}
      <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
        <p className="items-end">
          oleh <span className="font-semibold text-black">{dummyData.createdBy}</span> | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65
        </p>
        <p>Kreator: poppy-PID-poldajabar</p>
      </div>

      {/* Keterangan */}
      <div className="md:w-2/3">
        <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{dummyData.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: dummyData.htmlDescription }} />
      </div>

      {/* Comment */}
      <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
        <p className="flex items-start text-lg">Berikan Komentar</p>
        <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
        <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
      </div>

      {/* Konten Serupa */}
      <div className="w-full">
        <div className="space-x-5 flex flex-col p-4">
          <div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
            <h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
              <span className="text-black ">Konten </span> Serupa
            </h2>
            <Tabs value={selectedTab} onValueChange={setSelectedTab}>
              <TabsList>
                <TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                  Audio Visual
                </TabsTrigger>
                <TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                  Audio
                </TabsTrigger>
                <TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                  Foto
                </TabsTrigger>
                <TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                  Teks
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <div className="px-10">
            {selectedTab == "video" ? (
              <Carousel>
                <CarouselContent>
                  {dummyImage.map((image) => (
                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                      <Card>
                        <CardContent className="flex items-center justify-center">
                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                        </CardContent>
                      </Card>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            ) : selectedTab == "audio" ? (
              <Carousel>
                <CarouselContent>
                  {dummyImage.map((image) => (
                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                      <Card>
                        <CardContent className="flex items-center justify-center">
                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                        </CardContent>
                      </Card>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            ) : selectedTab == "image" ? (
              <Carousel>
                <CarouselContent>
                  {dummyImage.map((image) => (
                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                      <Card onClick={() => router.push(`${locale}/image/detail/${image.id}`)}>
                        <CardContent className="flex items-center justify-center">
                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                        </CardContent>
                      </Card>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            ) : (
              <Carousel>
                <CarouselContent>
                  {dummyImage.map((image) => (
                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                      <Card>
                        <CardContent>
                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                        </CardContent>
                      </Card>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            )}
          </div>
        </div>
        <div className="flex items-center flex-row justify-center">
          <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
            LIHAT SEMUA
          </Link>
        </div>
      </div>
    </div>
  );
};

export default DetailInfo;
