import { connectMongo } from "@/lib/mongo";
import { Category } from "@/models/Category";
import { Product } from "@/models/Product";
import PortfolioBrowser from "@/components/portfolio/PortfolioBrowser";
import type { ProductView } from "@/components/portfolio/ProductCard";

export const dynamic = "force-dynamic";

interface CategoryView {
  _id: string;
  name: string;
  slug: string;
}

async function getData(): Promise<{
  categories: CategoryView[];
  products: (ProductView & { categoryId: string })[];
}> {
  try {
    await connectMongo();
    const [cats, prods] = await Promise.all([
      Category.find().sort({ order: 1, createdAt: 1 }).lean(),
      Product.find().sort({ order: 1, createdAt: -1 }).lean(),
    ]);
    return {
      categories: cats.map((c) => ({
        _id: String(c._id),
        name: c.name,
        slug: c.slug,
      })),
      products: prods.map((p) => ({
        _id: String(p._id),
        title: p.title,
        slug: p.slug,
        description: p.description ?? "",
        mediaFileId: String(p.mediaFileId),
        mediaType: p.mediaType,
        categoryId: String(p.categoryId),
      })),
    };
  } catch (err) {
    console.error("[portfolio] DB error:", err);
    return { categories: [], products: [] };
  }
}

export default async function PortfolioPage() {
  const { categories, products } = await getData();

  return (
    <div className="max-w-7xl mx-auto px-6 lg:px-10 pt-12 lg:pt-20 pb-16">
      <header className="text-center mb-10 lg:mb-14">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold heading-gradient">
          Portfolyo
        </h1>
        <p className="mt-4 text-base sm:text-lg text-brand-300 max-w-2xl mx-auto">
          Source Setups ekibinin profesyonel tasarımlarına göz atın.
          Kategorilere göre filtreleyin.
        </p>
      </header>

      <PortfolioBrowser categories={categories} products={products} />
    </div>
  );
}