"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { HolidayRow } from "@/types/holiday";
import type { LucideIcon } from "lucide-react";
import {
  ArrowLeft,
  CalendarDays,
  CalendarOff,
  ClipboardList,
  Filter,
  Search,
  SlidersHorizontal,
  UserRound,
  Users,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import AddLeaveDialog from "./add-leave-dialog";
import LeavesFilledPanel from "./leaves-filled-panel";

export type { HolidayRow } from "@/types/holiday";

type Props = {
  app: string;
  data: HolidayRow[];
};

const UPDATED_EMPTY = "Updated: Apr 20, 2026";
const UPDATED_FILLED = "Updated: Mar 21, 2021";

function LeavesStatCard({
  label,
  value,
  icon: Icon,
  updatedLabel,
}: {
  label: string;
  value: string;
  icon: LucideIcon;
  updatedLabel: string;
}) {
  return (
    <div className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm sm:p-5">
      <div className="flex items-start gap-3">
        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#E8F1F7]">
          <Icon className="size-5 text-[#074473]" aria-hidden />
        </div>
        <div className="min-w-0 flex-1 space-y-1">
          <p className="text-sm font-medium text-[#545D69]">{label}</p>
          <p className="text-xl font-bold tabular-nums text-[#1C1D22] sm:text-2xl">{value}</p>
          <p className="text-xs text-[#858C94]">{updatedLabel}</p>
        </div>
      </div>
    </div>
  );
}

export default function LeavesPageBody({ app, data }: Props) {
  const router = useRouter();
  const [search, setSearch] = useState("");
  const [addLeaveOpen, setAddLeaveOpen] = useState(false);

  const hasData = data.length > 0;

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return data;
    return data.filter((row) =>
      [row.employeeName, row.leaveType, row.from, row.to, row.reason, row.status].some((field) =>
        String(field).toLowerCase().includes(q),
      ),
    );
  }, [data, search]);

  const stats = hasData
    ? {
        presents: "12/60",
        planned: "8 Days",
        unplanned: "0 Days",
        pending: "12",
      }
    : {
        presents: "00/00",
        planned: "0 Days",
        unplanned: "0 Days",
        pending: "0",
      };

  const updatedLabel = hasData ? UPDATED_FILLED : UPDATED_EMPTY;

  const settingsHref = `/${app}/leaves/settings`;

  return (
    <div className="min-h-0 space-y-6 bg-[#F4F5FA] p-5 md:p-6">
      <AddLeaveDialog open={addLeaveOpen} onOpenChange={setAddLeaveOpen} />
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          {hasData ? (
            <Button
              type="button"
              variant="outline"
              size="icon"
              className="size-10 shrink-0 rounded-lg border border-[#E0E0E0] bg-white text-[#383E49] hover:bg-[#F9FAFB]"
              onClick={() => router.back()}
              aria-label="Go back"
            >
              <ArrowLeft className="size-5" aria-hidden />
            </Button>
          ) : null}
          <h1 className="min-w-0 text-xl font-bold text-[#1C1D22] sm:text-2xl">All Holidays</h1>
        </div>
        <div className="flex flex-wrap items-center gap-3">
          <Button
            asChild
            variant="outline"
            className="h-[42px] shrink-0 rounded-md border-[#074473] bg-white px-5 text-sm font-semibold text-[#074473] hover:bg-[#eef4f8]"
          >
            <Link href={settingsHref}>Leave Setting</Link>
          </Button>
          <Button
            type="button"
            className="inline-flex h-[42px] shrink-0 items-center gap-2 rounded-md bg-[#074473] px-6 text-sm font-medium text-white hover:bg-[#074473]/90"
            onClick={() => setAddLeaveOpen(true)}
          >
            Add New Leave
          </Button>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <LeavesStatCard
          label="Total Presents"
          value={stats.presents}
          icon={Users}
          updatedLabel={updatedLabel}
        />
        <LeavesStatCard
          label="Planned Leave"
          value={stats.planned}
          icon={CalendarDays}
          updatedLabel={updatedLabel}
        />
        <LeavesStatCard
          label="Unplanned Leaves"
          value={stats.unplanned}
          icon={CalendarOff}
          updatedLabel={updatedLabel}
        />
        <LeavesStatCard
          label="Pending Requests"
          value={stats.pending}
          icon={ClipboardList}
          updatedLabel={updatedLabel}
        />
      </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={(e) => setSearch(e.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 capitalize text-[#858C94] hover:bg-[#FCFCFC]"
            >
              <SlidersHorizontal className="size-4" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        {!hasData ? (
          <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-[#383E49]" 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-lg font-bold text-black">No Holidays Added</p>
                <p className="text-base text-[#8B8D97]">Add Holidays Of Employees.</p>
              </div>
            </div>
          </div>
        ) : (
          <LeavesFilledPanel data={filtered} />
        )}
      </div>
    </div>
  );
}