'use client';

import { useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { BlogCard, type BlogCardData } from '@/components/cards/blog-card';
import type { Locale } from '@/i18n/config';

export interface BlogTagData {
  slug: string;
  name: string;
}

// BlogCardData carries the extra tagSlugs field for filtering.
export type BlogListingPost = BlogCardData & { tagSlugs?: string[] };

export function BlogListing({
  posts,
  tags,
  locale
}: {
  posts: BlogListingPost[];
  tags: BlogTagData[];
  locale: Locale;
}) {
  const t = useTranslations('filters');
  const c = useTranslations('common');

  const [query, setQuery] = useState('');
  const [tag, setTag] = useState('all');

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return posts.filter((p) => {
      if (tag !== 'all' && !(p.tagSlugs ?? []).includes(tag)) return false;
      if (q && !`${p.title} ${p.excerpt}`.toLowerCase().includes(q)) return false;
      return true;
    });
  }, [posts, query, tag]);

  return (
    <div>
      <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={c('search')}
          className="rounded-lg border border-graphite-800/20 px-3 py-2 text-sm"
        />
        <select
          value={tag}
          onChange={(e) => setTag(e.target.value)}
          className="rounded-lg border border-graphite-800/20 bg-white px-3 py-2 text-sm"
        >
          <option value="all">{t('allTags')}</option>
          {tags.map((tg) => (
            <option key={tg.slug} value={tg.slug}>
              {tg.name}
            </option>
          ))}
        </select>
      </div>

      {filtered.length > 0 ? (
        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((p, i) => (
            <BlogCard key={p.slug} post={p} locale={locale} delay={(i % 3) * 90} />
          ))}
        </div>
      ) : (
        <p className="mt-8 text-graphite-900/50">{c('noResults')}</p>
      )}
    </div>
  );
}