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

import { routePath } from "../../features/installed-feature-contracts.ts";
import { PageHeader } from "../design-system/index.ts";
import { useApplication } from "../providers/application-provider.tsx";

const READINESS_ITEMS = Object.freeze([
  {
    title: "실행 계약",
    description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
  },
  {
    title: "교체 가능한 연동",
    description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
  },
  {
    title: "접근 가능한 화면",
    description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
  },
]);

export default function HomePage() {
  const { runtime } = useApplication();
  const [release, setRelease] = useState<
    Awaited<ReturnType<typeof runtime.getReleaseSummary>> | null
  >(null);

  useEffect(() => {
    let active = true;
    void runtime.getReleaseSummary().then((summary) => {
      if (active) setRelease(summary);
    });
    return () => {
      active = false;
    };
  }, [runtime]);

  return (
    <section className="ui-page">
      <PageHeader
        eyebrow="프로젝트 시작점"
        title="Clean Architecture Frontend"
        description="도메인을 추가하기 전에 실행 구조와 범용 사용자 경험을 확인할 수 있는 중립적인 스켈레톤입니다."
      />
      <div className="readiness-grid" aria-label="구현 준비 상태">
        {READINESS_ITEMS.map((item) => (
          <article className="ui-panel" key={item.title}>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </article>
        ))}
      </div>
      <p className="ui-runtime-summary" aria-live="polite">
        {release
          ? `빌드 ${release.buildId} · 릴리스 ${release.releaseId}`
          : "검증된 런타임 정보를 확인하고 있습니다."}
      </p>
      <section className="ui-panel starter-actions" aria-labelledby="starter-title">
        <div>
          <h2 id="starter-title">준비된 화면 살펴보기</h2>
          <p>
            설치된 라우트와 계약, 런타임 능력은 플랫폼 구성 화면에서, 공통
            구성요소와 비동기 화면 상태는 예제 라우트에서 확인하세요.
          </p>
        </div>
        <div className="button-row">
          <Link className="ui-button" to={routePath("EXAMPLES_PLATFORM")}>
            플랫폼 구성 보기
          </Link>
          <Link
            className="ui-button ui-button--secondary"
            to={routePath("EXAMPLES_UI")}
          >
            UI 구성요소 보기
          </Link>
          <Link
            className="ui-button ui-button--secondary"
            to={routePath("EXAMPLES_STATES")}
          >
            화면 상태 보기
          </Link>
        </div>
      </section>
    </section>
  );
}