import { TECH_LOG_FEATURE_ID } from "../../../application/tech-log-feature-input.ts";
import { useApplication } from "../../../../../presentation/providers/application-provider.tsx";
import {
  RegisteredNotFoundRoute,
  useRouteInput,
} from "../../../../../presentation/routes/route-input.tsx";
import { PublicRecordList } from "../components/public-record-list.tsx";

const topics = {
  jpa: {
    title: "JPA",
    description: "목록 조회, 연관 로딩과 페이지 경계를 함께 검증한 기록입니다.",
  },
  authentication: {
    title: "Authentication",
    description:
      "브라우저와 Edge, Resource Server 사이의 인증 책임과 신뢰 경계를 검증한 기록입니다.",
  },
  redis: {
    title: "Redis",
    description:
      "애플리케이션 정책과 Redis 저장 명령의 책임 경계를 검증한 기록입니다.",
  },
} as const;

function topicConfig(value: unknown) {
  if (
    value === "jpa" ||
    value === "authentication" ||
    value === "redis"
  ) {
    return topics[value];
  }
  return undefined;
}

export function TopicPage() {
  const { params } = useRouteInput<"TECH_LOG_TOPIC">();
  const topic = topicConfig(params.slug);
  const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);

  if (!topic) return <RegisteredNotFoundRoute />;

  const records = publicContent.listRecords({ topic: topic.title });
  return (
    <main id="main-content" className="shell public-index-page">
      <header className="public-page-header">
        <p className="section-kicker">Topic</p>
        <h1>{topic.title}</h1>
        <p>{topic.description}</p>
      </header>
      <div className="public-result-heading">
        <h2>관련 기록</h2>
        <p>{records.length}개의 관련 기록</p>
      </div>
      <PublicRecordList records={records} />
    </main>
  );
}