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

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 { ProjectPageHeader } from "../components/project-page-header.tsx";

export function ProjectOverviewPage() {
  const { params } = useRouteInput<"TECH_LOG_PROJECT">();
  const slug = typeof params.slug === "string" ? params.slug : "";
  const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);
  const project = publicContent.getProject(slug);

  if (!project) return <RegisteredNotFoundRoute />;

  const records = publicContent.getProjectRecords(slug);
  const decisions = publicContent.getProjectDecisions(slug);
  const activity = publicContent.getProjectActivity(slug);
  return (
    <main id="main-content" className="shell project-page">
      <ProjectPageHeader project={project} title={project.title} />
      <section className="project-thesis" aria-labelledby="thesis-title">
        <p className="section-kicker">Thesis</p>
        <h2 id="thesis-title">프로젝트가 지키는 기준</h2>
        <p>{project.thesis}</p>
      </section>
      <dl className="project-status-grid">
        <div>
          <dt>단계</dt>
          <dd>{project.stage}</dd>
        </div>
        <div>
          <dt>현재 목표</dt>
          <dd>{project.currentGoal}</dd>
        </div>
        <div>
          <dt>다음 작업</dt>
          <dd>{project.nextStep}</dd>
        </div>
      </dl>
      <section
        className="project-overview-section"
        aria-labelledby="project-scope-title"
      >
        <div>
          <p className="section-kicker">Scope</p>
          <h2 id="project-scope-title">연결된 작업 맥락</h2>
        </div>
        <div className="project-stat-links">
          <Link to={`/projects/${slug}/records`}>
            <strong>{records.length}</strong>
            <span>공개 기록</span>
          </Link>
          <Link to={`/projects/${slug}/decisions`}>
            <strong>{decisions.length}</strong>
            <span>설계 결정</span>
          </Link>
          <Link to={`/projects/${slug}/activity`}>
            <strong>{activity.length}</strong>
            <span>활동 기록</span>
          </Link>
        </div>
      </section>
      <section className="project-topics" aria-labelledby="project-topics-title">
        <h2 id="project-topics-title">주요 주제</h2>
        <ul>
          {project.topics.map((topic) => (
            <li key={topic}>{topic}</li>
          ))}
        </ul>
      </section>
    </main>
  );
}