'use client';

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

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

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

  return (
    <Shell title="完整报告（演示版）" subtitle="暂不接支付，直接展示完整结构。">
      <div className="card space-y-5 p-6 text-sm leading-7">
        <section>
          <h3 className="text-base font-semibold">核心状态画像</h3>
          <p>{data?.profileSummary?.oneLineDiagnosis || '你有明显的成长驱动力，但需要更稳定的执行节奏。'}</p>
        </section>
        <section>
          <h3 className="text-base font-semibold">三个优势</h3>
          <ul className="list-disc space-y-1 pl-5">
            {(data?.strengths || []).map((s, i) => (
              <li key={i}>{s.name}：{s.description}</li>
            ))}
          </ul>
        </section>
        <section>
          <h3 className="text-base font-semibold">三条发展路线</h3>
          <ul className="list-disc space-y-1 pl-5">
            {(data?.routes || []).map((r, i) => (
              <li key={i}>{r.title}：{r.fitReason}</li>
            ))}
          </ul>
        </section>
      </div>
    </Shell>
  );
}