import { headers } from 'next/headers';
import type { Metadata } from 'next';
import { fetchBrandDetails, getMediaUrl } from '@/lib/api';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';

interface Params {
  url_identifier: string;
  slug: string;
}

export async function generateMetadata(props: { params: Promise<Params> }): Promise<Metadata> {
  const params = await props.params;
  const headersList = await headers();
  const host = headersList.get('host') || '';
  const domainTheme = host.includes('rollerblindbekasi.in') ? 'rollerblindbekasi.in' : 
                      host.includes('rollerblindjakarta.in') ? 'rollerblindjakarta.in' : 
                      host;
                      
  const data = await fetchBrandDetails(domainTheme, params.url_identifier, params.slug);
  const proto = headersList.get('x-forwarded-proto') || 'https'
  const uri = `/${params.url_identifier}/${params.slug}`

  if (!data || !data.brand) {
    return {
      title: 'Not Found',
    };
  }

  return {
    title: data.brand.meta_title || `${data.brand.name} | ${data.domain?.name || 'Brand'}`,
    description: data.brand.meta_description || data.brand.description?.replace(/<[^>]*>?/gm, '').substring(0, 160),
    keywords: data.brand.meta_keyword,
    openGraph: {
       title: data.brand.meta_title || data.brand.name,
       description: data.brand.meta_description || data.brand.description?.replace(/<[^>]*>?/gm, '').substring(0, 160),
       images: data.brand.media ? [getMediaUrl(data.brand.media)] : [],
       type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: data.brand.meta_title || data.brand.name,
      description: data.brand.meta_description || data.brand.description?.replace(/<[^>]*>?/gm, '').substring(0, 160),
      images: data.brand.media ? [getMediaUrl(data.brand.media)] : [],
    },
     alternates: {
      canonical: `${proto}://${host}${uri}`,
    },
  };
}

export default async function BrandPage(props: { params: Promise<Params> }) {
  const params = await props.params;
  const headersList = await headers();
  const host = headersList.get('host') || '';
  const domainTheme = host.includes('rollerblindbekasi.in') ? 'rollerblindbekasi.in' : 
                      host.includes('rollerblindjakarta.in') ? 'rollerblindjakarta.in' : 
                      host;

  const data = await fetchBrandDetails(domainTheme, params.url_identifier, params.slug);

  if (!data || !data.brand) {
    notFound();
  }

  const { brand } = data;
  
  return (
    <div className="">
    <article className="container mx-auto px-4 py-16 md:py-24 max-w-4xl">
      <div className="mb-4 text-sm font-medium text-primary">
         <Link href="/#brands" className="hover:underline">← Kembali ke beranda</Link>
      </div>

      <header className="mb-10 text-center sm:text-left">
        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
          {brand.name}
        </h1>
      </header>

      <div className="w-full aspect-video bg-muted/30 rounded-xl mb-10 overflow-hidden flex items-center justify-center p-8 border">
          {
            brand.media ? 
              <Image
                src={getMediaUrl(brand.media)}
                alt={brand.name}
                width={400}
                height={200}
                className="w-auto h-full max-h-64 object-contain transition-transform duration-500 hover:scale-110"
              />
            :
            <div className="text-primary/20 font-serif text-6xl md:text-8xl select-none px-4 text-center text-balance">
              {brand.name}
            </div>
          }
      </div>

      {brand.description && (
        <div 
          className="prose prose-lg dark:prose-invert max-w-none 
            prose-headings:font-bold prose-a:text-primary hover:prose-a:underline"
          dangerouslySetInnerHTML={{ __html: brand.description }}
        />
      )}
      
      <hr className="my-12 border-muted" />
      
      {/* <div className="flex justify-between items-center">
         <p className="text-muted-foreground text-sm">Terima kasih telah membaca</p>
         <Link href="/" className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">
             Lihat produk lainnya
         </Link>
      </div> */}
    </article>
    </div>
  );
}