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

import {
  AsyncSurface,
  Button,
  CollectionPage,
} from "../../../presentation/design-system/index.ts";
import { useReferenceFailureAction } from "./use-reference-failure-action.ts";
import { useReferenceFeature } from "./use-reference-feature.ts";

export default function ReferenceResourcePage() {
  const navigate = useNavigate();
  const { filters, query } = useReferenceFeature();
  const failureAction = useReferenceFailureAction(query.state.failure);

  return (
    <CollectionPage
      heading={{
        eyebrow: "제거 가능한 수직 슬라이스",
        title: "Reference feature",
        description:
          "URL codec, application input, HTTP/schema/mapper와 query 상태를 한 경로로 검증합니다.",
      }}
      actions={[
        {
          kind: "button",
          label: "새 항목 만들기",
          onAction: () => navigate("/examples/reference-resources/new"),
        },
      ]}
      activeFilters={
        <p data-testid="reference-filter">
          limit {filters.limit}
          {filters.tags?.length ? ` · tags ${filters.tags.join(", ")}` : ""}
        </p>
      }
      toolbar={<Button onClick={() => void query.retry()}>새로고침</Button>}
      resultCount={
        query.data ? `총 ${query.data.length}개 항목` : "결과 확인 중"
      }
    >
      <AsyncSurface
        state={query.state}
        onAction={failureAction}
        onRetry={query.retry}
      >
        <ul aria-label="Reference resources">
          {(query.data ?? []).map((resource) => (
            <li key={resource.resourceId}>
              <Link
                to={`/examples/reference-resources/${encodeURIComponent(resource.resourceId)}`}
              >
                {resource.title}
              </Link>
            </li>
          ))}
        </ul>
      </AsyncSurface>
    </CollectionPage>
  );
}