import DeleteImageButton from "@/components/portfolio/images/DeleteImageButton";
import EditImageForm from "@/components/portfolio/images/EditImageForm";
import ImageColors from "@/components/portfolio/images/ImageColors";
import ImageVariants from "@/components/portfolio/images/ImageVariants";
import prisma from "@/lib/prisma";

export default async function PortfolioImagesEditPage({ params }: { params: { id: string } }) {
  const { id } = await params;
  const image = await prisma.portfolioImage.findUnique({
    where: { id },
    include: {
      album: true,
      type: true,
      metadata: true,
      categories: true,
      colors: { include: { color: true } },
      sortContexts: true,
      tags: true,
      variants: true
    }
  })

  const albums = await prisma.portfolioAlbum.findMany({ orderBy: { sortIndex: "asc" } });
  const categories = await prisma.portfolioCategory.findMany({ orderBy: { sortIndex: "asc" } });
  const tags = await prisma.portfolioTag.findMany({ orderBy: { sortIndex: "asc" } });
  const types = await prisma.portfolioType.findMany({ orderBy: { sortIndex: "asc" } });

  if (!image) return <div>Image not found</div>

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Edit image</h1>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div>
          {image ? <EditImageForm image={image} albums={albums} tags={tags} categories={categories} types={types} /> : 'Image not found...'}
          <div className="mt-6">
            {image && <DeleteImageButton imageId={image.id} />}
          </div>
          <div>
            {image && <ImageVariants variants={image.variants} />}
          </div>
        </div>
        <div className="space-y-6">
          <div>
            {image && <ImageColors colors={image.colors} imageId={image.id} fileKey={image.fileKey} fileType={image.fileType || ""} />}
          </div>
        </div>
      </div>
    </div>
  );
}