import { Link } from "react-router-dom";

import {
  RegisteredNotFoundRoute,
  useRouteInput,
} from "../../../../../presentation/routes/route-input.tsx";
import { usePublicContent } from "../use-public-content.tsx";

export function ReleasePage() {
  const { params } = useRouteInput<"TECH_LOG_RELEASE">();
  const version = typeof params.version === "string" ? params.version : "";
  const view = usePublicContent(["tech-log", "release", version], async (queries) => ({
    release: await queries.getRelease(version),
  }));
  if (!view.ready) return view.fallback;

  const { release } = view.data;
  if (!release) return <RegisteredNotFoundRoute />;

  return (
    <main id="main-content" className="shell release-page">
      <header className="release-page-header">
        <nav aria-label="변경 기록 경로">
          <Link to="/releases">변경 기록</Link>
          <span aria-hidden="true">/</span>v{release.version}
        </nav>
        <p className="section-kicker">Release v{release.version}</p>
        <h1>{release.title}</h1>
        <p>{release.summary}</p>
        <time dateTime={release.publishedAt}>{release.publishedLabel}</time>
      </header>
      <div className="release-document">
        <section aria-labelledby="release-changes">
          <p className="release-section-number">01</p>
          <div>
            <h2 id="release-changes">무엇이 바뀌었나</h2>
            <ul>
              {release.changes.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </div>
        </section>
        <section aria-labelledby="release-reasons">
          <p className="release-section-number">02</p>
          <div>
            <h2 id="release-reasons">왜 바꿨나</h2>
            <ul>
              {release.reasons.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </div>
        </section>
        <section aria-labelledby="release-impacts">
          <p className="release-section-number">03</p>
          <div>
            <h2 id="release-impacts">영향</h2>
            <ul>
              {release.impacts.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </div>
        </section>
        <section aria-labelledby="release-related">
          <p className="release-section-number">04</p>
          <div>
            <h2 id="release-related">연결된 화면</h2>
            <ul className="release-related-links">
              {release.related.map((item) => (
                <li key={item.path}>
                  <Link to={item.path}>
                    {item.title}
                    <span aria-hidden="true">↗</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </section>
      </div>
    </main>
  );
}