'use client'

import { useTranslations } from 'next-intl'
import Image from 'next/image'
import { Calendar, ArrowRight, Newspaper } from 'lucide-react'
import { Link } from '@/i18n/navigation'
import type { BlogPostSummary, BlogCategoryFilter } from '@/lib/db/queries/getBlogPosts'

interface BlogSidebarProps {
  categories: BlogCategoryFilter[]
  totalCount: number
  activeCategory: string | null
  featuredPosts: BlogPostSummary[]
  recentPosts: BlogPostSummary[]
}

// No `views`/popularity column exists on posts, so this widget shows real
// `is_featured` posts instead of a fabricated "Popular Posts" ranking — same
// "hide, don't fake it" instinct as everywhere else in this codebase.
export default function BlogSidebar({ categories, totalCount, activeCategory, featuredPosts, recentPosts }: BlogSidebarProps) {
  const t = useTranslations('Blog')

  return (
    <div className="space-y-6">
      {/* Categories Widget */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
        <h3 className="font-bold text-dark mb-4 pb-2 border-b border-gray-100">{t('categoriesHeading')}</h3>
        <div className="space-y-2">
          <Link
            href="/blogs"
            className={`flex justify-between items-center py-2 transition group ${!activeCategory ? 'text-primary font-medium' : 'text-dark hover:text-primary'}`}
          >
            <span>{t('allCategory')}</span>
            <span className="text-sm text-gray-custom group-hover:text-primary">({totalCount})</span>
          </Link>
          {categories.map((category) => (
            <Link
              key={category.id}
              href={{ pathname: '/blogs', query: { category: category.slug } }}
              className={`flex justify-between items-center py-2 transition group ${activeCategory === category.slug ? 'text-primary font-medium' : 'text-dark hover:text-primary'}`}
            >
              <span>{category.name}</span>
              <span className="text-sm text-gray-custom group-hover:text-primary">({category.count})</span>
            </Link>
          ))}
        </div>
      </div>

      {/* Featured Posts Widget */}
      {featuredPosts.length > 0 && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
          <h3 className="font-bold text-dark mb-4 pb-2 border-b border-gray-100">{t('featuredPostsHeading')}</h3>
          <div className="space-y-4">
            {featuredPosts.map((post) => (
              <Link key={post.id} href={`/blog/${post.slug}`} className="flex gap-3 group">
                <div className="relative w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
                  {post.imageUrl ? (
                    <Image src={post.imageUrl} alt={post.title} fill sizes="64px" className="object-cover" />
                  ) : (
                    <Newspaper size={22} className="text-gray-300" />
                  )}
                </div>
                <div>
                  <h4 className="font-medium text-dark text-sm group-hover:text-primary transition line-clamp-2">
                    {post.title}
                  </h4>
                  <div className="flex items-center gap-2 text-xs text-gray-custom mt-1">
                    <Calendar size={10} />
                    <span>{new Date(post.publishedAt).toLocaleDateString()}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Recent Posts Widget */}
      {recentPosts.length > 0 && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
          <h3 className="font-bold text-dark mb-4 pb-2 border-b border-gray-100">{t('recentPostsHeading')}</h3>
          <div className="space-y-3">
            {recentPosts.slice(0, 4).map((post) => (
              <Link key={post.id} href={`/blog/${post.slug}`} className="flex justify-between items-center py-1 group">
                <span className="text-sm text-dark group-hover:text-primary transition line-clamp-1">{post.title}</span>
                <ArrowRight size={14} className="text-gray-custom group-hover:text-primary transition flex-shrink-0" />
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Newsletter Widget */}
      <div className="bg-gradient-primary rounded-xl p-5 text-white">
        <h3 className="font-bold mb-2">{t('newsletterHeading')}</h3>
        <p className="text-white/80 text-sm mb-3">{t('newsletterDescription')}</p>
        <form className="space-y-2" onSubmit={(e) => e.preventDefault()}>
          <input
            type="email"
            placeholder={t('newsletterPlaceholder')}
            className="w-full px-3 py-2 rounded-lg text-dark text-sm outline-none focus:ring-2 focus:ring-white"
          />
          <button className="w-full bg-white text-primary py-2 rounded-lg text-sm font-semibold hover:shadow-md transition">
            {t('newsletterButton')}
          </button>
        </form>
      </div>
    </div>
  )
}