import React from "react";
import Link from "next/link";
import { CategoryNav } from "./_components/CategoryNav";
import { publications, patents } from "../../content/publications";
import { PUB_CATEGORIES } from "../../content/categories";

export default function PublicationsIndexPage() {
  const allRecords = [
    ...publications.map((p) => ({ ...p, type: "paper" as const })),
    ...patents.map((p) => ({
      category: "patent" as const,
      title: p.title,
      venue: `발명자: ${p.inventors} (출원번호: ${p.applicationNo})`,
      volume: p.registrationNo ? `등록번호: ${p.registrationNo}` : `출원국가: ${p.country}`,
      publishedAt: p.publishedAt,
      type: "patent" as const,
    })),
  ];

  // Sort by publishedAt descending
  const sortedRecords = [...allRecords].sort(
    (a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
  );

  const recentRecords = sortedRecords.slice(0, 10);

  const getCategoryCount = (slug: string) => {
    if (slug === "patent") return patents.length;
    return publications.filter((p) => p.category === slug).length;
  };

  return (
    <div className="space-y-16 py-6">
      {/* Header */}
      <section className="space-y-3">
        <div className="flex items-center gap-3">
          <span className="h-px w-8 bg-vermillion"></span>
          <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
            Research Output &amp; Patents
          </span>
        </div>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
          연구 실적 개요
        </h1>
        <p className="text-ink-mute text-base max-w-2xl">
          국제·국내 우수 학술지 및 학술대회 논문 148건과 특허 75건 등 총 {allRecords.length}건의 실측 연구 성과 카탈로그입니다.
        </p>
      </section>

      {/* Category Nav */}
      <CategoryNav totalCount={allRecords.length} />

      {/* Category Cards Overview */}
      <section className="space-y-6">
        <h2 className="font-serif text-2xl font-normal text-ink">
          카테고리별 실적 분류
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {PUB_CATEGORIES.map((cat) => {
            const count = getCategoryCount(cat.slug);
            return (
              <div
                key={cat.slug}
                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-vermillion transition-colors"
              >
                <div className="space-y-3">
                  <div className="flex justify-between items-baseline">
                    <span className="font-mono text-xs text-vermillion font-bold uppercase">
                      Category
                    </span>
                    <span className="font-serif text-2xl font-normal text-ink">
                      {count}건
                    </span>
                  </div>
                  <h3 className="font-serif text-xl font-normal text-ink">
                    {cat.label}
                  </h3>
                  <p className="text-xs text-ink-mute leading-relaxed">
                    {cat.desc}
                  </p>
                </div>
                <div className="mt-6 pt-4 border-t border-line flex justify-between items-center">
                  <span className="font-mono text-xs text-ink-mute">
                    SSG Pre-rendered
                  </span>
                  <Link
                    href={`/publications/${cat.slug}`}
                    className="font-mono text-xs text-vermillion font-bold hover:underline"
                  >
                    목록 보기 ({count}) ↗
                  </Link>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Recent 10 Highlight Records */}
      <section className="space-y-6 pt-6 border-t border-line">
        <div className="flex justify-between items-end">
          <h2 className="font-serif text-2xl font-normal text-ink">
            최신 성과 하이라이트 (Top 10)
          </h2>
          <span className="font-mono text-xs text-ink-mute">
            Total {allRecords.length} Records
          </span>
        </div>

        <div className="space-y-4">
          {recentRecords.map((rec, idx) => (
            <div
              key={idx}
              className="bg-paper p-5 rounded border border-line space-y-2"
            >
              <div className="flex justify-between items-start gap-4">
                <h3 className="font-serif text-lg font-normal text-ink leading-snug">
                  {rec.title}
                </h3>
                <span className="font-mono text-xs text-vermillion bg-ivory border border-line px-2 py-0.5 rounded shrink-0">
                  {rec.publishedAt}
                </span>
              </div>
              <div className="text-xs text-ink-mute font-mono">
                {rec.venue}
              </div>
              {rec.volume && (
                <div className="text-xs text-ink-mute font-mono">
                  {rec.volume}
                </div>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}