"use client";

import { Button } from "@/components/ui/button";
import { getEmployeeTableColumns } from "@/data/source/employees";
import type { EmployeeRow } from "@/types/employee";
import { Plus, UserPlus } from "lucide-react";
import Link from "next/link";
import { useMemo, useState } from "react";
import { EMPLOYEE_DEPT_FILTERS } from "@/features/employees/employee-filter-config";
import type { EmployeeDeptFilterId } from "@/features/employees/employee-filter-config";
import EmployeesCardToolbar from "./employees-card-toolbar";
import EmployeesFilterPanel, { type EmployeeWorkTypeFilter } from "./employees-filter-panel";
import EmployeesFilledPanel from "./employees-filled-panel";

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

export default function EmployeesPageBody({ app, data }: Props) {
  const [search, setSearch] = useState("");
  const [filterOpen, setFilterOpen] = useState(false);
  const [deptFilters, setDeptFilters] = useState<Set<EmployeeDeptFilterId>>(() => new Set());
  const [workTypeFilter, setWorkTypeFilter] = useState<EmployeeWorkTypeFilter>(null);

  const columns = useMemo(() => getEmployeeTableColumns(app), [app]);
  const filtered = useMemo(() => {
    let rows = data;
    const q = search.trim().toLowerCase();
    if (q) {
      rows = rows.filter((e) =>
        [e.name, e.designation, e.type, e.checkIn].some((field) => field.toLowerCase().includes(q)),
      );
    }
    if (deptFilters.size > 0) {
      rows = rows.filter((row) =>
        Array.from(deptFilters).some((id) => EMPLOYEE_DEPT_FILTERS.find((o) => o.id === id)?.match(row)),
      );
    }
    if (workTypeFilter) {
      rows = rows.filter((row) => row.type === workTypeFilter);
    }
    return rows;
  }, [data, search, deptFilters, workTypeFilter]);

  const newEmployeeHref = `/${app}/employees/new`;

  const pageHeader = (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <h1 className="text-xl font-bold leading-snug text-[#45464E]">All Employee Information</h1>
      <Button
        asChild
        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"
      >
        <Link href={newEmployeeHref}>
          <Plus className="size-4 shrink-0" aria-hidden />
          Add New Employee
        </Link>
      </Button>
    </div>
  );

  const cardShell = "rounded-xl border border-gray-100 bg-white p-6 shadow-sm";

  const filterPanel = (
    <EmployeesFilterPanel
      open={filterOpen}
      onOpenChange={setFilterOpen}
      appliedDepartments={deptFilters}
      appliedWorkType={workTypeFilter}
      onApply={(nextDept, nextType) => {
        setDeptFilters(nextDept);
        setWorkTypeFilter(nextType);
      }}
    />
  );

  if (data.length === 0) {
    return (
      <div className="space-y-6">
        {pageHeader}
        {filterPanel}
        <div className={cardShell}>
          <EmployeesCardToolbar
            searchValue={search}
            onSearchChange={setSearch}
            onFiltersClick={() => setFilterOpen(true)}
          />
          <div className="flex flex-col items-center justify-center gap-9 py-6 sm:py-10">
            <div className="flex size-[123px] shrink-0 items-center justify-center rounded-full border border-[#E1E2E9] bg-[#F4F5FA]">
              <UserPlus className="size-[52px] text-[#383E49]" strokeWidth={1.25} aria-hidden />
            </div>
            <div className="flex max-w-sm flex-col items-center gap-6 text-center">
              <div className="space-y-2.5">
                <p className="text-lg font-bold capitalize text-black">No Employee added</p>
                <p className="text-base text-[#8B8D97]">Add More Employee</p>
              </div>
              <Button
                asChild
                className="inline-flex h-[42px] items-center gap-2 rounded-md bg-[#074473] px-6 text-sm font-medium text-white hover:bg-[#074473]/90"
              >
                <Link href={newEmployeeHref}>
                  <Plus className="size-4 shrink-0" aria-hidden />
                  Add New Employee
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {pageHeader}
      {filterPanel}
      <div className={cardShell}>
        <EmployeesCardToolbar
          searchValue={search}
          onSearchChange={setSearch}
          onFiltersClick={() => setFilterOpen(true)}
        />
        <EmployeesFilledPanel data={filtered} columns={columns} />
      </div>
    </div>
  );
}