import { 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 { AssignmentService } from "@/services/assignment.service"

import ReturnButton from "./_components/return.button"

export default async function AssignmentsPage(props: {
  searchParams?: Promise<{
    page?: string
    search?: string
  }>
}) {
  const searchParams = await props.searchParams
  const currentPage = searchParams?.page ? parseInt(searchParams.page) : 1
  const search = searchParams?.search || ""
  const { data: assignments, totalPages } =
    await AssignmentService.findAllWithRecipient({
      page: currentPage,
      search,
    })

  return (
    <div className="flex flex-col gap-4">
      <PageHeader
        title="Assignments"
        link="/assignments/new"
        search={search}
        data={assignments}
      />
      {assignments.length === 0 && <div>No assignments found</div>}
      {assignments.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">
                  Recipient
                </th>
                <th scope="col" className="p-4">
                  Item
                </th>
                <th scope="col" className="p-4">
                  Serial Number
                </th>
                <th scope="col" className="p-4">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {assignments.map((assignment) => (
                <tr key={assignment.id} className="border-b">
                  <td className="p-4">
                    <Link
                      href={`/recipients/${assignment?.recipient?.id}`}
                      className="hover:underline"
                    >
                      {assignment?.recipient?.firstName}{" "}
                      {assignment?.recipient?.lastName}
                    </Link>
                  </td>
                  <td className="p-4">
                    <Link
                      href={`/inventory/items/${assignment?.item?.id}`}
                      className="hover:underline"
                    >
                      {assignment?.item?.name}
                    </Link>
                  </td>
                  <td className="p-4">
                    {assignment?.asset?.serialNumber || "N/A"}
                  </td>
                  <td className="p-4">
                    <div className="flex gap-2">
                      <Link
                        href={`/assignments/${assignment.id}/edit`}
                        passHref
                      >
                        <Button variant="outline">
                          <Pencil />
                        </Button>
                      </Link>
                      <ReturnButton assignmentId={assignment.id} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot className="border-t">
              <tr>
                <td colSpan={4} className="p-4 text-center text-sm">
                  <PaginationButtons totalPages={totalPages} />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </div>
  )
}
