import { Eye, Pencil } from "lucide-react"
import Link from "next/link"

import PageHeader from "@/components/common/pageheader"
import PaginationButtons from "@/components/common/pagination"
import { Button } from "@/components/ui/button"
import type { Person } from "@/generated/prisma/client"
import { getI18n } from "@/i18n/server"
import { PersonService } from "@/services/person.service"

import { formatPersonDepartment } from "./_components/person.copy"

export default async function PeoplePage(props: {
  searchParams?: Promise<{
    page?: string
    search?: string
  }>
}) {
  const searchParams = await props.searchParams
  const currentPage = searchParams?.page ? parseInt(searchParams.page, 10) : 1
  const search = searchParams?.search || ""
  const { data: people, totalPages } = await PersonService.findAllPaginated({
    page: currentPage,
    pageSize: 10,
    search,
  })
  const { dictionary } = await getI18n()
  const copy = dictionary.inventory.people

  return (
    <div className="flex flex-col gap-4">
      <PageHeader
        title={copy.list.title}
        link="/people/new"
        addLabel={copy.list.addLabel}
        data={people}
        search={search}
      />
      {people.length === 0 && <div>{copy.list.empty}</div>}
      {people.length > 0 && (
        <div className="overflow-x-auto">
          <table className="text-muted-foreground w-full text-left text-sm">
            <thead className="border-b">
              <tr>
                <th scope="col" className="p-4">
                  {copy.list.columns.name}
                </th>
                <th scope="col" className="p-4">
                  {copy.list.columns.email}
                </th>
                <th scope="col" className="p-4">
                  {copy.list.columns.phone}
                </th>
                <th scope="col" className="p-4">
                  {copy.list.columns.department}
                </th>
                <th scope="col" className="p-4">
                  {copy.list.columns.actions}
                </th>
              </tr>
            </thead>
            <tbody>
              {people.map((person: Person) => (
                <tr key={person.id} className="border-b">
                  <td className="p-4">
                    {`${person.firstName} ${person.lastName}`}
                  </td>
                  <td className="p-4">{person.email}</td>
                  <td className="p-4">{person.phone}</td>
                  <td className="p-4">
                    {formatPersonDepartment(
                      person.department,
                      copy.departments,
                      copy.fallback,
                    )}
                  </td>
                  <td className="flex items-center gap-2 p-4">
                    <Link href={`/people/${person.id}`} passHref>
                      <Button
                        variant="outline"
                        size="icon"
                        aria-label={copy.list.actions.view}
                      >
                        <Eye />
                      </Button>
                    </Link>
                    <Link href={`/people/${person.id}/edit`} passHref>
                      <Button
                        className="btn btn-primary"
                        variant="outline"
                        size="icon"
                        aria-label={copy.list.actions.edit}
                      >
                        <Pencil />
                      </Button>
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot className="border-t">
              <tr>
                <td colSpan={5} className="p-4 text-center text-sm">
                  <PaginationButtons totalPages={totalPages} />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </div>
  )
}