/**
 * GuestReportPage — `/report/:id`
 *
 * 손님(랜딩에서 분석을 실행한 비계약 방문자)이 보는 리포트 화면.
 * 워크스페이스용 액션바는 노출되지 않습니다.
 */
import { useParams } from 'react-router';
import { useReportPageData } from '../hooks/useReportPageData';
import { ReportNav } from '../components/ReportNav';
import { ScreenshotProvider } from '../stores/ScreenshotContext';
import { REPORT_SECTIONS } from '@/shared/constants/reportSections';
import ReportBody from '../components/ReportBody';

export default function GuestReportPage() {
  const { id } = useParams<{ id: string }>();
  const { data, isLoading, error, enrichStatus } = useReportPageData(id);

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center pt-20">
        <div className="flex flex-col items-center gap-4">
          <div className="w-10 h-10 border-4 border-[#6C5CE7] border-t-transparent rounded-full animate-spin" />
          <p className="text-slate-500 text-sm">리포트를 불러오는 중...</p>
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="min-h-screen flex items-center justify-center pt-20">
        <div className="text-center">
          <p className="text-[#7C3A4B] font-medium mb-2">오류가 발생했습니다</p>
          <p className="text-slate-500 text-sm">{error ?? '리포트를 찾을 수 없습니다.'}</p>
        </div>
      </div>
    );
  }

  return (
    <ScreenshotProvider screenshots={data.screenshots ?? []}>
      <div className="pt-20">
        <ReportNav sections={REPORT_SECTIONS} />

        {enrichStatus === 'loading' && (
          <div className="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 bg-white rounded-xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] border border-slate-100">
            <div className="w-4 h-4 border-2 border-[#6C5CE7] border-t-transparent rounded-full animate-spin" />
            <span className="text-xs text-slate-500">채널 데이터 보강 중...</span>
          </div>
        )}

        <ReportBody data={data} />
      </div>
    </ScreenshotProvider>
  );
}
