import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { ProductDetail as ProductDetailType } from "../../src/api/types";
import { ProductDetailView } from "../components/product/ProductDetailView";
import { ClientOnly } from "../components/ClientOnly";
import { getInternalApiUrl } from "~/utils/api-config";

export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
  const product = data?.product;
  const siteUrl = data?.siteUrl;

  if (!product) {
    return [
      { title: "محصول یافت نشد | ویترون" },
      { name: "description", content: "متاسفانه محصول مورد نظر یافت نشد." },
      { name: "robots", content: "noindex, follow" },
    ];
  }

  const productTitle = product.title;
  const productDescription =
    product.description || "مشاهده جزئیات محصول در فروشگاه ویترون";

  // Ensure image URL is absolute
  const baseImageUrl = product.imageUrls?.[0];
  const imageUrl = baseImageUrl
    ? baseImageUrl.startsWith("http")
      ? baseImageUrl
      : `${siteUrl}${baseImageUrl}`
    : `${siteUrl}/og-image.svg`;

  return [
    { title: `${productTitle} - ویترون` },
    { name: "description", content: productDescription },
    {
      name: "keywords",
      content: `${productTitle}، خرید آنلاین، فروشگاه آنلاین، ویترون، محصول`,
    },
    { name: "robots", content: "index, follow" },

    // Open Graph
    { property: "og:title", content: `${productTitle} - ویترون` },
    { property: "og:description", content: productDescription },
    { property: "og:type", content: "product" },
    { property: "og:image", content: imageUrl },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { property: "og:image:alt", content: productTitle },
    {
      property: "og:url",
      content: `${siteUrl}/store/${params?.storeId}/product/${product.id}`,
    },
    { property: "og:site_name", content: "ویترون" },
    { property: "og:locale", content: "fa_IR" },

    // Twitter Card
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: `${productTitle} - ویترون` },
    { name: "twitter:description", content: productDescription },
    { name: "twitter:image", content: imageUrl },
  ];
};

interface LoaderData {
  product: ProductDetailType;
  siteUrl: string;
}

// Server-side loader
export async function loader({ params }: LoaderFunctionArgs) {
  const { id } = params;
  try {
    const response = await fetch(
      `${getInternalApiUrl()}/api/product/v1/products/${encodeURIComponent(id ?? "")}/`,
    );

    if (!response.ok) {
      throw new Error(`Failed to fetch product: ${response.status}`);
    }

    const product = await response.json();
    const siteUrl = process.env.VITE_SITE_URL || "https://vitrown.com";
    return json<LoaderData>({ product, siteUrl });
  } catch (error) {
    console.error("Error fetching product:", error);
    throw new Response("Error loading product", { status: 500 });
  }
}

// Main component
export default function ProductDetail() {
  const { product } = useLoaderData<typeof loader>();

  return (
    <ClientOnly>
      {() => <ProductDetailView product={product} isOwner={true} />}
    </ClientOnly>
  );
}