import Link from 'next/link';
import {
  postPath,
  categoryLabel,
  type Category,
  type Locale,
  type PostSummary,
} from '@ai-radar/shared';
import { type Dictionary, interpolate } from '@/lib/dictionary';
import { CategoryLabel } from '../ui/CategoryLabel';

/**
 * Tier 1: the page's answer to "what happened in AI today?"
 *
 * Full width, no card, serif headline. The numbered list encodes rank by
 * importance — real information, which is the only reason numbering is
 * justified here rather than decorative.
 */
export function DailyOverview({
  date,
  stories,
  counts,
  locale,
  dict,
}: {
  date: Date;
  stories: PostSummary[];
  counts: Partial<Record<Category, number>>;
  locale: Locale;
  dict: Dictionary;
}) {
  // Arabic uses the Gregorian calendar with Western numerals, matching
  // the numeral decision in docs/DESIGN.md section 11.
  const formatted = date.toLocaleDateString(locale === 'ar' ? 'ar' : 'en-US', {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    numberingSystem: 'latn',
  });

  return (
    <section className="overview" aria-labelledby="today-heading">
      <div className="overview-meta">
        <span className="t-meta">{locale === 'ar' ? formatted : formatted.toUpperCase()}</span>
        <span className="live">
          <span className="live-dot" aria-hidden="true" />
          {dict.home.live}
        </span>
      </div>

      <h1 id="today-heading" className="t-display overview-headline">
        {headline(stories.length, dict)}
      </h1>

      {stories.length > 0 && (
        <ol className="top-list">
          {stories.map((post, index) => (
            <li key={post.id} className="top-item">
              <Link href={postPath(post.category, post.slug, locale)}>
                <span className="top-num">{String(index + 1).padStart(2, '0')}</span>
                <span className="top-title">{post.title}</span>
                <CategoryLabel
                  category={post.category}
                  locale={locale}
                  sponsored={post.sponsored}
                />
              </Link>
            </li>
          ))}
        </ol>
      )}

      <CountLine counts={counts} locale={locale} />
    </section>
  );
}

/**
 * Publishing volume follows quality, so a quiet day is a valid outcome
 * the copy has to handle without sounding like a failure.
 */
function headline(count: number, dict: Dictionary): string {
  if (count === 0) return dict.home.headlineZero;
  if (count === 1) return dict.home.headlineOne;
  return interpolate(dict.home.headlineMany, { count });
}

function CountLine({
  counts,
  locale,
}: {
  counts: Partial<Record<Category, number>>;
  locale: Locale;
}) {
  // A quiet line of text, not a grid of stat tiles — the stories are the
  // point of this page, not statistics about them.
  const order: Category[] = ['model', 'tool', 'update', 'pricing', 'research', 'news'];
  const present = order.filter((c) => (counts[c] ?? 0) > 0);

  if (present.length === 0) return null;

  return (
    <p className="counts">
      {present.map((category) => (
        <span key={category}>
          {categoryLabel(category, locale)} <b>{counts[category]}</b>
        </span>
      ))}
    </p>
  );
}