import type { InsightCard as InsightCardData } from '@ftb/shared';

export function InsightCard({ insight }: { insight: InsightCardData }) {
  return (
    <section className="rounded-[28px] border border-white/60 bg-white/80 p-5 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl">
      {insight.primaryValue && (
        <div className="mb-3">
          <div className="text-[44px] font-semibold leading-none tracking-normal text-[#0f172a]">
            {insight.primaryValue.value}
            {insight.primaryValue.unit ?? ''}
          </div>
          <div className="mt-2 text-[13px] text-[#64748b]">{insight.primaryValue.label}</div>
        </div>
      )}
      <p className="text-[15px] leading-7 text-[#111827]">{insight.summary}</p>
      {(insight.semanticConfidence !== 'high' || insight.dataConfidence !== 'sufficient') && (
        <p className="mt-3 text-[12px] text-[#64748b]">
          语义置信：{confidenceLabel(insight.semanticConfidence)} · 数据充分性：{dataLabel(insight.dataConfidence)}
        </p>
      )}
    </section>
  );
}

function confidenceLabel(value: InsightCardData['semanticConfidence']) {
  return value === 'high' ? '高' : value === 'medium' ? '中' : '低';
}

function dataLabel(value: InsightCardData['dataConfidence']) {
  return value === 'sufficient' ? '数据充分' : value === 'partial' ? '部分数据' : '数据不足';
}