"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import AddHolidayDialog from "@/features/holidays/add-holiday-dialog";
import { Filter, Search, SlidersHorizontal, UserRound } from "lucide-react";
import { useMemo, useState } from "react";

type HolidayItem = {
  id: string;
  date: string;
  day: string;
  name: string;
  group: "upcoming" | "past";
};

const SEED_ROWS: Omit<HolidayItem, "id">[] = [
  { date: "January 01, 2024", day: "Tuesday", name: "New Year", group: "upcoming" },
  { date: "January 07, 2024", day: "Saturday", name: "International Programmer's Day", group: "upcoming" },
  { date: "February 04, 2024", day: "Saturday", name: "World Cancer Day", group: "upcoming" },
  { date: "April 01, 2024", day: "Saturday", name: "April Fool Day", group: "upcoming" },
  { date: "May 07, 2024", day: "Monday", name: "International Programmer's Day", group: "upcoming" },
  { date: "May 22, 2024", day: "Tuesday", name: "International Day For Biological Diversity", group: "upcoming" },
  { date: "June 05, 2024", day: "Wednesday", name: "World Environment Day", group: "past" },
  { date: "June 21, 2024", day: "Friday", name: "International Yoga Day", group: "past" },
  { date: "August 12, 2024", day: "Monday", name: "International Youth Day", group: "past" },
  { date: "September 05, 2024", day: "Thursday", name: "Teacher's Day", group: "past" },
];

const HOLIDAY_ROWS: HolidayItem[] = Array.from({ length: 100 }, (_, index) => ({
  id: String(index + 1),
  ...SEED_ROWS[index % SEED_ROWS.length],
}));

const PAGE_SIZE = 10;

const Page = () => {
  const [activeTab, setActiveTab] = useState<"upcoming" | "past">("upcoming");
  const [search, setSearch] = useState("");
  const [addHolidayOpen, setAddHolidayOpen] = useState(false);

  const filteredRows = useMemo(() => {
    const query = search.trim().toLowerCase();
    return HOLIDAY_ROWS.filter((row) => {
      if (row.group !== activeTab) return false;
      if (!query) return true;
      return [row.date, row.day, row.name].some((value) => value.toLowerCase().includes(query));
    });
  }, [activeTab, search]);

  const pagedRows = filteredRows.slice(0, PAGE_SIZE);
  const hasData = filteredRows.length > 0;
  const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));

  return (
    <div className="min-h-0 space-y-6 bg-[#F4F5FA] p-5 md:p-6">
      <AddHolidayDialog open={addHolidayOpen} onOpenChange={setAddHolidayOpen} />
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <button
            type="button"
            className="inline-flex size-8 items-center justify-center rounded-md text-[#383E49] hover:bg-[#E9EDF4]"
            aria-label="Go back"
          >
            <span aria-hidden>←</span>
          </button>
          <h1 className="text-xl font-bold text-[#1C1D22] sm:text-2xl">All Holidays</h1>
        </div>
        <Button
          type="button"
          className="inline-flex h-[40px] items-center rounded-md bg-[#074473] px-5 text-sm font-medium text-white hover:bg-[#074473]/90"
          onClick={() => setAddHolidayOpen(true)}
        >
          Add New Holiday
        </Button>
      </div>

      <div className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
        <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <h2 className="text-lg font-bold text-[#383E49]">Holidays</h2>
          <div className="flex flex-wrap items-center gap-3">
            <div className="flex h-9 min-w-[176px] max-w-full flex-1 items-center gap-2 rounded border border-[#CFD3D4] px-2 sm:flex-initial sm:min-w-[220px]">
              <Search className="size-4 shrink-0 text-[#ABAFB1]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                className="h-8 border-0 bg-transparent p-0 text-xs text-[#383E49] placeholder:text-[#ABAFB1] focus-visible:ring-0"
                aria-label="Search holidays"
              />
            </div>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
            >
              <Filter className="size-4" aria-hidden />
              Filters
            </Button>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
            >
              <SlidersHorizontal className="size-4" aria-hidden />
              Filters
            </Button>
          </div>
        </div>

        {hasData ? (
          <div className="space-y-5">
            <div className="overflow-hidden rounded-md border border-[#EBEEF2] bg-white">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="border-b border-[#EBEEF2]">
                    <th className="px-10 py-3 text-left text-sm font-semibold text-[#272833]">Date</th>
                    <th className="px-10 py-3 text-left text-sm font-semibold text-[#272833]">Day</th>
                    <th className="px-10 py-3 text-left text-sm font-semibold text-[#272833]">Holiday Name</th>
                  </tr>
                </thead>
                <tbody>
                  {pagedRows.map((row) => (
                    <tr key={row.id} className="border-b border-[#F0F2F5] last:border-0">
                      <td className="px-10 py-3 text-sm font-medium text-[#272833]">{row.date}</td>
                      <td className="px-10 py-3 text-sm font-medium text-[#272833]">{row.day}</td>
                      <td className="px-10 py-3 text-sm font-medium text-[#272833]">{row.name}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-center gap-6">
                <button
                  type="button"
                  onClick={() => setActiveTab("upcoming")}
                  className={`inline-flex items-center gap-2 text-sm font-semibold ${
                    activeTab === "upcoming" ? "text-[#111827]" : "text-[#6B7280]"
                  }`}
                >
                  <span className="size-2 rounded-full bg-[#004F91]" />
                  Upcoming
                </button>
                <button
                  type="button"
                  onClick={() => setActiveTab("past")}
                  className={`inline-flex items-center gap-2 text-sm font-semibold ${
                    activeTab === "past" ? "text-[#111827]" : "text-[#6B7280]"
                  }`}
                >
                  <span className="size-2 rounded-full bg-[#111827]" />
                  Past Holidays
                </button>
              </div>
              <p className="text-center text-xs font-medium text-[#A0A6AF] sm:order-none">page 1 of {totalPages}</p>
              <div className="flex items-center gap-2">
                <Button
                  type="button"
                  variant="outline"
                  className="h-[34px] rounded-md border border-[#E0E0E0] bg-[#FCFCFC] px-4 text-xs font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
                >
                  Previous
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="h-[34px] rounded-md border border-[#E0E0E0] bg-[#FCFCFC] px-4 text-xs font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
                >
                  Next
                </Button>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex min-h-[280px] flex-col items-center justify-center gap-9 py-8 sm:min-h-[360px] sm:py-12">
            <div className="flex size-[123px] shrink-0 items-center justify-center rounded-full border border-[#E1E2E9] bg-[#F4F5FA]">
              <UserRound className="size-[52px] text-[#8B929C]" strokeWidth={1.25} aria-hidden />
            </div>
            <div className="flex max-w-sm flex-col items-center text-center">
              <div className="space-y-2.5">
                <p className="text-[32px] font-semibold leading-8 text-[#101828] sm:text-[36px]">
                  No Holidays Added
                </p>
                <p className="text-base text-[#8B8D97]">Add Holidays For Reminder.</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Page;