import Link from "next/link";

import type { DetailSummary } from "./model";

type DetailShellProps = {
  summary: DetailSummary;
};

export function ArticleDetailShell({ summary }: DetailShellProps) {
  const timeline = summary.timeline;

  return (
    <section>
      <h2>Article detail</h2>
      <dl className="detailGrid">
        <div>
          <dt>Article ID</dt>
          <dd>{summary.articleId}</dd>
        </div>
        <div>
          <dt>Status</dt>
          <dd>{summary.status}</dd>
        </div>
        <div>
          <dt>Publishing status</dt>
          <dd>{summary.publishingStatus}</dd>
        </div>
        <div>
          <dt>Target site</dt>
          <dd>{summary.targetSite}</dd>
        </div>
        <div>
          <dt>Last updated</dt>
          <dd>{new Date(summary.updatedAt).toLocaleString()}</dd>
        </div>
      </dl>

      <h3>Brief</h3>
      <p>{summary.briefDescription}</p>

      <ul className="inlineLinks">
        <li>
          <Link href={`/articles/${summary.articleId}/boundary-questions`}>
            Boundary questions
          </Link>
        </li>
        <li>
          <Link href={`/articles/${summary.articleId}/plans`}>Plan review</Link>
        </li>
        <li>
          <Link href={`/articles/${summary.articleId}/research`}>Research</Link>
        </li>
        <li>
          <Link href={`/articles/${summary.articleId}/evidence`}>Evidence matrix</Link>
        </li>
      </ul>

      <h3>Workflow timeline</h3>
      <ul className="timeline">
        {timeline.map((event) => (
          <li key={event.id}>
            <strong>{event.event_type}</strong> from {event.from_status ?? "—"} to{" "}
            {event.to_status ?? "—"} at {new Date(event.created_at).toLocaleString()}
            {event.actor_user_id ? <span> • actor {event.actor_user_id}</span> : null}
          </li>
        ))}
        {timeline.length === 0 ? <li>No workflow events yet.</li> : null}
      </ul>
    </section>
  );
}