import React from "react";
import Link from "next/link";
import { PUB_CATEGORIES } from "../../../content/categories";
import { PubCategory } from "../../../content/types";

export interface CategoryCounts {
  "intl-journal-conf"?: number;
  "domestic-journal-conf"?: number;
  patent?: number;
}

interface CategoryNavProps {
  currentCategory?: PubCategory;
  counts?: CategoryCounts;
}

export function CategoryNav({ currentCategory, counts }: CategoryNavProps) {
  const getCount = (slug: string) => {
    if (counts?.[slug as keyof CategoryCounts] !== undefined) {
      return counts[slug as keyof CategoryCounts]!;
    }
    return 0;
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
          Categories
        </h2>
        {currentCategory && (
          <Link
            href="/publications"
            className="font-mono text-xs text-ink-mute hover:text-ink hover:underline transition-colors"
          >
            &larr; Overview
          </Link>
        )}
      </div>

      <div className="grid gap-5 sm:gap-6 md:grid-cols-3">
        {PUB_CATEGORIES.map((cat) => {
          const count = getCount(cat.slug);
          const isActive = currentCategory === cat.slug;

          return (
            <div
              key={cat.slug}
              className={`flex flex-col justify-between bg-paper p-5 sm:p-6 rounded-lg transition-all ${
                isActive
                  ? "border-2 border-cobalt-dark shadow-md"
                  : "border border-line shadow-sm hover:border-cobalt-dark/40"
              }`}
            >
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span
                    className={`font-mono text-xs font-bold uppercase tracking-wider ${
                      isActive ? "text-cobalt-dark" : "text-ink-mute"
                    }`}
                  >
                    Category
                  </span>
                  {isActive && (
                    <span className="font-mono text-[0.65rem] font-bold px-2 py-0.5 rounded bg-cobalt-dark/10 text-cobalt-dark uppercase">
                      Current
                    </span>
                  )}
                </div>

                <h3
                  className={`font-serif text-xl ${
                    isActive ? "text-cobalt-dark font-normal" : "text-ink font-normal"
                  }`}
                >
                  {cat.label}
                  {cat.subtitle && (
                    <span className="block text-xs font-mono text-ink-mute mt-1 font-normal">
                      {cat.subtitle}
                    </span>
                  )}
                </h3>
              </div>

              <div className="mt-6 pt-4 border-t border-line flex items-baseline justify-between">
                <span className="font-display text-3xl font-bold text-ink">
                  {count}
                  <span className="text-xs font-mono text-ink-mute ml-1 font-normal">
                    {cat.slug === "patent" ? "Patents" : "Papers"}
                  </span>
                </span>

                {isActive ? (
                  <span className="inline-flex items-center text-xs font-bold text-cobalt-dark font-mono">
                    Active View ●
                  </span>
                ) : (
                  <Link
                    href={`/publications/${cat.slug}`}
                    aria-label={`View all ${cat.label} records`}
                    className="inline-flex items-center text-xs font-bold text-vermillion-dark hover:underline focus:outline-none focus:ring-1 focus:ring-vermillion-dark rounded"
                  >
                    View All &rarr;
                  </Link>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
