import Link from "next/link";
import { notFound } from "next/navigation";
import { getIssue } from "@/server/repo";
import EntryLink from "@/app/zxdb/components/EntryLink";
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

export const metadata = { title: "ZXDB Issue" };
export const revalidate = 3600;

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const issueId = Number(id);
  if (!Number.isFinite(issueId) || issueId <= 0) return notFound();

  const issue = await getIssue(issueId);
  if (!issue) return notFound();

  const ym = [issue.dateYear ?? "", issue.dateMonth ? String(issue.dateMonth).padStart(2, "0") : ""].filter(Boolean).join("/");

  return (
    <div>
      <ZxdbBreadcrumbs
        items={[
          { label: "ZXDB", href: "/zxdb" },
          { label: "Magazines", href: "/zxdb/magazines" },
          { label: issue.magazine.title, href: `/zxdb/magazines/${issue.magazine.id}` },
          { label: `Issue ${ym || issue.id}` },
        ]}
      />

      <div className="mb-3 d-flex gap-2 flex-wrap">
        <Link className="btn btn-outline-secondary btn-sm" href={`/zxdb/magazines/${issue.magazine.id}`}>&larr; Back to magazine</Link>
        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">All magazines</Link>
        {issue.linkMask && (
          <a className="btn btn-outline-secondary btn-sm" href={issue.linkMask} target="_blank" rel="noreferrer">Issue link</a>
        )}
        {issue.archiveMask && (
          <a className="btn btn-outline-secondary btn-sm" href={issue.archiveMask} target="_blank" rel="noreferrer">Archive</a>
        )}
      </div>

      <h1 className="mb-1">{issue.magazine.title}</h1>
      <div className="text-secondary mb-3">
        Issue: {ym || issue.id}{issue.volume != null ? ` · Vol ${issue.volume}` : ""}{issue.number != null ? ` · No ${issue.number}` : ""}
      </div>

      {(issue.special || issue.supplement) && (
        <div className="mb-3">
          {issue.special && <div><strong>Special:</strong> {issue.special}</div>}
          {issue.supplement && <div><strong>Supplement:</strong> {issue.supplement}</div>}
        </div>
      )}

      <h2 className="h5 mt-4">References</h2>
      {issue.refs.length === 0 ? (
        <div className="text-secondary">No references recorded.</div>
      ) : (
        <div className="table-responsive">
          <table className="table table-sm align-middle">
            <caption className="visually-hidden">Issue references</caption>
            <thead>
              <tr>
                <th style={{ width: 80 }}>Page</th>
                <th style={{ width: 140 }}>Type</th>
                <th>Reference</th>
              </tr>
            </thead>
            <tbody>
              {issue.refs.map((r) => (
                <tr key={r.id}>
                  <td>{r.page}</td>
                  <td>{r.typeName}</td>
                  <td>
                    {r.entryId ? (
                      <EntryLink id={r.entryId} title={r.entryTitle ?? undefined} />
                    ) : r.labelId ? (
                      <Link href={`/zxdb/labels/${r.labelId}`}>{r.labelName ?? r.labelId}</Link>
                    ) : (
                      <span className="text-secondary">&mdash;</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
