import React from "react";
import { notFound } from "next/navigation";
import { CategoryNav } from "../_components/CategoryNav";
import { publications, patents } from "../../../content/publications";
import { PUB_CATEGORIES } from "../../../content/categories";
import { PubCategory } from "../../../content/types";

interface PageProps {
  params: {
    category: string;
  };
}

// SSG static pre-rendering (● SSG) for Next.js 14
export function generateStaticParams() {
  return PUB_CATEGORIES.map((cat) => ({
    category: cat.slug,
  }));
}

export default function PublicationCategoryPage({ params }: PageProps) {
  const { category } = params;
  const currentCat = PUB_CATEGORIES.find((c) => c.slug === category);

  if (!currentCat) {
    notFound();
  }

  const slug = category as PubCategory;

  let records: any[] = [];
  if (slug === "patent") {
    records = patents.map((p) => ({
      title: p.title,
      inventors: p.inventors,
      appNo: p.applicationNo,
      appDate: p.applicationAt,
      regNo: p.registrationNo,
      regDate: p.registrationAt,
      country: p.country,
      publishedAt: p.publishedAt,
      isPatent: true,
    }));
  } else {
    records = publications
      .filter((p) => p.category === slug)
      .map((p) => ({
        title: p.title,
        venue: p.venue,
        volume: p.volume,
        publishedAt: p.publishedAt,
        kci: p.kci,
        isPatent: false,
      }));
  }

  return (
    <div className="container-content space-y-8 md:space-y-12 pt-10 md:pt-16 pb-16 md:pb-24">
      {/* Header */}
      <section className="space-y-3">
        <div className="flex items-center gap-3">
          <span className="h-px w-8 bg-cobalt-dark"></span>
          <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
            Publications Category
          </span>
        </div>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
          {currentCat.label}
        </h1>
        <p className="text-ink-mute text-base max-w-2xl">
          {currentCat.desc} — 총 {records.length}건의 실데이터 카탈로그입니다.
        </p>
      </section>

      {/* Category Nav */}
      <CategoryNav currentCategory={slug} />

      {/* Record List Section */}
      <section className="space-y-6">
        <div className="flex justify-between items-center border-b border-line pb-3">
          <span className="font-mono text-xs text-ink-mute uppercase">
            Showing {records.length} Pre-rendered Records
          </span>
          <span className="font-mono text-xs text-vermillion-dark font-bold">
            SSG ● Static HTML
          </span>
        </div>

        {records.length === 0 ? (
          <div className="bg-paper p-8 rounded-lg border border-line text-center space-y-3">
            <p className="font-serif text-lg text-ink">
              현재 등록된 실적이 0건입니다.
            </p>
            <p className="text-xs text-ink-mute font-mono">
              (D-01 카테고리 정류 확정 후 후속 배치가 수행됩니다)
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            {records.map((rec, idx) => (
              <div
                key={idx}
                className="bg-paper p-6 rounded-lg border border-line space-y-3 hover:border-vermillion transition-colors"
              >
                <div className="flex justify-between items-start gap-4">
                  <h3 className="font-serif text-xl font-normal text-ink leading-snug">
                    {rec.title}
                  </h3>
                  <time
                    dateTime={rec.publishedAt}
                    className="font-mono text-xs text-vermillion-dark bg-ivory border border-line px-2.5 py-1 rounded shrink-0 font-bold"
                  >
                    {rec.publishedAt}
                  </time>
                </div>

                {rec.isPatent ? (
                  <div className="space-y-1 text-xs text-ink-mute font-mono">
                    <p className="text-ink">발명자: {rec.inventors}</p>
                    <p>
                      출원번호: {rec.appNo} ({rec.country}, {rec.appDate})
                    </p>
                    {rec.regNo && (
                      <p className="text-cobalt-dark font-bold">
                        등록번호: {rec.regNo} ({rec.regDate})
                      </p>
                    )}
                  </div>
                ) : (
                  <div className="space-y-1 text-xs text-ink-mute font-mono">
                    <p className="text-ink font-serif italic">{rec.venue}</p>
                    <div className="flex items-center gap-3">
                      <span>{rec.volume}</span>
                      {rec.kci && (
                        <span className="bg-cobalt-dark text-ivory text-[0.65rem] px-1.5 py-0.5 rounded font-bold">
                          KCI 등재
                        </span>
                      )}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}
