import { headers } from 'next/headers';
import Link from 'next/link';
import type { Metadata } from 'next';
import { fetchPosts, getMediaUrl } from '@/lib/api';
import Image from 'next/image';
import { MapPin } from 'lucide-react';
import { Icon } from '@iconify/react';

export const metadata: Metadata = {
  title: 'Blog / Posts',
  description: 'Read our latest blog posts and announcements.'
};

interface SearchParams {
  page?: string;
}

export default async function PostListPage(props: { searchParams: Promise<SearchParams> }) {
  const searchParams = await props.searchParams;
  const page = parseInt(searchParams?.page || '1', 10);
  
  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 postsData = await fetchPosts(domainTheme, page, '2');

  if (!postsData) {
    return <div className="p-8 text-center">Gagal memuat artikel.</div>;
  }

  const { data: posts, current_page, last_page } = postsData;

  return (
    <div className="container mx-auto px-4 py-16 md:py-24 max-w-6xl">
      <div className="mb-12 text-center">
        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">Daftar Pemasangan</h1>
        <p className="text-xl text-muted-foreground">Kumpulan hasil pemasangan terbaru kami.</p>
      </div>

      {posts.length === 0 ? (
        <div className="text-center py-10">
          <p className="text-muted-foreground">Tidak ada artikel pemasangan ditemukan.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
          {posts.map((post: any) => (
            <article key={post.id} className="flex flex-col space-y-4 group">
              <Link href={`/post/${post.slug}`} className="block overflow-hidden rounded-xl bg-muted aspect-[16/9]">
                {
                  post.media ? 
                    <div className="aspect-video w-full overflow-hidden">
                    <Image
                      src={getMediaUrl(post.media)}
                      alt={post.title}
                      width={600}
                      height={400}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                  </div>
                  :
                  <div className="w-full h-full transition-colors group-hover:bg-primary/20 flex flex-col items-center justify-center p-6 text-center">
                      <h3 className="text-2xl font-serif text-primary/80 pointer-events-none select-none px-4 text-balance line-clamp-3">
                            {post.title}
                      </h3>
                  </div>
                }
              </Link>
              
              <div className="space-y-3 flex-grow flex flex-col">
                <Link href={`/post/${post.slug}`} className="hover:text-primary transition-colors">
                  <h3 className="text-lg font-bold leading-tight line-clamp-2">{post.title}</h3>
                </Link>
                
                <div className="flex items-center text-sm text-muted-foreground">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <Icon icon="mdi:map-marker" className="w-4 h-4 text-red-500 mr-1 flex-shrink-0" />
                  <span className="line-clamp-1">{post.province?.name || '-'}, {post.city?.name || '-'}</span>
                </div>
                
                <div className="text-sm mt-2 flex-grow">
                  <p className="font-semibold mb-1">Spesifikasi:</p>
                  <ul className="list-disc list-inside text-muted-foreground space-y-1 ml-1">
                    <li>Produk {post.product?.name || '-'}</li>
                    <li>Bahan {post.material_name || '-'}</li>
                    <li>Jumlah {post.quantity || '-'}</li>
                  </ul>
                </div>
                
                <div className="pt-2">
                  <Link href={`/post/${post.slug}`} className="inline-flex items-center justify-center rounded-md border border-foreground bg-transparent px-4 py-2 text-sm font-medium shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-transform hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:border-white dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,1)]">
                    Lihat Selengkapnya
                  </Link>
                </div>
              </div>
            </article>
          ))}
        </div>
      )}

      {/* Pagination Controls */}
      {last_page > 1 && (
        <div className="flex justify-center items-center space-x-2 mt-8">
          {current_page > 1 && (
            <Link 
              href={`/pemasangan?page=${current_page - 1}`}
              className="px-4 py-2 border rounded-md hover:bg-muted transition-colors"
            >
              Sebelumnya
            </Link>
          )}
          <span className="text-sm text-muted-foreground">
            Halaman {current_page} dari {last_page}
          </span>
          {current_page < last_page && (
            <Link 
              href={`/pemasangan?page=${current_page + 1}`}
              className="px-4 py-2 border rounded-md hover:bg-muted transition-colors"
            >
              Selanjutnya
            </Link>
          )}
        </div>
      )}
    </div>
  );
}