/**
 * GuestReportPage — `/report/:id`
 *
 * 손님(랜딩에서 분석을 실행한 비계약 방문자)이 보는 리포트 화면.
 * 본문은 UserReportPage 와 동일하나, 하단에 도입 문의 CTA가 추가되고
 * 워크스페이스용 액션바는 노출되지 않습니다.
 */
import { useParams } from 'react-router';
import { ArrowRight } from 'lucide-react';
import { useReportPageData } from '../hooks/useReportPageData';
import { ReportNav } from '../components/ReportNav';
import { ScreenshotProvider } from '../stores/ScreenshotContext';
import { REPORT_SECTIONS } from '@/shared/constants/reportSections';
import { buildContactMailto } from '@/shared/lib/contact';
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} />

        {/* Guest 전용 — 도입 문의 CTA */}
        <section className="px-6 py-16 bg-gradient-to-b from-white to-[#F3F0FF]/30">
          <div className="max-w-3xl mx-auto rounded-3xl bg-[#0A1128] p-10 text-center relative overflow-hidden">
            <div className="absolute top-0 right-0 w-[300px] h-[300px] rounded-full bg-[#7B2D8E]/20 blur-[120px]" aria-hidden />
            <div className="relative">
              <p className="text-xs uppercase tracking-wider text-purple-300/70 mb-3">
                INFINITH 도입 안내
              </p>
              <h2 className="font-serif text-2xl md:text-3xl font-bold text-white mb-3 leading-snug">
                이 리포트의 다음 단계 — 마케팅 기획
              </h2>
              <p className="text-sm text-purple-200/70 break-keep leading-relaxed mb-7 max-w-xl mx-auto">
                계약 병원 전용 워크스페이스에서 본 분석을 기반으로 콘텐츠 캘린더,
                자산 관리, 워크플로우 추적까지 한 곳에서 운영할 수 있습니다.
              </p>
              <a
                href={buildContactMailto(`도입 문의 — ${data.clinicSnapshot.name} 리포트`)}
                className="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold text-[#0A1128] bg-white rounded-full shadow-sm hover:opacity-90 transition-all"
              >
                도입 문의하기
                <ArrowRight className="w-4 h-4" />
              </a>
            </div>
          </div>
        </section>
      </div>
    </ScreenshotProvider>
  );
}
