"use client";

import { useParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";
import { archiveApi } from "@/lib/api/client";
import { useTranslation } from "@/lib/hooks/use-translation";
import { PublicPageHeader } from "@/components/shared/public-page";
import { ArticleCard } from "@/components/ui/article-card";
import type { ArchiveIssue } from "@/types";

/** Table of contents for one legacy issue. */
export default function ArchiveIssuePage() {
  const { id } = useParams<{ id: string }>();
  const { language } = useTranslation("JOURNALS");
  const hi = language === "hi";

  const { data: issue, isLoading, isError } = useQuery({
    queryKey: ["archive-issue", id],
    queryFn: async () => (await archiveApi.issue(id)).data as ArchiveIssue,
    enabled: !!id,
  });

  const titleHi = issue ? `खंड ${issue.volume}, अंक ${issue.issueLabel}` : "अंक";
  const titleEn = issue ? `Volume ${issue.volume}, Issue ${issue.issueLabel}` : "Issue";

  // Schema.org structured data: the issue and its articles as part of the journal
  const jsonLd = issue
    ? {
        "@context": "https://schema.org",
        "@type": "PublicationIssue",
        issueNumber: issue.issueLabel,
        datePublished: issue.publishDate ?? undefined,
        isPartOf: {
          "@type": "PublicationVolume",
          volumeNumber: issue.volume,
          isPartOf: {
            "@type": "Periodical",
            name: "Shodh Sanchayan / शोध संचयन",
            issn: [issue.issnPrint, issue.issnOnline].filter(Boolean),
          },
        },
        hasPart: (issue.articles ?? []).slice(0, 50).map((a) => ({
          "@type": "ScholarlyArticle",
          headline: a.titleEn ?? a.titleHi ?? undefined,
          author: a.authorsEn ?? a.authorsHi ?? undefined,
          pagination: a.pageRange ?? undefined,
        })),
      }
    : null;

  return (
    <div className="min-h-screen bg-gray-50">
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      )}
      <PublicPageHeader
        titleHi={titleHi}
        titleEn={titleEn}
        breadcrumbs={[
          { label: hi ? "होम" : "Home", href: "/" },
          { label: hi ? "पत्रिका" : "The Journal", href: "/journal" },
          { label: hi ? "अंक संग्रह" : "Issues Archive", href: "/journal/archive" },
          { label: hi ? titleHi : titleEn },
        ]}
      />

      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        {isLoading ? (
          <div className="flex justify-center py-16">
            <Loader2 className="h-8 w-8 animate-spin text-indigo-600" />
          </div>
        ) : isError || !issue ? (
          <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center text-red-700">
            {hi ? "अंक नहीं मिला।" : "Issue not found."}
          </div>
        ) : (
          <>
            {/* Issue metadata */}
            <section className="mb-8 grid grid-cols-2 gap-4 rounded-lg border border-gray-200 bg-white p-5 shadow-sm sm:grid-cols-4">
              <div>
                <p className="text-xs text-gray-500">ISSN (Print)</p>
                <p className="font-semibold text-gray-900">{issue.issnPrint ?? "—"}</p>
              </div>
              <div>
                <p className="text-xs text-gray-500">ISSN (Online)</p>
                <p className="font-semibold text-gray-900">{issue.issnOnline ?? "—"}</p>
              </div>
              <div>
                <p className="text-xs text-gray-500">{hi ? "फ़ाइलें" : "Files"}</p>
                <p className="font-semibold text-gray-900">{issue.articleCount}</p>
              </div>
              <div>
                <p className="text-xs text-gray-500">{hi ? "स्रोत" : "Source"}</p>
                <p className="font-semibold text-gray-900">shodh.net</p>
              </div>
            </section>

            {/* Table of contents */}
            <h2 className="mb-4 text-lg font-bold text-gray-900">
              {hi ? "विषय सूची" : "Table of Contents"}
            </h2>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              {(issue.articles ?? []).map((article) => (
                <ArticleCard
                  key={article.id}
                  article={article}
                  onDownload={() => window.open(archiveApi.downloadUrl(article.id), "_blank")}
                />
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}