import Image from 'next/image';
import Link from 'next/link';
import { getMediaUrl } from '@/lib/api';
import { Icon } from '@iconify/react';
import { ArrowRight } from 'lucide-react';

export function CallOutPanel2({ callOuts, domain }: { callOuts: any[], domain?: any }) {
  if (!callOuts || callOuts.length === 0) return null;

  return (
    <section id="features" className="w-full py-16 lg:py-24 bg-background">
      <div className="container mx-auto px-4 md:px-6 max-w-7xl">
        
        {/* Header */}
        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl text-gray-900">
            {domain?.call_out_title || 'Enjoy the finest features with our products'}
          </h2>
          <p className="max-w-[800px] text-muted-foreground md:text-lg">
            {domain?.call_out_description || 'We provide all the advantages that can simplify all your financial transactions without any further requirements'}
          </p>
        </div>

        {/* Grid of Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {callOuts.map((callOut, index) => {
            return (
              <div key={index} className="flex flex-col p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm hover:shadow-md transition-all duration-300">
                  
                  {/* Icon Container */}
                  <div className="mb-6">
                    {(callOut.media_type === 'icon' || callOut.media_type === 2) && callOut.media ? (
                        <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-50 border border-gray-100">
                          <Icon icon={callOut.media} className="w-5 h-5 text-gray-800" />
                        </div>
                    ) : (callOut.media_type === 'image' || callOut.media_type === 1) && callOut.media ? (
                        <div className="relative w-10 h-10 rounded-lg border border-gray-100 overflow-hidden">
                          <Image
                            src={getMediaUrl(callOut.media)}
                            alt={callOut.title || 'Feature'}
                            fill
                            className="object-cover"
                          />
                        </div>
                    ) : (
                        <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-50 border border-gray-100">
                          <Icon icon="mdi:image-off-outline" className="w-5 h-5 text-gray-400" />
                        </div>
                    )}
                  </div>
                  
                  {/* Text Content */}
                  <div className="space-y-3">
                    <h3 className="text-lg font-bold text-gray-900 tracking-tight">
                      {callOut.title}
                    </h3>
                    <p className="text-[14px] text-gray-500 leading-relaxed">
                      {callOut.description}
                    </p>
                  </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export function CallOutPanel({ callOuts }: { callOuts: any[] }) {
  if (!callOuts || callOuts.length === 0) return null;

  return (
    <div className="flex flex-col">
      {callOuts.map((callOut, index) => {
        const isEven = index % 2 === 0;
        return (
          <section key={callOut.id} className="relative w-full py-20 lg:py-28 overflow-hidden bg-background border-b border-border/10 last:border-0 group">
            <div className=" mx-auto px-4 md:px -6 relative z-10">
              <div className="grid gap-8 lg:grid-cols-2 lg:gap-16 items-center">
                 
                 {/* Text Content */}
                 <div className={`space-y-6 ${!isEven ? 'lg:order-2' : ''}`}>
                    <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl text-foreground text-balance">
                      {callOut.title}
                    </h2>
                    <p className="text-lg md:text-xl text-muted-foreground leading-relaxed text-balance">
                      {callOut.description}
                    </p>
                 </div>
                 
                 {/* Media Content */}
                 <div className={`flex justify-center ${!isEven ? 'lg:order-1' : ''}`}>
                   {(callOut.media_type === 'icon' || callOut.media_type === 2) && callOut.media ? (
                      <div className="flex items-center justify-center w-full max-w-sm aspect-square rounded-[3rem] bg-gradient-to-br from-primary/10 to-primary/5 shadow-inner transition-transform duration-500 group-hover:-translate-y-2">
                         <Icon icon={callOut.media} className="w-32 h-32 md:w-48 md:h-48 text-primary opacity-90" />
                      </div>
                   ) : (callOut.media_type === 'image' || callOut.media_type === 1) && callOut.media ? (
                      <div className="relative w-full max-w-lg aspect-square rounded-[2rem] overflow-hidden shadow-2xl glassmorphism group-hover:-translate-y-2 transition-transform duration-500">
                         <Image
                           src={getMediaUrl(callOut.media)}
                           alt={callOut.title || 'Call Out'}
                           fill
                           className="object-cover hover:scale-110 transition-transform duration-700"
                         />
                      </div>
                   ) : (
                      <div className="relative flex items-center justify-center w-full max-w-md aspect-square rounded-[2rem] bg-muted/50 border border-dashed border-muted-foreground/30 text-muted-foreground">
                         <Icon icon="mdi:image-off-outline" className="w-16 h-16 opacity-50" />
                      </div>
                   )}
                 </div>

              </div>
            </div>
            
            {/* Ambient Background Blur */}
            <div className={`absolute top-1/2 ${isEven ? 'left-[80%]' : 'left-[20%]'} -translate-x-1/2 -translate-y-1/2 w-full max-w-[800px] aspect-square bg-primary/5 blur-[100px] rounded-full pointer-events-none transition-all duration-1000 ease-in-out group-hover:scale-110 group-hover:bg-primary/10`} />
          </section>
        );
      })}
    </div>
  );
}

export function CategoryPanel({ categories, domain }: { categories: any[], domain?: any }) {
  if (!categories || categories.length === 0) return null;

  return (
    <section id="categories" className="w-full py-16 lg:py-24 bg-white">
      <div className="container mx-auto px-4 md:px-6 max-w-6xl">
        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl text-gray-900">
            {domain?.category_title || 'Social Media Advertising Reach Statistics - 2025'}
          </h2>
          <p className="max-w-[800px] text-muted-foreground md:text-lg">
            {domain?.category_description || 'Explore the vast advertising potential across leading social media platforms.'}
          </p>
        </div>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-16 gap-x-8">
          {categories.map((cat, i) => (
            <div key={cat.id} className="group flex flex-col items-center text-center">
              {/* Image Container - Rounded Full */}
              <div className="relative w-28 h-28 mb-6 rounded-full overflow-hidden bg-white shadow-[0_4px_20px_rgb(0,0,0,0.08)] border border-gray-100 flex items-center justify-center transition-transform duration-300 group-hover:-translate-y-2">
                {cat.media ? (
                  <Image
                    src={getMediaUrl(cat.media)}
                    alt={cat.name}
                    fill
                    className="object-cover"
                  />
                ) : (
                  <Icon icon="mdi:image-off-outline" className="w-10 h-10 text-gray-400" />
                )}
              </div>
              
              {/* Text Content */}
              <div className="flex items-center gap-3 mb-2">
                <h3 className="text-xl font-bold text-gray-900 tracking-tight">{cat.name}</h3>
                {/* 
                  Note: The image shows a small badge (e.g., '1.15 billion') next to the title.
                  If you have a field for this in your database, you can uncomment and bind it below:
                  <span className="px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-700">{cat.badge}</span>
                */}
              </div>
              
              {cat.description && (
                <p className="text-[15px] text-gray-500 max-w-xs leading-relaxed">
                  {cat.description}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export function BrandPanel({ brands, domain }: { brands: any[], domain?: any }) {
  if (!brands || brands.length === 0) return null;

  // Duplicate brands array enough times to ensure seamless infinite scroll
  const repeatCount = Math.max(4, Math.ceil(12 / brands.length)); 
  const row1Brands = Array.from({ length: repeatCount }).flatMap(() => brands);
  const row2Brands = Array.from({ length: repeatCount }).flatMap(() => [...brands].reverse());

  const getBrandContent = (brand: any) => {
    return brand.media ? (
      <Image
        src={getMediaUrl(brand.media)}
        alt={brand.name}
        width={140}
        height={60}
        className="object-contain max-h-[40px] md:max-h-[50px] w-auto mx-auto block transition-transform duration-300 group-hover:scale-105"
      />
    ) : (
      <span className="block text-xl font-bold text-gray-700 transition-colors group-hover:text-black">
        {brand.name}
      </span>
    );
  };

  const getCardClasses = () => "group flex items-center justify-center w-[180px] h-[70px] md:w-[220px] md:h-[90px] bg-white rounded-xl md:rounded-2xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-gray-100 flex-shrink-0 transition-shadow duration-300 hover:shadow-md";

  return (
    <section className="w-full py-16 lg:py-24 bg-background overflow-hidden">
      <style>{`
        @keyframes marquee-left {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @keyframes marquee-right {
          0% { transform: translateX(-50%); }
          100% { transform: translateX(0); }
        }
        .animate-marquee-left {
          animation: marquee-left 40s linear infinite;
        }
        .animate-marquee-right {
          animation: marquee-right 40s linear infinite;
        }
        .animate-marquee-left:hover, .animate-marquee-right:hover {
          animation-play-state: paused;
        }
      `}</style>

      <div className="container mx-auto px-4 md:px-6 text-center mb-16">
         <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl text-gray-900 mt-2">
              {domain?.brand_title || 'Building the future with industry leaders'}
            </h2>
            <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed">
              {domain?.brand_description || 'Join 50,000+ companies transforming their industries with us.'}
            </p>
          </div> 
      </div>

      <div 
        className="relative flex flex-col gap-6 mx-auto w-full max-w-[100vw]"
        style={{ WebkitMaskImage: 'linear-gradient(to right, transparent, black 15%, black 85%, transparent)', maskImage: 'linear-gradient(to right, transparent, black 15%, black 85%, transparent)' }}
      >
        {/* Top Row - Moves Left */}
        <div className="flex w-max animate-marquee-left gap-6 px-3">
          {row1Brands.map((brand, idx) => (
            brand.slug ? (
              <Link href={`/${brand.url_identifier || 'brand'}/${brand.slug}`} key={`r1-${brand.id}-${idx}`} className={getCardClasses()}>
                {getBrandContent(brand)}
              </Link>
            ) : (
              <div key={`r1-${brand.id}-${idx}`} className={getCardClasses()}>
                {getBrandContent(brand)}
              </div>
            )
          ))}
        </div>

        {/* Bottom Row - Moves Right */}
        <div className="flex w-max animate-marquee-right gap-6 px-3">
          {row2Brands.map((brand, idx) => (
            brand.slug ? (
              <Link href={`/${brand.url_identifier || 'brand'}/${brand.slug}`} key={`r2-${brand.id}-${idx}`} className={getCardClasses()}>
                {getBrandContent(brand)}
              </Link>
            ) : (
              <div key={`r2-${brand.id}-${idx}`} className={getCardClasses()}>
                {getBrandContent(brand)}
              </div>
            )
          ))}
        </div>
      </div>
    </section>
  );
}

export function PostPanel({ posts, domain }: { posts: any[], domain?: any }) {
  if (!posts || posts.length === 0) return null;

  return (
    <section className="w-full py-16 lg:py-24 bg-background">
      <div className="container mx-auto px-4 md:px-6 max-w-7xl">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-4">
          <div className="space-y-4 max-w-2xl">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{domain?.post_title || 'Pemasangan Terbaru'}</h2>
            <p className="text-muted-foreground">{domain?.post_description || 'Update pemasangan terbaru kami.'}</p>
          </div>
          <Link
            href="/pemasangan"
            className="inline-flex h-10 items-center justify-center rounded-full border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
          >
            Daftar Pemasangan
          </Link>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {posts.map(post => (
            <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">
                  <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>
      </div>
    </section>
  );
}