const AI_ANALYSIS_CSS = `
.ai-analysis-card{display:grid;gap:10px}.ai-analysis-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ai-analysis-title h3{margin:0;font-size:13px}.ai-analysis-title p{margin:3px 0 0;color:#7a8493;font-size:9.5px}.ai-analysis-title span{padding:4px 7px;border:1px solid #dfe3e8;border-radius:999px;color:#697486;font-size:8.5px;white-space:nowrap}
.ai-analysis-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.ai-analysis-stats>div{min-width:0;padding:8px;border:1px solid #e6e9ed;border-radius:8px;background:#fafbfc}.ai-analysis-stats small{display:block;color:#7e8897;font-size:8px}.ai-analysis-stats b{display:block;margin-top:2px;color:#263142;font-size:12px;overflow-wrap:anywhere}
.ai-analysis-chart{padding:8px 8px 3px;border:1px solid #e1e5ea;border-radius:10px;background:#fff}.ai-analysis-chart svg{display:block;width:100%;height:auto;overflow:visible}.ai-analysis-chart text{font-family:var(--font-sans,Arial,sans-serif)}.ai-analysis-legend{display:flex;flex-wrap:wrap;gap:6px 12px;padding:2px 8px 7px;color:#6f7b8b;font-size:8.5px}.ai-analysis-legend i{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px;background:#586476}
.ai-analysis-method{margin:0;padding:8px 10px;border-left:3px solid #aab2bd;background:#f7f8f9;color:#657083;font-size:9px;line-height:1.55}.ai-analysis-method b{color:#3f4b5c}.ai-analysis-source{color:#7b8594;font-size:8.5px}
@media(max-width:650px){.ai-analysis-stats{grid-template-columns:1fr 1fr}}
`;

const AiAnalysisNumber = value => {
  if (value == null || !Number.isFinite(value)) return '—';
  if (Math.abs(value) >= 100) return value.toFixed(1);
  return value.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
};

function AiAnalysisSvg({ receipt }) {
  const chart = receipt.chart || {};
  const width = 520, height = 300, left = 50, right = 500, top = 20, bottom = 250;
  if (chart.type === 'line') {
    const rows = chart.series || [];
    const values = rows.map(row => row.value);
    const min0 = Math.min(...values), max0 = Math.max(...values);
    const pad = (max0-min0 || Math.max(Math.abs(max0||1),1))*.12;
    const min = min0-pad, max = max0+pad;
    const sx = index => left + index / Math.max(1, rows.length-1) * (right-left);
    const sy = value => bottom - (value-min) / Math.max(1e-9,max-min) * (bottom-top);
    const path = rows.map((row,index)=>(index?'L':'M')+sx(index)+' '+sy(row.value)).join(' ');
    return <div className="ai-analysis-chart"><svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${receipt.metric.label} 纵向趋势图`}>
      {[0,.25,.5,.75,1].map(step=><g key={step}><line x1={left} x2={right} y1={top+(bottom-top)*step} y2={top+(bottom-top)*step} stroke="#edf0f3"/><text x={left-7} y={top+(bottom-top)*step+3} textAnchor="end" fontSize="8" fill="#7e8998">{AiAnalysisNumber(max-(max-min)*step)}</text></g>)}
      <path d={path} fill="none" stroke="#536171" strokeWidth="2.5" strokeLinejoin="round"/>
      {rows.map((row,index)=><g key={`${row.date}-${index}`}><circle cx={sx(index)} cy={sy(row.value)} r="4" fill="#fff" stroke="#536171" strokeWidth="2"><title>{row.date}: {row.value}</title></circle>{(index===0||index===rows.length-1)&&<text x={sx(index)} y={bottom+18} textAnchor={index===0?'start':'end'} fontSize="8" fill="#758090">{row.date}</text>}</g>)}
      <text x={(left+right)/2} y="290" textAnchor="middle" fontSize="9" fill="#687385">日期</text>
      <text transform="translate(13 140) rotate(-90)" textAnchor="middle" fontSize="9" fill="#687385">{receipt.metric.label} ({receipt.metric.unit||'value'})</text>
    </svg></div>;
  }
  if (chart.type === 'histogram') {
    const bins = chart.bins || [];
    const maxCount = Math.max(1,...bins.map(bin=>bin.count));
    const gap = 5, barWidth = (right-left)/Math.max(1,bins.length)-gap;
    return <div className="ai-analysis-chart"><svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${receipt.metric.label} 分布直方图`}>
      {bins.map((bin,index)=>{const x=left+index*(barWidth+gap);const h=bin.count/maxCount*(bottom-top);return <g key={index}><rect x={x} y={bottom-h} width={barWidth} height={h} rx="3" fill="#647181"/><text x={x+barWidth/2} y={bottom-h-5} textAnchor="middle" fontSize="8" fill="#536171">{bin.count}</text><text x={x+barWidth/2} y={bottom+16} textAnchor="middle" fontSize="7.5" fill="#7b8695">{AiAnalysisNumber(bin.from)}–{AiAnalysisNumber(bin.to)}</text></g>})}
      <line x1={left} x2={right} y1={bottom} y2={bottom} stroke="#bac1ca"/>
      <text x={(left+right)/2} y="290" textAnchor="middle" fontSize="9" fill="#687385">{receipt.metric.label} ({receipt.metric.unit||'value'})</text>
    </svg></div>;
  }
  if (chart.type === 'bar') {
    const groups = chart.groups || [];
    const values = groups.map(group=>group.value).filter(Number.isFinite);
    const min0 = Math.min(0,...values), max0 = Math.max(1,...values.map((value,index)=>value+(groups[index]?.sd||0)));
    const sy=value=>bottom-(value-min0)/Math.max(1e-9,max0-min0)*(bottom-top);
    const band=(right-left)/Math.max(1,groups.length), barWidth=Math.min(90,band*.55);
    return <div className="ai-analysis-chart"><svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${receipt.metric.label} 分组比较图`}>
      {groups.map((group,index)=>{const x=left+band*index+(band-barWidth)/2;const y=sy(group.value);const base=sy(0);const err=group.sd||0;return <g key={group.id}><rect x={x} y={Math.min(y,base)} width={barWidth} height={Math.abs(base-y)} rx="4" fill="#647181"/>{err>0&&<><line x1={x+barWidth/2} x2={x+barWidth/2} y1={sy(group.value-err)} y2={sy(group.value+err)} stroke="#2f3947"/><line x1={x+barWidth*.34} x2={x+barWidth*.66} y1={sy(group.value-err)} y2={sy(group.value-err)} stroke="#2f3947"/><line x1={x+barWidth*.34} x2={x+barWidth*.66} y1={sy(group.value+err)} y2={sy(group.value+err)} stroke="#2f3947"/></>}<text x={x+barWidth/2} y={Math.min(y,base)-7} textAnchor="middle" fontSize="8" fill="#536171">{AiAnalysisNumber(group.value)}</text><text x={x+barWidth/2} y={bottom+16} textAnchor="middle" fontSize="8.5" fill="#687385">{group.label} · n={group.n}</text></g>})}
      <line x1={left} x2={right} y1={sy(0)} y2={sy(0)} stroke="#bac1ca"/>
      <text transform="translate(13 140) rotate(-90)" textAnchor="middle" fontSize="9" fill="#687385">{receipt.metric.label} ({receipt.metric.unit||'value'})</text>
    </svg><div className="ai-analysis-legend"><span><i/>柱为均值；误差线为样本 SD</span></div></div>;
  }
  return null;
}

function AiAnalysisView({ receipt }) {
  if (!receipt || receipt.kind !== 'analysis') return null;
  const labels = {descriptive:'描述统计',trend:'纵向趋势',distribution:'分布分析',comparison:'分组比较'};
  const stats = receipt.statistics || {};
  let cards = [];
  if (receipt.analysisType === 'trend') cards = [
    ['观测数',stats.n],['变化',`${AiAnalysisNumber(stats.change)} ${receipt.metric.unit||''}`],['变化率',`${AiAnalysisNumber(stats.changePct)}%`],['每次观测斜率',AiAnalysisNumber(stats.slopePerObservation)],
  ];
  else if (receipt.analysisType === 'comparison') {
    cards = (stats.groups||[]).slice(0,4).map(group=>[`${group.label} · n=${group.statistics.n}`,`${AiAnalysisNumber(group.statistics.mean)} ${receipt.metric.unit||''}`]);
  } else cards = [
    ['样本量',stats.n],['均值',`${AiAnalysisNumber(stats.mean)} ${receipt.metric.unit||''}`],['中位数',AiAnalysisNumber(stats.median)],['标准差',AiAnalysisNumber(stats.sd)],
    ['CV',`${AiAnalysisNumber(stats.cvPct)}%`],['Q1–Q3',`${AiAnalysisNumber(stats.q1)}–${AiAnalysisNumber(stats.q3)}`],['最小值',AiAnalysisNumber(stats.min)],['最大值',AiAnalysisNumber(stats.max)],
  ];
  return <section className="axis-ai-card ai-analysis-card" data-ai-analysis-type={receipt.analysisType}>
    <style>{AI_ANALYSIS_CSS}</style>
    <header className="ai-analysis-title"><div><h3>{receipt.metric.label} · {labels[receipt.analysisType]}</h3><p>{receipt.scope?.kind==='athlete'?'单运动员纵向':'当前筛选样本'} · 只读确定性计算</p></div><span>{receipt.chart?.type||'summary'}</span></header>
    <div className="ai-analysis-stats">{cards.map(([label,value])=><div key={label}><small>{label}</small><b>{value == null ? '—' : value}</b></div>)}</div>
    <AiAnalysisSvg receipt={receipt}/>
    {receipt.analysisType==='comparison'&&stats.pairwise&&<p className="ai-analysis-method"><b>两组描述性差异：</b>均值差 {AiAnalysisNumber(stats.pairwise.meanDifference)} {receipt.metric.unit||''}；Hedges g {AiAnalysisNumber(stats.pairwise.hedgesG)}。未进行因果归因。</p>}
    <p className="ai-analysis-method">{(receipt.limitations||[]).join(' ')}</p>
    <div className="ai-analysis-source">纳入来源 {receipt.sourceRefs?.length||0} 条 · 排除 {receipt.excluded?.length||0} 名/条</div>
  </section>;
}

Object.assign(window,{AiAnalysisView});