import FilterByisDeleted from "@/components/FilterByisDeleted";
import Loader from "@/components/Loader";
import PatientsTable from "@/components/PatientsTable";
import RoleGuard from "@/components/RoleGuard";
import SearchBox from "@/components/SearchBox";
import {Field} from "@/components/ui/field";
import {Label} from "@/components/ui/label";
import UsersTableExport from "@/components/usersTableExport";

import {Plus} from "lucide-react";
import Link from "next/link";
import React, {Suspense} from "react";

export default function Page() {
  return (
    <>
      <section>
        <div className="grid grid-cols-4 gap-5">
          <div className="col-span-3 flex items-center justify-start ">
            <section className="w-full h-[250px]">
              <h4 className="text-sm font-bold underline underline-offset-8 mb-2">
                جستجوی پیشرفته
              </h4>
              <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4 p-2">
                <SearchBox
                  inputName="id"
                  hasLabel
                  label="شناسه"
                  route="patients"

                />
                <SearchBox
                  inputName="name"
                  hasLabel
                  label="نام بیمار"
                  route="patients"
                />
                <SearchBox
                  inputName="lastname"
                  hasLabel
                  label="نام خانوادگی"
                  route="patients"
                />
                <SearchBox
                  inputName="ncode"
                  hasLabel
                  label="کدملی "
                  route="patients"
                />
                <SearchBox
                  inputName="pcode"
                  hasLabel
                  label="کد پاسپورت "
                  route="patients"
                />
                <SearchBox
                  inputName="phone"
                  hasLabel
                  label="شماره تماس "
                  route="patients"
                />
                <SearchBox
                  inputName="email"
                  hasLabel
                  label="ایمیل بیمار"
                  route="patients"
                />
                <SearchBox
                  inputName="age"
                  hasLabel
                  label="سن"
                  route="patients"
                />
                
                <Field className="w-[300px] flex flex-row justify-start items-center gap-x-3 ">
                  <Label className="!w-fit">فیلتر بر اساس</Label>
                  <FilterByisDeleted />
                </Field>
              </div>
            </section>

            {/* <ExpertiseFilterBox /> */}
          </div>
          
          <div className="col-span-1 flex flex-col items-end justify-start gap-x-7 gap-y-4">
            <RoleGuard roles={["ADMIN", "DEVELOPER", "COORDINATOR"]}>
              <Link
                href={"/patients/new"}
                className="text-white bg-primary w-[240px] max-w-full  py-2 px-3 rounded-lg flex items-center justify-center gap-x-2 text-sm"
              >
                <Plus size={"20"} />
                <span>افزودن بیمار جدید</span>
              </Link>
            </RoleGuard>
            <RoleGuard roles={["ADMIN", "DEVELOPER", "COORDINATOR"]}>
              <UsersTableExport table="DOCTOR" />
            </RoleGuard>
          </div>
        </div>
        <div className="space-y-4 mt-10">
          <Suspense fallback={<Loader />}>
            <PatientsTable />
          </Suspense>
        </div>
      </section>
    </>
  );
}