"use client";
import React, { useState } from "react";
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import { generateLocalizedPath } from "@/utils/globals";
import { useParams, usePathname, useRouter } from "next/navigation";

const dummyImage = [
  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
];

const categories = [
  { id: 1, title: "HUT HUMAS KE - 73" },
  { id: 2, title: "OPERASI ZEBRA 2024" },
  { id: 3, title: "PON XXI" },
  { id: 4, title: "OPS LILIN NATARU 2024" },
  { id: 5, title: "HUT HUMAS KE - 72" },
  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
  { id: 7, title: "OPS KETUPAT 2024" },
  { id: 8, title: "OPS PATUH 2024" },
  { id: 9, title: "HARI JUANG POLRI" },
  { id: 10, title: "HUT RI KE-79" },
  { id: 11, title: "HARI BHAYANGKARA KE-78" },
];
const formatPicture = [
  { id: 1, title: "PNG" },
  { id: 2, title: "JPEG" },
  { id: 3, title: "JPG" },
];

const FilterPage = () => {
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;

  return (
    <div className="flex flex-col">
      {/* Header */}
      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
        <p>
          {" "}
          Foto {">"} <span className="font-bold">Semua Foto</span>
        </p>
        <p className="font-bold">|</p>
        <p>Terdapat 32499 artikel berisi Foto yang dapat diunduh </p>
      </div>
      {/* Left */}
      <div className="flex flex-col lg:flex-row gap-6 p-4">
        {/* Sidebar Kiri */}
        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
          <h2 className="text-lg font-semibold mb-4">Filter</h2>
          <div className="space-y-6">
            {/* Pencarian */}
            <div>
              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
                Pencarian
              </label>
              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
            </div>

            {/* Tahun & Bulan */}
            <div>
              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
                Tahun & Bulan
              </label>
              <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
            </div>

            {/* Tanggal */}
            <div>
              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
                Tanggal
              </label>
              <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
            </div>

            {/* Kategori */}
            <div>
              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
              <ul className="mt-2 space-y-2">
                {categories.map((category) => (
                  <li key={category?.id}>
                    <label className="inline-flex items-center">
                      <Checkbox id="terms" />
                      <span className="ml-2 text-gray-700">{category.title}</span>
                    </label>
                  </li>
                ))}
              </ul>
            </div>
            {/* Garis */}
            <div className="border-t border-black my-4"></div>
            {/* Garis */}
            <div>
              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
              <ul className="mt-2 space-y-2">
                {formatPicture.map((format) => (
                  <li key={format?.id}>
                    <label className="inline-flex items-center">
                      <Checkbox id="terms" />
                      <span className="ml-2 text-gray-700">{format.title}</span>
                    </label>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* Konten Kanan */}
        <div className="flex-1">
          <div className="flex flex-col items-end mb-4">
            <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
            <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
              <option value="terbaru">Terbaru</option>
              <option value="terlama">Terpopuler</option>
            </select>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {dummyImage.map((image) => (
              <Card key={image.id} className="flex">
                <CardContent onClick={() => router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm">
                  <img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer" />
                  <div className="flex flex-row items-center gap-2">
                    {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
                      <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
                    </svg>{" "}
                  </div>
                  <div className="font-semibold w-fit">{image.title}</div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
      <Pagination className="p-3">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
};

export default FilterPage;
