'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import Shell from '../../components/Shell';

export default function ReportPreviewPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const sid = localStorage.getItem('lingjing_sid');
    if (!sid) return;
    fetch(`/api/report/preview?sessionId=${encodeURIComponent(sid)}`)
      .then((r) => r.json())
      .then(setData);
  }, []);

  return (
    <Shell title="报告预览（免费版）" subtitle="先看核心摘要，完整版可继续查看。">
      <div className="card space-y-4 p-6 text-sm">
        <p className="font-medium">{data?.userSnapshot?.summary || '你现在处在“想改变，但还没找到最顺手路径”的阶段。'}</p>
        <p>{data?.highlight?.content || '你对变化是有行动意愿的，只是容易在选择上分散精力。'}</p>
        <p className="text-neutral-600">{data?.teaser?.lockedHint || '完整版将告诉你哪条路线最适合你现在的节奏。'}</p>
        <Link href="/report-full" className="btn-primary">
          查看完整报告（演示）
        </Link>
      </div>
    </Shell>
  );
}