import { notFound, redirect } from "next/navigation";
import { createClient } from "../../../../lib/supabase/server";
import EditProductForm from "./EditProductForm";

export default async function EditProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const supabase = await createClient();

  // Confirm login
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    redirect("/admin/login");
  }

  // Confirm PELCY administrator
  const { data: admin } = await supabase
    .from("admin_profiles")
    .select("id")
    .eq("id", user.id)
    .maybeSingle();

  if (!admin) {
    redirect("/");
  }

  // Load product
  const { data: product, error: productError } =
    await supabase
      .from("products")
      .select(
        `
        id,
        name,
        slug,
        description,
        price,
        category_id,
        is_available,
        is_featured,
        featured_image_url
        `
      )
      .eq("id", id)
      .maybeSingle();

  if (productError) {
    console.error(productError);
  }

  if (!product) {
    notFound();
  }

  // Load categories
  const { data: categories } = await supabase
    .from("categories")
    .select("id, name")
    .order("name");

  // Load existing media
  const { data: media } = await supabase
    .from("product_media")
    .select(
      "id, media_type, media_url, sort_order"
    )
    .eq("product_id", id)
    .order("sort_order");

  const existingImage =
    media?.find(
      (item) => item.media_type === "image"
    ) ?? null;

  const existingVideo =
    media?.find(
      (item) => item.media_type === "video"
    ) ?? null;

  return (
    <main className="min-h-screen bg-[#f7f3ee] px-5 py-10 text-[#2b2118]">
      <div className="mx-auto max-w-3xl">

        <p className="text-sm font-bold uppercase tracking-[0.2em] text-[#9b6a44]">
          Product Management
        </p>

        <h1 className="mt-2 text-4xl font-black">
          Edit Product
        </h1>

        <p className="mt-3 text-black/50">
          Update product details, image, video,
          price and availability.
        </p>

        <EditProductForm
          product={product}
          categories={categories ?? []}
          existingImage={existingImage}
          existingVideo={existingVideo}
        />

      </div>
    </main>
  );
}