import Link from 'next/link';
import ArticleCard from './ArticleCard';
import { ArrowRight } from 'lucide-react';

/**
 * Группировка свежих материалов по дням: «Сегодня», «Вчера», «Эта неделя», «Ранее».
 * Не рендерится, если пусто.
 */
function groupByPeriod(articles) {
  const now = new Date();
  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
  const startOfYesterday = startOfToday - 24 * 3600 * 1000;
  const startOfWeek = startOfToday - 7 * 24 * 3600 * 1000;

  const groups = { today: [], yesterday: [], week: [], earlier: [] };
  for (const a of articles) {
    const t = new Date(a.published_at).getTime();
    if (t >= startOfToday)        groups.today.push(a);
    else if (t >= startOfYesterday) groups.yesterday.push(a);
    else if (t >= startOfWeek)     groups.week.push(a);
    else                            groups.earlier.push(a);
  }
  return groups;
}

const LABELS = {
  today:     'Сегодня',
  yesterday: 'Вчера',
  week:      'На этой неделе',
  earlier:   'Ранее',
};

export default function RecentBlock({ articles }) {
  if (!articles || articles.length === 0) return null;
  const groups = groupByPeriod(articles);
  const nonEmpty = Object.entries(groups).filter(([, arr]) => arr.length > 0);
  if (nonEmpty.length === 0) return null;

  return (
    <section className="container-wide pb-12">
      <div className="flex items-end justify-between mb-5">
        <h2 className="text-xl sm:text-2xl font-bold ink">Свежие материалы</h2>
        <Link href="/archive" className="text-sm font-medium inline-flex items-center gap-1 accent hover:opacity-80 transition-opacity">
          Архив <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>
      <div className="space-y-8">
        {nonEmpty.map(([key, arr]) => (
          <div key={key}>
            <h3 className="text-xs font-semibold uppercase tracking-widest mute mb-3">
              {LABELS[key]} <span className="opacity-50">· {arr.length}</span>
            </h3>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {arr.map(a => <ArticleCard key={a.id} article={a} />)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}