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

import {
  RegisteredNotFoundRoute,
  useRouteInput,
} from "../../../../../presentation/routes/route-input.tsx";
import { ExploreFilterForm } from "../components/explore-filter-form.tsx";
import { PublicRecordList } from "../components/public-record-list.tsx";
import { usePublicContent } from "../use-public-content.tsx";

const kinds = {
  cases: { kind: "CASE", title: "Case", description: "문제를 재현하고 관찰한 값에서 설계 결론까지 따라갑니다." },
  references: { kind: "REFERENCE", title: "Reference", description: "다시 확인할 수 있는 기술 기준과 적용 범위를 정리합니다." },
  questions: { kind: "QUESTION", title: "Open Question", description: "확인한 사실과 미지수, 다음 검증을 공개적으로 추적합니다." },
} as const;

function optionalString(value: unknown): string | undefined {
  return typeof value === "string" ? value : undefined;
}

function getKindConfig(value: string | undefined) {
  if (value === "cases" || value === "references" || value === "questions") {
    return kinds[value];
  }
  return undefined;
}

export function ExploreKindPage() {
  const { params, search } = useRouteInput<"TECH_LOG_EXPLORE_KIND">();
  const kind = optionalString(params.kind);
  const config = getKindConfig(kind);
  const topic = optionalString(search.topic);
  const project = optionalString(search.project);
  // The unknown-kind check reads as an early return, but it cannot come before
  // the query: hooks run unconditionally or React loses the call order. The
  // loader short-circuits instead, and the not-found route is chosen below.
  const view = usePublicContent(
    ["tech-log", "explore-kind", config?.kind, topic, project],
    async (queries) => ({
      records: config
        ? await queries.listRecords({
            kind: config.kind,
            ...(topic ? { topic } : {}),
            ...(project ? { project } : {}),
          })
        : [],
    }),
  );
  if (!config) return <RegisteredNotFoundRoute />;
  if (!view.ready) return view.fallback;

  const { records } = view.data;
  return <main id="main-content" className="shell public-index-page">
    <header className="public-page-header"><p className="section-kicker">Explore</p><h1>{config.title}</h1><p>{config.description}</p></header>
    <ExploreFilterForm action={`/explore/${kind}`} topic={topic} project={project} showType={false} />
    <div className="public-result-heading"><h2>공개 기록</h2><p>{records.length}개의 공개 기록</p></div><PublicRecordList records={records} />
    <Link className="text-link public-back-link" to="/explore">전체 탐색으로 돌아가기</Link>
  </main>;
}