"use client";

import { useState } from "react";
import { format } from "date-fns";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { CalendarIcon, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";

const scheduleData = [
  {
    date: "Jul 1 2025",
    type: "POLRI",
    title: "HUT Bhayangkara RI - 79",
    location: "Mabes Polri, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "POLRI",
    title: "Hari Lahir Pancasila",
    location: "Mabes Polri, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "POLRI",
    title: "Pers Rilis Kasus",
    location: "Mabes Polri, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "POLRI",
    title: "Rapat Koordinasi HUT Bhayangkara RI - 79",
    location: "Mabes Polri, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "MPR",
    title: "Rapat PIMPINAN MPR RI",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "DPR",
    title: "Rapat Anggota Komisi I",
    location: "Gedung DPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "MPR",
    title: "Sidang Paripurna",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "KEJAKSAAN AGUNG",
    title: "Hari Lahir Pancasila",
    location: "Kejaksaan Agung, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "KPU",
    title: "Hari Lahir Pancasila",
    location: "Kantor KPU, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "DPR",
    title: "Rapat Anggota Komisi II",
    location: "Gedung DPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "MPR",
    title: "Rapat DPR dan Basarnas",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "BUMN",
    title: "Hari Lahir Pancasila",
    location: "Kantor BUMN, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "BUMN",
    title: "Focus Group Discussion",
    location: "Kantor BUMN, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "MPR",
    title: "Rapat Anggota MPR RI",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "BUMN",
    title: "Seremoni Sinergi BUMN",
    location: "Kantor BUMN, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "MPR",
    title: "Sumpah Janji Anggota MPR RI",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "KPK",
    title: "Hari Lahir Pancasila",
    location: "Kantor KPK, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "BUMN",
    title: "Monitoring dan Evaluasi Keterbukaan Informasi Publik Tahun 2025",
    location: "Kantor BUMN, Jakarta Indonesia",
  },
  {
    date: "Jul 1 2025",
    type: "KEJAKSAAN AGUNG",
    title: "Hari Lahir Pancasila",
    location: "Kejaksaan Agung, Jakarta, Indonesia",
  },
  {
    date: "Jul 2 2025",
    type: "MPR",
    title: "Monitoring dan Evaluasi Informasi MPR Tahun 2025",
    location: "Gedung MPR, Jakarta, Indonesia",
  },
];

const categories = [
  "SEMUA",
  "POLRI",
  "MAHKAMAH AGUNG",
  "DPR",
  "MPR",
  "KEJAKSAAN AGUNG",
  "KPK",
  "PUPR",
  "BSKDN",
  "BUMN",
  "KPU",
];

export default function Schedule() {
  const [search, setSearch] = useState("");
  const [startDate, setStartDate] = useState<Date | undefined>(
    new Date("2025-07-01")
  );
  const [endDate, setEndDate] = useState<Date | undefined>(
    new Date("2025-07-30")
  );
  const [selectedCategory, setSelectedCategory] = useState("SEMUA");

  const filteredData = scheduleData.filter((item) => {
    const matchesCategory =
      selectedCategory === "SEMUA" || item.type === selectedCategory;
    const matchesSearch = item.title
      .toLowerCase()
      .includes(search.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  return (
    <div className="p-6 max-w-[1350px] mx-auto">
      {/* Filter Bar */}
      <div className="flex flex-wrap gap-4 items-center mb-6">
        <Input
          placeholder="Pencarian"
          className="w-70 mt-7"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />

        {/* Tanggal Mulai */}
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Tanggal Mulai</label>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className="w-[160px] justify-start text-left"
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {startDate ? format(startDate, "dd MMM yyyy") : "Pilih"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={startDate}
                onSelect={setStartDate}
                initialFocus
              />
            </PopoverContent>
          </Popover>
        </div>

        {/* Tanggal Selesai */}
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Tanggal Selesai</label>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className="w-[160px] justify-start text-left"
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {endDate ? format(endDate, "dd MMM yyyy") : "Pilih"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={endDate}
                onSelect={setEndDate}
                initialFocus
              />
            </PopoverContent>
          </Popover>
        </div>

        {/* Publikasi */}
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Publikasi</label>
          <Select>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Semua" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="semua">K/L</SelectItem>
              <SelectItem value="dipublikasikan">BUMN</SelectItem>
              <SelectItem value="belum">PEMERINTAH DAERAH</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Filter Chips */}
      <div className="flex w-full gap-5 overflow-x-auto pb-2 border-b border-[#C6A455] mb-6">
        {categories.map((cat) => (
          <Button
            key={cat}
            variant={selectedCategory === cat ? "default" : "outline"}
            className={cn(
              "rounded-sm whitespace-nowrap",
              selectedCategory === cat && "bg-[#C6A455] text-white"
            )}
            onClick={() => setSelectedCategory(cat)}
          >
            {cat}
          </Button>
        ))}
        <Button variant="ghost">
          <ChevronRight className="w-5 h-5" />
        </Button>
      </div>

      {/* Schedule Table */}
      <h2 className="text-md font-semibold text-muted-foreground mb-4">
        Semua Jadwal
      </h2>
      <div className="flex flex-col gap-3">
        {filteredData.map((item, index) => (
          <div
            key={index}
            className="flex justify-between items-start border-b pb-2"
          >
            <div className="w-1/6 text-sm text-muted-foreground">
              {item.date}
            </div>
            <div className="w-1/5">
              <Badge
                variant="outline"
                className={cn("text-white", {
                  "bg-red-600": item.type === "POLRI",
                  "bg-yellow-500": item.type === "DPR",
                  "bg-green-600": item.type === "KEJAKSAAN AGUNG",
                  "bg-blue-700": item.type === "BUMN",
                  "bg-amber-500": item.type === "MPR",
                  "bg-pink-500": item.type === "KPU",
                  "bg-red-700": item.type === "KPK",
                })}
              >
                {item.type}
              </Badge>
            </div>
            <div className="w-2/5 text-sm">{item.title}</div>
            <div className="w-1/3 text-sm text-muted-foreground">
              {item.location}
            </div>
          </div>
        ))}
      </div>
      <div className="flex justify-between mt-6 text-sm text-blue-600">
        <button>Preview</button>
        <button>Next</button>
      </div>
    </div>
  );
}