import { headers } from 'next/headers'
import type { Metadata } from 'next'
import { fetchHomepageData, API_URL, getMediaUrl } from '@/lib/api'
import { CallOutPanel, CategoryPanel, BrandPanel, PostPanel, CallOutPanel2 } from '@/components/blocks/dynamic-panels'
import HeroSection from '@/components/blocks/hero-section/hero-section'
import { blogPosts } from '@/assets/data/blog-posts'
import Head from 'next/head'

// Generate dynamic metadata
export async function generateMetadata(): Promise<Metadata> {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  const domainTheme = host.includes('rollerblindbekasi.in') ? 'rollerblindbekasi.in' : 
                      host.includes('rollerblindjakarta.in') ? 'rollerblindjakarta.in' : 
                      host; // Fallback or direct use
  
  const data = await fetchHomepageData(domainTheme);
  const domain = data?.domain;

  if (!domain) {
    return {
      title: 'Homepage',
      description: 'Default Description',
    };
  }

  return {
    title: domain.meta_title || domain.name,
    description: domain.meta_description || domain.short_description,
    keywords: domain.meta_keyword,
    openGraph: {
        title: domain.meta_title || domain.name,
        description: domain.meta_description || domain.short_description,
        images: domain.logo ? [getMediaUrl(domain.logo)] : [],
    }
  }
}

const Home = async () => {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  
  // Example matching logic (use actual host matching in production)
  const domainTheme = host

  const data = await fetchHomepageData(domainTheme);

  if (!data || !data.domain) {
    return (
      <div className="flex items-center justify-center min-h-[50vh]">
        <div className="text-center">
            <h1 className="text-2xl font-bold">Silakan konfigurasikan pengaturan Domain Anda.</h1>
            <p className="text-muted-foreground mt-2">Tidak dapat menemukan konfigurasi halaman utama untuk {host}.</p>
        </div>
      </div>
    );
  }

  const { domain, call_outs, categories, brands, latest_posts } = data;

  return (
    <div>
      {/* 
        Ideally, the Logo and Navbar should be in layout.tsx. 
        However, if layout is static, we can inject a specific homepage header here if requested.
      */}
      <HeroSection blogData={blogPosts} domain={domain} />
      
      <CallOutPanel2 callOuts={call_outs} domain={domain} />
 
       <CategoryPanel categories={categories} domain={domain} />
 
       <BrandPanel brands={brands} domain={domain} />
 
       <PostPanel posts={latest_posts} domain={domain} />

    </div>
  )
}

export default Home