import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { prisma } from "@/lib/prisma";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CardEditForm } from "./edit-form";
import { getCardImageUrl, shouldBypassImageOptimizer } from "@/lib/cards";

export default async function AdminCardEditPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const card = await prisma.tarotCard.findUnique({ where: { id } });
  if (!card) notFound();
  const imageUrl = getCardImageUrl(card);

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">ویرایش کارت: {card.nameFa}</h1>
      <div className="flex gap-8 flex-wrap">
        <Card className="w-40 overflow-hidden">
          <div className="relative aspect-[200/340]">
            <Image
              src={imageUrl}
              alt={card.nameFa}
              fill
              className="object-cover"
              unoptimized={shouldBypassImageOptimizer(imageUrl)}
            />
          </div>
        </Card>
        <Card className="flex-1 min-w-[280px]">
          <CardHeader>
            <CardTitle className="text-base">اطلاعات</CardTitle>
          </CardHeader>
          <CardContent>
            <CardEditForm card={card} />
          </CardContent>
        </Card>
      </div>
      <Link href="/admin/cards" className="inline-block mt-6 text-sm underline">
        بازگشت به لیست کارت‌ها
      </Link>
    </div>
  );
}