import Link from "next/link";

import { EvidenceMatrixPanel } from "@/features/evidence-matrix/ui";
import { fetchEvidence } from "@/shared/pipeline-api";
import { RoleNavigation } from "@/widgets/role-navigation";

type ArticleEvidencePageProps = {
  articleId: string;
};

export default async function ArticleEvidencePage({
  articleId,
}: ArticleEvidencePageProps) {
  const response = await fetchEvidence(articleId);

  return (
    <main>
      <header className="pageHeader">
        <div>
          <h1>Evidence matrix</h1>
          <p>{response.claims?.length ?? 0} claims</p>
        </div>
        <Link href={`/articles/${articleId}`}>Back to article</Link>
      </header>
      <RoleNavigation role="EDITOR" />
      <section className="panel">
        <EvidenceMatrixPanel
          articleId={articleId}
          evidence={response.evidence ?? []}
          claims={response.claims ?? []}
          insufficientReasons={response.insufficient_evidence_reasons ?? []}
        />
      </section>
    </main>
  );
}