import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AssignmentService } from "@/services/assignment.service"
import { RecipientService } from "@/services/recipient.service"

export default async function RecipientInfoPage({
  params,
}: {
  params: Promise<{ recipientId: string }>
}) {
  const { recipientId } = await params
  const recipient = await RecipientService.findById(recipientId)
  const assignments = await AssignmentService.findAllByRecipient(recipientId)

  if (!recipient) {
    return <div>Recipient not found</div>
  }

  return (
    <div className="grid gap-6">
      <Card className="rounded-sm shadow-none">
        <CardHeader>
          <CardTitle>
            {recipient.firstName + " " + recipient.lastName}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-600">Username</span>
              <span>{recipient.username}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Email</span>
              <span>{recipient.email}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Phone</span>
              <span>{recipient.phone}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Department</span>
              <span>{recipient.department}</span>
            </div>
          </div>
        </CardContent>
      </Card>
      {assignments.length > 0 && (
        <Card className="rounded-sm shadow-none">
          <CardHeader>
            <CardTitle>Assignments</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col gap-y-2 text-sm">
              {assignments.map((assignment) => (
                <div
                  key={assignment.id}
                  className="flex w-full justify-between"
                >
                  <span className="text-gray-600">{assignment.item?.name}</span>
                  <span>{assignment.asset?.serialNumber}</span>
                  <span>{assignment.quantity || 1}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
