import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { UserStatus } from "@/generated/prisma/client"
import { getI18n } from "@/i18n/server"
import { AssignmentService } from "@/services/assignment.service"
import { PersonService } from "@/services/person.service"

import { formatPersonDepartment } from "../_components/person.copy"
import {
  formatUserRole,
  type UserFallbackCopy,
  type UserRoleCopy,
} from "../_components/user.copy"

export default async function PersonInfoPage({
  params,
}: {
  params: Promise<{ personId: string }>
}) {
  const { personId } = await params
  const { dictionary } = await getI18n()
  const copy = dictionary.inventory.people
  const assignmentCopy = dictionary.inventory.assignments
  const userCopy = dictionary.admin.users
  const person = await PersonService.findByIdWithUser(personId)
  const assignments = await AssignmentService.findAllByPerson(personId)

  if (!person) {
    return <div>{copy.detail.notFound}</div>
  }

  return (
    <div className="grid gap-6">
      <Card className="rounded-sm shadow-none">
        <CardHeader>
          <CardTitle>{`${person.firstName} ${person.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">{copy.detail.labels.email}</span>
              <span>{person.email}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">{copy.detail.labels.phone}</span>
              <span>{person.phone}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">
                {copy.detail.labels.department}
              </span>
              <span>
                {formatPersonDepartment(
                  person.department,
                  copy.departments,
                  copy.fallback,
                )}
              </span>
            </div>
            {person.user ? (
              <>
                <div className="flex justify-between">
                  <span className="text-gray-600">
                    {copy.detail.labels.role}
                  </span>
                  <span>
                    {formatUserRole(
                      person.user.role,
                      userCopy.roles as UserRoleCopy,
                      userCopy.fallback as UserFallbackCopy,
                    )}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">
                    {copy.detail.labels.status}
                  </span>
                  <span>
                    {person.user.status === UserStatus.ACTIVE
                      ? userCopy.status.active
                      : userCopy.status.inactive}
                  </span>
                </div>
              </>
            ) : (
              <div className="col-span-2 flex justify-between">
                <span className="text-gray-600">{copy.detail.labels.role}</span>
                <span>{copy.detail.labels.noUser}</span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
      {assignments.length > 0 && (
        <Card className="rounded-sm shadow-none">
          <CardHeader>
            <CardTitle>{assignmentCopy.list.title}</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>
  )
}