massive-cloud/client/src/components/RealtimeReport.tsx

import { useMemo } from 'react';
import { CheckCircle2, AlertTriangle, XCircle, TrendingUp, TrendingDown } from 'lucide-react';

interface MeasurementItem {
  name: string;
  value: number;
  unit: string;
  tolerance: number;
  status: 'pass' | 'warning' | 'fail';
}

interface ErrorStats {
  min: number;
  max: number;
  mean: number;
  stdDev: number;
}

interface RealtimeReportProps {
  processedChunks: number;
  totalChunks: number;
  measurements: MeasurementItem[];
  errorStats: ErrorStats | null;
  isProcessing: boolean;
  className?: string;
}

export default function RealtimeReport({
  processedChunks,
  totalChunks,
  measurements,
  errorStats,
  isProcessing,
  className = ''
}: RealtimeReportProps) {
  const visibleMeasurements = useMemo(() => {
    const ratio = processedChunks / totalChunks;
    const count = Math.floor(measurements.length * ratio);
    return measurements.slice(0, count);
  }, [processedChunks, totalChunks, measurements]);
  
  const stats = useMemo(() => {
    const pass = visibleMeasurements.filter(m => m.status === 'pass').length;
    const warning = visibleMeasurements.filter(m => m.status === 'warning').length;
    const fail = visibleMeasurements.filter(m => m.status === 'fail').length;
    return { pass, warning, fail, total: visibleMeasurements.length };
  }, [visibleMeasurements]);
  
  return (
    <div className={`space-y-3 ${className}`}>
      {/* 误差统计卡片 */}
      <div className="report-card">
        <div className="report-card-header flex items-center justify-between">
          <span>误差统计</span>
          {isProcessing && (
            <span className="text-[oklch(0.68_0.16_55)]">实时更新中...</span>
          )}
        </div>
        <div className="report-card-body">
          {errorStats ? (
            <div className="grid grid-cols-2 gap-3">
              <div className="flex items-center justify-between">
                <span className="text-xs text-muted-foreground">最小误差</span>
                <span className="data-display py-0.5 px-2 text-xs text-[oklch(0.55_0.18_250)]">
                  {errorStats.min.toFixed(4)} mm
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-xs text-muted-foreground">最大误差</span>
                <span className="data-display py-0.5 px-2 text-xs text-[oklch(0.58_0.20_30)]">
                  {errorStats.max.toFixed(4)} mm
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-xs text-muted-foreground">平均误差</span>
                <span className="data-display py-0.5 px-2 text-xs text-[oklch(0.72_0.16_85)]">
                  {errorStats.mean.toFixed(4)} mm
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-xs text-muted-foreground">标准差</span>
                <span className="data-display py-0.5 px-2 text-xs">
                  {errorStats.stdDev.toFixed(4)} mm
                </span>
              </div>
            </div>
          ) : (
            <div className="text-center text-xs text-muted-foreground py-4">
              等待数据处理...
            </div>
          )}
        </div>
      </div>
      
      {/* 测量结果卡片 */}
      <div className="report-card">
        <div className="report-card-header flex items-center justify-between">
          <span>测量结果</span>
          <div className="flex items-center gap-3">
            {stats.pass > 0 && (
              <span className="flex items-center gap-1 text-[oklch(0.62_0.16_145)]">
                <CheckCircle2 className="w-3 h-3" />
                {stats.pass}
              </span>
            )}
            {stats.warning > 0 && (
              <span className="flex items-center gap-1 text-[oklch(0.72_0.16_85)]">
                <AlertTriangle className="w-3 h-3" />
                {stats.warning}
              </span>
            )}
            {stats.fail > 0 && (
              <span className="flex items-center gap-1 text-[oklch(0.55_0.20_28)]">
                <XCircle className="w-3 h-3" />
                {stats.fail}
              </span>
            )}
          </div>
        </div>
        <div className="report-card-body max-h-48 overflow-y-auto">
          {visibleMeasurements.length > 0 ? (
            <div className="space-y-2">
              {visibleMeasurements.map((item, index) => (
                <div 
                  key={index}
                  className={`flex items-center justify-between p-2 rounded border ${
                    item.status === 'pass' ? 'border-[oklch(0.62_0.16_145/0.3)] bg-[oklch(0.62_0.16_145/0.05)]' :
                    item.status === 'warning' ? 'border-[oklch(0.72_0.16_85/0.3)] bg-[oklch(0.72_0.16_85/0.05)]' :
                    'border-[oklch(0.55_0.20_28/0.3)] bg-[oklch(0.55_0.20_28/0.05)]'
                  }`}
                >
                  <div className="flex items-center gap-2">
                    {item.status === 'pass' && <CheckCircle2 className="w-3.5 h-3.5 text-[oklch(0.62_0.16_145)]" />}
                    {item.status === 'warning' && <AlertTriangle className="w-3.5 h-3.5 text-[oklch(0.72_0.16_85)]" />}
                    {item.status === 'fail' && <XCircle className="w-3.5 h-3.5 text-[oklch(0.55_0.20_28)]" />}
                    <span className="text-xs">{item.name}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-mono">
                      {item.value.toFixed(3)} {item.unit}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      ±{item.tolerance}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center text-xs text-muted-foreground py-4">
              等待测量数据...
            </div>
          )}
        </div>
      </div>
      
      {/* 热力图图例 */}
      <div className="report-card">
        <div className="report-card-header">误差热力图</div>
        <div className="report-card-body">
          <div className="heatmap-legend">
            <span className="text-xs text-muted-foreground">负</span>
            <div className="heatmap-gradient" />
            <span className="text-xs text-muted-foreground">正</span>
          </div>
          <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
            <span>0.00 mm</span>
            <span>2.50 mm</span>
          </div>
        </div>
      </div>
    </div>
  );
}