explorer/src/app/zxdb/entries/[id]/EntryDetail.tsx

"use client";

import Link from "next/link";

type Label = { id: number; name: string; labeltypeId: string | null };
export type EntryDetailData = {
  id: number;
  title: string;
  isXrated: number;
  machinetype: { id: number | null; name: string | null };
  language: { id: string | null; name: string | null };
  genre: { id: number | null; name: string | null };
  authors: Label[];
  publishers: Label[];
  // extra fields for richer details
  maxPlayers?: number;
  availabletypeId?: string | null;
  withoutLoadScreen?: number;
  withoutInlay?: number;
  issueId?: number | null;
  files?: {
    id: number;
    link: string;
    size: number | null;
    md5: string | null;
    comments: string | null;
    type: { id: number; name: string };
  }[];
  // Flat downloads by entry_id
  downloadsFlat?: {
    id: number;
    link: string;
    size: number | null;
    md5: string | null;
    comments: string | null;
    isDemo: boolean;
    type: { id: number; name: string };
    language: { id: string | null; name: string | null };
    machinetype: { id: number | null; name: string | null };
    scheme: { id: string | null; name: string | null };
    source: { id: string | null; name: string | null };
    case: { id: string | null; name: string | null };
    year: number | null;
    releaseSeq: number;
  }[];
  releases?: {
    releaseSeq: number;
    type: { id: string | null; name: string | null };
    language: { id: string | null; name: string | null };
    machinetype: { id: number | null; name: string | null };
    year: number | null;
    comments: string | null;
    downloads: {
      id: number;
      link: string;
      size: number | null;
      md5: string | null;
      comments: string | null;
      isDemo: boolean;
      type: { id: number; name: string };
      language: { id: string | null; name: string | null };
      machinetype: { id: number | null; name: string | null };
      scheme: { id: string | null; name: string | null };
      source: { id: string | null; name: string | null };
      case: { id: string | null; name: string | null };
      year: number | null;
    }[];
  }[];
  // Additional relationships
  aliases?: { releaseSeq: number; languageId: string; title: string }[];
  webrefs?: { link: string; languageId: string; website: { id: number; name: string; link?: string | null } }[];
};

export default function EntryDetailClient({ data }: { data: EntryDetailData | null }) {
  if (!data) return <div className="alert alert-warning">Not found</div>;

  return (
    <div>
      <div className="d-flex align-items-center gap-2 flex-wrap">
        <h1 className="mb-0">{data.title}</h1>
        {data.genre.name && (
          <Link className="badge text-bg-secondary text-decoration-none" href={`/zxdb/genres/${data.genre.id}`}>
            {data.genre.name}
          </Link>
        )}
        {data.language.name && (
          <Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${data.language.id}`}>
            {data.language.name}
          </Link>
        )}
        {data.machinetype.name && (
          <Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${data.machinetype.id}`}>
            {data.machinetype.name}
          </Link>
        )}
        {data.isXrated ? <span className="badge text-bg-danger">18+</span> : null}
      </div>

      <hr />

      <div className="table-responsive">
        <table className="table table-striped table-hover align-middle">
          <thead>
            <tr>
              <th style={{ width: 220 }}>Field</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ID</td>
              <td>{data.id}</td>
            </tr>
            <tr>
              <td>Title</td>
              <td>{data.title}</td>
            </tr>
            <tr>
              <td>Machine</td>
              <td>
                {data.machinetype.id != null ? (
                  data.machinetype.name ? (
                    <Link href={`/zxdb/machinetypes/${data.machinetype.id}`}>{data.machinetype.name}</Link>
                  ) : (
                    <span>#{data.machinetype.id}</span>
                  )
                ) : (
                  <span className="text-secondary">-</span>
                )}
              </td>
            </tr>
            <tr>
              <td>Language</td>
              <td>
                {data.language.id ? (
                  data.language.name ? (
                    <Link href={`/zxdb/languages/${data.language.id}`}>{data.language.name}</Link>
                  ) : (
                    <span>{data.language.id}</span>
                  )
                ) : (
                  <span className="text-secondary">-</span>
                )}
              </td>
            </tr>
            <tr>
              <td>Genre</td>
              <td>
                {data.genre.id ? (
                  data.genre.name ? (
                    <Link href={`/zxdb/genres/${data.genre.id}`}>{data.genre.name}</Link>
                  ) : (
                    <span>#{data.genre.id}</span>
                  )
                ) : (
                  <span className="text-secondary">-</span>
                )}
              </td>
            </tr>
            {typeof data.maxPlayers !== "undefined" && (
              <tr>
                <td>Max Players</td>
                <td>{data.maxPlayers}</td>
              </tr>
            )}
            {typeof data.availabletypeId !== "undefined" && (
              <tr>
                <td>Available Type</td>
                <td>{data.availabletypeId ?? <span className="text-secondary">-</span>}</td>
              </tr>
            )}
            {typeof data.withoutLoadScreen !== "undefined" && (
              <tr>
                <td>Without Load Screen</td>
                <td>{data.withoutLoadScreen ? "Yes" : "No"}</td>
              </tr>
            )}
            {typeof data.withoutInlay !== "undefined" && (
              <tr>
                <td>Without Inlay</td>
                <td>{data.withoutInlay ? "Yes" : "No"}</td>
              </tr>
            )}
            {typeof data.issueId !== "undefined" && (
              <tr>
                <td>Issue</td>
                <td>{data.issueId ? <span>#{data.issueId}</span> : <span className="text-secondary">-</span>}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <hr />

      {/* Downloads (flat, by entry_id). Render only this flat section; do not render grouped downloads here. */}
      <div>
        <h5>Downloads</h5>
        {(!data.downloadsFlat || data.downloadsFlat.length === 0) && <div className="text-secondary">No downloads</div>}
        {data.downloadsFlat && data.downloadsFlat.length > 0 && (
          <div className="table-responsive">
            <table className="table table-sm table-striped align-middle">
              <thead>
                <tr>
                  <th>Type</th>
                  <th>Link</th>
                  <th style={{ width: 120 }} className="text-end">Size</th>
                  <th style={{ width: 260 }}>MD5</th>
                  <th>Flags</th>
                  <th>Details</th>
                  <th>Comments</th>
                </tr>
              </thead>
              <tbody>
                {data.downloadsFlat.map((d) => {
                  const isHttp = d.link.startsWith("http://") || d.link.startsWith("https://");
                  return (
                    <tr key={d.id}>
                      <td><span className="badge text-bg-secondary">{d.type.name}</span></td>
                      <td>
                        {isHttp ? (
                          <a href={d.link} target="_blank" rel="noopener noreferrer">{d.link}</a>
                        ) : (
                          <span>{d.link}</span>
                        )}
                      </td>
                      <td className="text-end">{typeof d.size === "number" ? d.size.toLocaleString() : "-"}</td>
                      <td><code>{d.md5 ?? "-"}</code></td>
                      <td>
                        <div className="d-flex gap-1 flex-wrap">
                          {d.isDemo ? <span className="badge text-bg-warning">Demo</span> : null}
                          {d.scheme.name ? <span className="badge text-bg-info">{d.scheme.name}</span> : null}
                          {d.source.name ? <span className="badge text-bg-light border">{d.source.name}</span> : null}
                          {d.case.name ? <span className="badge text-bg-secondary">{d.case.name}</span> : null}
                        </div>
                      </td>
                      <td>
                        <div className="d-flex gap-2 flex-wrap align-items-center">
                          {d.language.name && (
                            <Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${d.language.id}`}>{d.language.name}</Link>
                          )}
                          {d.machinetype.name && (
                            <Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${d.machinetype.id}`}>{d.machinetype.name}</Link>
                          )}
                          {typeof d.year === "number" ? <span className="badge text-bg-dark">{d.year}</span> : null}
                          <span className="badge text-bg-light">rel #{d.releaseSeq}</span>
                        </div>
                      </td>
                      <td>{d.comments ?? ""}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <hr />

      <div className="row g-4">
        <div className="col-lg-6">
          <h5>Authors</h5>
          {data.authors.length === 0 && <div className="text-secondary">Unknown</div>}
          {data.authors.length > 0 && (
            <ul className="list-unstyled mb-0">
              {data.authors.map((a) => (
                <li key={a.id}>
                  <Link href={`/zxdb/labels/${a.id}`}>{a.name}</Link>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="col-lg-6">
          <h5>Publishers</h5>
          {data.publishers.length === 0 && <div className="text-secondary">Unknown</div>}
          {data.publishers.length > 0 && (
            <ul className="list-unstyled mb-0">
              {data.publishers.map((p) => (
                <li key={p.id}>
                  <Link href={`/zxdb/labels/${p.id}`}>{p.name}</Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>

      <hr />

      {/* Aliases (alternative titles) */}
      <div>
        <h5>Aliases</h5>
        {(!data.aliases || data.aliases.length === 0) && <div className="text-secondary">No aliases</div>}
        {data.aliases && data.aliases.length > 0 && (
          <div className="table-responsive">
            <table className="table table-sm table-striped align-middle">
              <thead>
                <tr>
                  <th style={{ width: 90 }}>Release #</th>
                  <th style={{ width: 120 }}>Language</th>
                  <th>Title</th>
                </tr>
              </thead>
              <tbody>
                {data.aliases.map((a, idx) => (
                  <tr key={`${a.releaseSeq}-${a.languageId}-${idx}`}>
                    <td>#{a.releaseSeq}</td>
                    <td>{a.languageId}</td>
                    <td>{a.title}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <hr />

      {/* Web links (external references) */}
      <div>
        <h5>Web links</h5>
        {(!data.webrefs || data.webrefs.length === 0) && <div className="text-secondary">No web links</div>}
        {data.webrefs && data.webrefs.length > 0 && (
          <div className="table-responsive">
            <table className="table table-sm table-striped align-middle">
              <thead>
                <tr>
                  <th>Website</th>
                  <th style={{ width: 120 }}>Language</th>
                  <th>URL</th>
                </tr>
              </thead>
              <tbody>
                {data.webrefs.map((w, idx) => (
                  <tr key={`${w.website.id}-${idx}`}>
                    <td>
                      {w.website.link ? (
                        <a href={w.website.link} target="_blank" rel="noopener noreferrer">{w.website.name}</a>
                      ) : (
                        <span>{w.website.name}</span>
                      )}
                    </td>
                    <td>{w.languageId}</td>
                    <td>
                      <a href={w.link} target="_blank" rel="noopener noreferrer">{w.link}</a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <hr />

      <div>
        <h5>Files</h5>
        {(!data.files || data.files.length === 0) && <div className="text-secondary">No files linked</div>}
        {data.files && data.files.length > 0 && (
          <div className="table-responsive">
            <table className="table table-sm table-striped align-middle">
              <thead>
                <tr>
                  <th>Type</th>
                  <th>Link</th>
                  <th style={{ width: 120 }} className="text-end">Size</th>
                  <th style={{ width: 260 }}>MD5</th>
                  <th>Comments</th>
                </tr>
              </thead>
              <tbody>
                {data.files.map((f) => {
                  const isHttp = f.link.startsWith("http://") || f.link.startsWith("https://");
                  return (
                    <tr key={f.id}>
                      <td><span className="badge text-bg-secondary">{f.type.name}</span></td>
                      <td>
                        {isHttp ? (
                          <a href={f.link} target="_blank" rel="noopener noreferrer">{f.link}</a>
                        ) : (
                          <span>{f.link}</span>
                        )}
                      </td>
                      <td className="text-end">{f.size != null ? new Intl.NumberFormat().format(f.size) : "-"}</td>
                      <td><code>{f.md5 ?? "-"}</code></td>
                      <td>{f.comments ?? ""}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <hr />

      {/* Removed grouped releases/downloads section to avoid duplicate downloads UI. */}

      <div className="d-flex align-items-center gap-2">
        <Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
        <Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
      </div>
    </div>
  );
}