import { formatMovementType } from "@/app/(dashboard)/movements/movement.copy"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { getI18n } from "@/i18n/server"
import { AssetService } from "@/services/asset.service"
import { ItemService } from "@/services/item.service"
import { MovementService } from "@/services/movement.service"

export default async function ItemPage({
  params,
}: {
  params: Promise<{ itemId: string }>
}) {
  const { itemId } = await params
  const item = await ItemService.findByIdWithCategory(itemId)
  const assets = await AssetService.findByItemId(itemId)
  const movements = await MovementService.findAllByItemId(itemId)
  const { dictionary } = await getI18n()
  const copy = dictionary.inventory.items.detail
  const movementCopy = dictionary.inventory.movements

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

  return (
    <div className="grid gap-6">
      <Card className="rounded-sm shadow-none">
        <CardHeader>
          <CardTitle>{item.name}</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.labels.category}</span>
              <span>{item.category.name}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">{copy.labels.stock}</span>
              <span>{item.stock}</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {assets?.length > 0 && (
        <Card className="rounded-sm shadow-none">
          <CardHeader>
            <CardTitle>Assets</CardTitle>
          </CardHeader>
          <CardContent>
            {assets?.map((asset) => (
              <div
                key={asset.id}
                className="grid grid-cols-3 gap-x-8 gap-y-2 text-sm"
              >
                <div className="flex justify-between">
                  <span className="text-gray-600">Status</span>
                  <span>{asset.status || "Available"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Serial Number</span>
                  <span>{asset.serialNumber}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Delivery Note</span>
                  <span>{asset.deliveryNote}</span>
                </div>
              </div>
            ))}
            {assets?.length === 0 && (
              <p className="col-span-2 text-center text-gray-500">
                No assets found.
              </p>
            )}
          </CardContent>
        </Card>
      )}

      {movements?.length > 0 && (
        <Card className="rounded-sm shadow-none">
          <CardHeader>
            <CardTitle>{movementCopy.snippet.title}</CardTitle>
          </CardHeader>
          <CardContent>
            {movements.map((movement) => (
              <div
                key={`${movement.id}-${movement.type}`}
                className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm"
              >
                <div className="flex justify-between">
                  <span className="text-gray-600">
                    {movementCopy.snippet.labels.type}
                  </span>
                  <span>
                    {formatMovementType(
                      movement.type,
                      movementCopy.types,
                      movementCopy.fallback,
                    )}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">
                    {movementCopy.snippet.labels.quantity}
                  </span>
                  <span>{movement.quantity}</span>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  )
}