CA/frontend/src/components/monitoring/DistrictStatsTab.tsx

import { memo } from 'react';
import { ErrorBanner } from '@/components/ErrorBanner';
import { MetricHeatmapTable } from '@/components/MetricHeatmapTable';

interface DistrictStatsTabProps {
  loading: boolean;
  loaded: boolean;
  error: string | null;
  rows: string[];
  data: Record<string, Record<string, number>>;
  onRetry: () => void;
  onDismissError: () => void;
  onSort: (col: string) => void;
}

// 区域统计 tab —— 区域指标热力表。纯展示，排序键由父级持有。
export const DistrictStatsTab = memo(function DistrictStatsTab({
  loading,
  loaded,
  error,
  rows,
  data,
  onRetry,
  onDismissError,
  onSort,
}: DistrictStatsTabProps) {
  if (loading && !loaded) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {error && (
        <ErrorBanner
          error={error}
          onRetry={onRetry}
          onDismiss={onDismissError}
        />
      )}

      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <h3 className="text-lg font-semibold text-gray-900 mb-1">区域指标热力表</h3>
        <p className="text-xs text-gray-500 mb-4">点击列标题排序</p>
        {rows.length > 0 ? (
          <MetricHeatmapTable
            rows={rows}
            columns={[
              { key: 'total', label: '病例' },
              { key: 'outpatient', label: '门诊' },
              { key: 'inpatient', label: '住院' },
              { key: 'inpatient_ratio', label: '住院占比%' },
            ]}
            data={data}
            onSort={onSort}
          />
        ) : (
          <div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
        )}
      </div>
    </div>
  );
});