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, toMetaDescription } from '../../lib/seo';
import { fetchFromApi } from '../../lib/serverFetch';
import ProductListing from '../../components/ProductListing';
import { formatProductCount, type CatalogProduct } from '../../components/CatalogProductCard';

interface Brand {
  id: number;
  name: string;
  slug: string;
  description: string;
  website?: string;
  image_url?: string;
  products: CatalogProduct[];
}

interface BrandDetailProps {
  initialBrand: Brand;
}

const BrandDetail: React.FC<BrandDetailProps> = ({ initialBrand }) => {
  const router = useRouter();
  const brand = initialBrand;

  const brandDescription = toMetaDescription(
    brand.description ||
      `Celé parfémy ${brand.name}. Originální vůně v celých flakonech na Vystříkejto.cz.`
  );

  if (!brand.products || brand.products.length === 0) {
    return (
      <>
        <Seo
          title={`${brand.name} – celé parfémy | Vystříkejto.cz`}
          description={brandDescription}
          canonical={`${SITE_URL}/brands/${brand.slug}`}
        />
        <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">{brand.name}</h1>
            <p className="text-luxury-light/60 text-lg mb-4">
              Od této značky 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={`${brand.name} – celé parfémy | Vystříkejto.cz`}
        description={brandDescription}
        canonical={`${SITE_URL}/brands/${brand.slug}`}
        ogImage={brand.image_url}
        jsonLd={breadcrumbsJsonLd([
          { name: 'Domů', href: '/' },
          { name: 'Značky', href: '/brands' },
          { name: brand.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: 'Značky', href: '/brands' },
              { name: brand.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">{brand.name}</h1>
              {brand.description && <p className="mt-4 max-w-3xl text-sm leading-relaxed text-luxury-light/60 sm:text-base">{brand.description}</p>}
            </div>
            <span className="hidden shrink-0 text-xs text-luxury-light/45 sm:block">{formatProductCount(brand.products.length)}</span>
          </header>
          <ProductListing
            initialProducts={brand.products}
            showHeader={false}
            sectionId="catalog-products"
            dataSection="brand-products"
          />
        </div>
      </section>
    </>
  );
};

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

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

  return { props: { initialBrand: brand } };
};

export default BrandDetail;