import type { AnalysisReport as AnalysisReportData } from '@ftb/shared';
import { EvidenceList } from './EvidenceList';

export function AnalysisReport({ report }: { report: AnalysisReportData }) {
  return (
    <section className="rounded-[28px] border border-white/60 bg-white/75 p-5 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl">
      <h3 className="text-[14px] font-semibold text-[#111827]">分析报告</h3>
      <p className="mt-3 text-[14px] leading-7 text-[#334155]">{report.summary}</p>
      <ReportSection title="关键发现" items={report.keyFindings} />
      <div className="mt-4">
        <p className="mb-2 text-[12px] font-medium text-[#64748b]">数据依据</p>
        <EvidenceList items={report.evidence} />
      </div>
      <ReportSection title="建议动作" items={report.suggestions} />
      <div className="mt-4 rounded-2xl bg-[#f8fafc] p-3 text-[12px] leading-6 text-[#64748b]">
        <p>{report.dataScope.timeDescription}</p>
        <p>{report.dataScope.permissionDescription}</p>
        <p>{report.dataScope.metricFormulaDescription}</p>
      </div>
    </section>
  );
}

function ReportSection({ title, items }: { title: string; items: string[] }) {
  if (items.length === 0) return null;

  return (
    <div className="mt-4">
      <p className="mb-2 text-[12px] font-medium text-[#64748b]">{title}</p>
      <ul className="space-y-1.5 text-[13px] leading-6 text-[#334155]">
        {items.map((item) => (
          <li key={item}>• {item}</li>
        ))}
      </ul>
    </div>
  );
}