---
// Locale-basierte Produktseite
import Layout from "../../../layouts/Layout.astro";
import Product from "../../../components/Product.astro";
import { getProducts } from "../../../lib/graphql/queries.js";
import { i18n } from "../../../lib/i18n/i18n.js";
import type { Product as ProductType } from "../../../lib/types/product.js";

const locale = Astro.params["locale"] || "de";
i18n.setLocale(locale);

let products: ProductType[] = [];
try {
  products = await getProducts(4);
} catch (error) {
  // Verbindungsfehler weniger störend behandeln
  const isConnectionError =
    error instanceof Error &&
    (error.name === "ConnectionError" ||
      error.message.includes("GraphQL-Server nicht erreichbar") ||
      error.message.includes("ECONNREFUSED"));

  if (isConnectionError) {
    // In Development: Warnung ausgeben
    if (import.meta.env.DEV) {
      console.warn(
        "GraphQL-Server nicht erreichbar. Verwende leere Produktliste."
      );
      console.warn("Starte den Server mit: npm run mock:server");
    }
  } else {
    console.error("Fehler beim Laden der Produkte:", error);
  }
  products = [];
}

const title = locale === "en" ? "Products" : "Produkte";
---

<Layout title={title} locale={locale}>
  <main class="max-w-7xl mx-auto px-8 py-8">
    <h1 class="text-4xl font-bold mb-8 text-gray-900">
      {locale === "en" ? "Products" : "Produkte"}
    </h1>

    {
      products.length === 0 ? (
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <p class="text-yellow-800">
            {locale === "en"
              ? "No products available. Make sure the GraphQL server is running."
              : "Keine Produkte verfügbar. Stelle sicher, dass der GraphQL-Server läuft."}
          </p>
        </div>
      ) : (
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
          {products.map((product) => (
            <Product product={product} />
          ))}
        </div>
      )
    }
  </main>
</Layout>