import Link from "next/link";
import { notFound } from "next/navigation";
import { getMagazine } from "@/server/repo";
import { Link45deg, Archive } from "react-bootstrap-icons";
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

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

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

  const mag = await getMagazine(magazineId);
  if (!mag) return notFound();

  return (
    <div>
      <ZxdbBreadcrumbs
        items={[
          { label: "ZXDB", href: "/zxdb" },
          { label: "Magazines", href: "/zxdb/magazines" },
          { label: mag.title },
        ]}
      />

      <h1 className="mb-1">{mag.title}</h1>
      <div className="text-secondary mb-3">Language: {mag.languageId}</div>

      <div className="mb-3 d-flex gap-2 flex-wrap">
        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">&larr; Back to list</Link>
        {mag.linkSite && (
          <a className="btn btn-outline-secondary btn-sm" href={mag.linkSite} target="_blank" rel="noreferrer">
            Official site
          </a>
        )}
      </div>

      <h2 className="h5 mt-4">Issues</h2>
      {mag.issues.length === 0 ? (
        <div className="text-secondary">No issues found.</div>
      ) : (
        <div className="table-responsive">
          <table className="table table-sm align-middle">
            <caption className="visually-hidden">Magazine issues</caption>
            <thead>
              <tr>
                <th style={{ width: 200 }}>Issue</th>
                <th style={{ width: 100 }}>Volume</th>
                <th style={{ width: 100 }}>Number</th>
                <th>Special</th>
                <th>Supplement</th>
                <th style={{ width: 100 }}>Links</th>
              </tr>
            </thead>
            <tbody>
              {mag.issues.map((i) => (
                <tr key={i.id}>
                  <td>
                    <Link href={`/zxdb/issues/${i.id}`} className="link-underline link-underline-opacity-0">
                      {i.dateYear ?? ""}
                      {i.dateMonth ? `/${String(i.dateMonth).padStart(2, "0")}` : ""}
                      {" "}
                      <span className="text-secondary">(open issue)</span>
                    </Link>
                  </td>
                  <td>{i.volume ?? ""}</td>
                  <td>{i.number ?? ""}</td>
                  <td>{i.special ?? ""}</td>
                  <td>{i.supplement ?? ""}</td>
                  <td>
                    <div className="d-flex gap-2">
                      {i.linkMask && (
                        <a className="btn btn-outline-secondary btn-sm" href={i.linkMask} target="_blank" rel="noreferrer" title="Link">
                          <Link45deg aria-hidden />
                          <span className="visually-hidden">Link</span>
                        </a>
                      )}
                      {i.archiveMask && (
                        <a className="btn btn-outline-secondary btn-sm" href={i.archiveMask} target="_blank" rel="noreferrer" title="Archive">
                          <Archive aria-hidden />
                          <span className="visually-hidden">Archive</span>
                        </a>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}