import React from 'react';
import { useRouter } from 'next/router';
import { GetServerSideProps } from 'next';
import Seo from '../../components/Seo';
import Breadcrumbs, { breadcrumbsJsonLd } from '../../components/Breadcrumbs';
import { SITE_URL } from '../../lib/seo';
import { fetchFromApi } from '../../lib/serverFetch';
import ProductListing from '../../components/ProductListing';
import { formatProductCount, type CatalogProduct } from '../../components/CatalogProductCard';

interface Category {
  id: number;
  name: string;
  slug: string;
  products: CatalogProduct[];
}

interface CategoryDetailProps {
  initialCategory: Category;
}

const CategoryDetail: React.FC<CategoryDetailProps> = ({ initialCategory }) => {
  const router = useRouter();
  const category = initialCategory;

  const categoryDescription = `Celé parfémy v kategorii ${category.name}. Originální vůně v celých flakonech na Vystříkejto.cz.`;

  if (!category.products || category.products.length === 0) {
    return (
      <>
        <Seo
          title={`${category.name} – celé parfémy | Vystříkejto.cz`}
          description={categoryDescription}
          canonical={`${SITE_URL}/parfemy/${category.slug}`}
          jsonLd={breadcrumbsJsonLd([
            { name: 'Domů', href: '/' },
            { name: category.name },
          ])}
        />
        <div className="w-full bg-luxury-dark min-h-screen flex items-center justify-center pt-20 md:pt-48">
          <div className="text-center">
            <h1 className="text-3xl font-aptos font-black text-luxury-light mb-4">{category.name}</h1>
            <p className="text-luxury-light/60 text-lg mb-4">
              V této kategorii zatím nemáme žádné produkty.
            </p>
            <button
              onClick={() => router.push('/')}
              className="px-6 py-2 bg-luxury-gold text-luxury-dark font-bold rounded-lg hover:bg-yellow-300 transition-all duration-300"
            >
              Zpět na hlavní stránku
            </button>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <Seo
        title={`${category.name} – celé parfémy | Vystříkejto.cz`}
        description={categoryDescription}
        canonical={`${SITE_URL}/parfemy/${category.slug}`}
        jsonLd={breadcrumbsJsonLd([
          { name: 'Domů', href: '/' },
          { name: category.name },
        ])}
      />
      <section className="w-full bg-luxury-dark px-4 pb-20 pt-28 sm:px-6 lg:px-[5vw] lg:pb-24 lg:pt-36">
        <div className="mx-auto max-w-[1600px]">
          <Breadcrumbs items={[{ name: 'Domů', href: '/' }, { name: category.name }]} />
          <header className="mb-10 flex items-end justify-between gap-6">
            <div>
              <p className="mb-2 text-xs font-bold uppercase tracking-[0.18em] text-luxury-gold">Celé parfémy</p>
              <h1 className="text-4xl font-black tracking-[-0.035em] text-luxury-light sm:text-5xl lg:text-6xl">{category.name}</h1>
            </div>
            <span className="hidden text-xs text-luxury-light/45 sm:block">{formatProductCount(category.products.length)}</span>
          </header>
          <ProductListing
            initialProducts={category.products}
            showHeader={false}
            sectionId="catalog-products"
            dataSection="category-products"
          />
        </div>
      </section>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<CategoryDetailProps> = async ({ req, params }) => {
  const slug = params?.slug;
  if (!slug || Array.isArray(slug)) {
    return { notFound: true };
  }

  const category = await fetchFromApi<Category>(req, `/api/categories/${encodeURIComponent(slug)}`);
  if (!category) {
    return { notFound: true };
  }

  return { props: { initialCategory: category } };
};

export default CategoryDetail;