import Link from "next/link";
import Image from "next/image";
import { TrendingUp, Globe2, Tag } from "lucide-react";
import { Post, getFeaturedImage, postUrl } from "@/lib/wordpress";
import { CONTINENTS, CATEGORIES } from "@/lib/continents";
import { formatDistanceToNow } from "date-fns";
import AdSlot from "./AdSlot";

export default function Sidebar({ trendingPosts }: { trendingPosts: Post[] }) {
  return (
    <aside className="space-y-8">
      {/* Sidebar top ad */}
      <AdSlot slot="sidebar_top" />

      {/* ── Trending ──────────────────────────────────────── */}
      <div className="bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10">
          <TrendingUp className="w-4 h-4 text-brand-500" />
          <h2 className="text-white font-bold text-sm uppercase tracking-wide">Trending Now</h2>
        </div>
        <div className="p-4 space-y-1">
          {trendingPosts.slice(0, 6).map((post, i) => {
            const img  = getFeaturedImage(post);
            const cat  = post.category?.name ?? "News";
            const t    = post.title;
            const time = post.published_at
              ? formatDistanceToNow(new Date(post.published_at), { addSuffix: true })
              : "";
            return (
              <Link key={post.id} href={postUrl(post)}
                className="group flex items-start gap-3 p-2 rounded-xl hover:bg-white/5 transition-colors">
                <span className="text-2xl font-display font-bold text-white/10 group-hover:text-brand-500/40 transition-colors w-6 shrink-0 leading-tight">
                  {i + 1}
                </span>
                <div className="relative w-14 h-14 rounded-lg overflow-hidden shrink-0 bg-white/5">
                  <Image src={img} alt={t} fill className="object-cover" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className={`text-[10px] font-bold uppercase tracking-wider mb-0.5
                    ${cat === "Sports" ? "text-orange-400" : cat === "Entertainment" ? "text-purple-400" :
                      cat === "Technology" ? "text-cyan-400" : cat === "Politics" ? "text-emerald-400" : "text-red-400"}`}>
                    {cat}
                  </p>
                  <h4 className="text-sm text-white font-medium line-clamp-2 leading-snug group-hover:text-brand-500 transition-colors">
                    {t}
                  </h4>
                  <p className="text-xs text-gray-500 mt-1">{time}</p>
                </div>
              </Link>
            );
          })}
        </div>
      </div>

      {/* ── Browse by Category ────────────────────────────── */}
      <div className="bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10">
          <Tag className="w-4 h-4 text-brand-500" />
          <h2 className="text-white font-bold text-sm uppercase tracking-wide">Categories</h2>
        </div>
        <div className="p-4 grid grid-cols-1 gap-2">
          {CATEGORIES.map(cat => (
            <Link key={cat.slug} href={`/category/${cat.slug}`}
              className="flex items-center justify-between px-3 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/15 transition-all group">
              <span className={`text-sm font-medium ${cat.color}`}>{cat.name}</span>
              <span className="text-gray-500 group-hover:text-white text-xs transition-colors">→</span>
            </Link>
          ))}
        </div>
      </div>

      {/* ── Browse by Continent ───────────────────────────── */}
      <div className="bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10">
          <Globe2 className="w-4 h-4 text-brand-500" />
          <h2 className="text-white font-bold text-sm uppercase tracking-wide">By Region</h2>
        </div>
        <div className="p-4 space-y-3">
          {CONTINENTS.map(continent => (
            <div key={continent.slug}>
              <Link href={`/${continent.slug}`}
                className="flex items-center gap-2 text-sm font-semibold text-white hover:text-brand-500 transition-colors mb-1.5">
                <span>{continent.emoji}</span> {continent.name}
              </Link>
              <div className="flex flex-wrap gap-1.5 pl-6">
                {continent.countries.map(country => (
                  <Link key={country.slug} href={`/${continent.slug}/${country.slug}`}
                    className="text-xs text-gray-400 hover:text-white bg-white/5 hover:bg-white/10 px-2 py-0.5 rounded-full transition-colors">
                    {country.flag} {country.name}
                  </Link>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Sidebar bottom ad */}
      <AdSlot slot="sidebar_bottom" />
    </aside>
  );
}
