/**
 * /actions/:id — 개선 제안 (Action Plan). 진단 리포트(/discovery/:id)에서 분리된 처방 단계.
 *
 * 진단은 "지금 무엇이 문제인가"(증거), 여기는 "그래서 무엇을 하는가"(처방)다.
 * 읽는 목적이 다르고, 둘을 한 페이지에 두면 스크롤이 길어져 둘 다 읽기 힘들어진다.
 * 진단 데이터가 없으면 처방도 쓸 수 없으므로 진단 리포트로 돌려보낸다.
 */
import { useMemo } from 'react';
import { useParams, Navigate } from 'react-router';
import { AEO_GEO_RUBRIC } from '../data/aeoGeoRubric';
import { AEO_GEO_RUBRIC_V2 } from '../data/aeoGeoRubricV2';
import { DISCOVERY_RESULTS } from '../data/discoveryResults';
import { scoreDiscovery } from '../lib/discoveryScore';
import { scoreDiscoveryV2 } from '../lib/discoveryScoreV2';
import { ActionPlanSection } from '../components/discovery/ActionPlanSection';
import { IntegritySection } from '../components/discovery/IntegritySection';
import { BuildPlanSection } from '../components/discovery/BuildPlanSection';
import { PrismFilled } from '../components/icons/FilledIcons';

export default function ActionPlanPage() {
  const { id } = useParams<{ id: string }>();
  const result = id ? DISCOVERY_RESULTS[id] : undefined;
  const overall = useMemo(
    () => (result ? scoreDiscovery(AEO_GEO_RUBRIC, result) : null),
    [result],
  );
  const overallV2 = useMemo(
    () => (result ? scoreDiscoveryV2(AEO_GEO_RUBRIC_V2, result) : null),
    [result],
  );

  if (!id) return null;
  if (!result || !overall) {
    // 개선 제안은 진단 항목 위에 세운다. 진단이 없으면 여기서 보여줄 근거가 없으니
    // 진단 리포트로 보낸다. 그 페이지가 "아직 진단 전" 안내와 다음 링크를 갖고 있다.
    return <Navigate to={`/discovery/${id}`} replace />;
  }

  return (
    <div data-report-content className="[word-break:keep-all]">
      <section className="on-dark bg-[#0A1128] text-white relative overflow-hidden pt-28 pb-16 md:pt-36 md:pb-20 px-6">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(108,92,231,0.18),transparent_60%)]" />
        <div className="relative max-w-7xl mx-auto">
          <div className="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/10 px-4 py-1.5 mb-6">
            <PrismFilled size={16} className="text-purple-300" />
            <span className="text-sm font-semibold tracking-wide text-purple-200">
              INFINITH AI Discovery · Action Plan
            </span>
          </div>
          <h1 className="font-serif text-4xl md:text-6xl font-bold tracking-[-0.02em] mb-4">
            <span className="bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent">
              개선 제안
            </span>
          </h1>
          <p className="text-3xl font-bold mb-2">{result.clinicName}</p>
          <p className="ui-body text-white/70 max-w-2xl">
            진단(v{result.rubricVersion} · {overall.score}/{overall.grade})에서 확인된 항목을 근거로,
            무엇을 언제까지 할지와 저희가 하지 않을 것을 정리했습니다.
          </p>
        </div>
      </section>

      <ActionPlanSection result={result} />
      <IntegritySection result={result} />
      <BuildPlanSection
        result={result}
        overall={overall}
        summary={{
          rubricVersion: result.rubricVersion,
          grade: overall.grade,
          score: overall.score,
          aeo: overallV2?.aeo.score,
          geo: overallV2?.geo.score,
          verified: overall.categories.reduce((n, c) => n + c.verifiedCount, 0),
          total: AEO_GEO_RUBRIC.criteria.length,
        }}
      />
    </div>
  );
}