'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { SamplePoint } from './soilDataReducer';

interface SpatialDistributionProps {
  samplePoints: SamplePoint[];
}

export default function SpatialDistribution({ samplePoints }: SpatialDistributionProps) {
  // 计算地图中心点
  const getCenterPoint = () => {
    if (samplePoints.length === 0) {
      return { lat: 39.9042, lng: 116.4074 }; // 默认北京天安门
    }

    const avgLat = samplePoints.reduce((sum, p) => sum + p.latitude, 0) / samplePoints.length;
    const avgLng = samplePoints.reduce((sum, p) => sum + p.longitude, 0) / samplePoints.length;

    return { lat: avgLat, lng: avgLng };
  };

  const center = getCenterPoint();

  return (
    <div className="space-y-4">
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">采样点空间分布图</h3>

        {/* 地图容器 - 暂时用占位符替代真实地图 */}
        <div className="relative h-[500px] rounded-lg border bg-muted overflow-hidden">
          {/* 地图占位符 */}
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-center text-muted-foreground">
              <div className="w-16 h-16 bg-muted-foreground/20 rounded-full mx-auto mb-4 flex items-center justify-center">
                <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                </svg>
              </div>
              <p className="text-sm">地图组件加载中...</p>
              <p className="text-xs mt-1">中心坐标: {center.lat.toFixed(4)}, {center.lng.toFixed(4)}</p>
            </div>
          </div>

          {/* 模拟采样点标记 */}
          {samplePoints.map((point, index) => {
            const relativeLat = ((point.latitude - center.lat) * 10000 + 50) % 100;
            const relativeLng = ((point.longitude - center.lng) * 10000 + 50) % 100;

            return (
              <div
                key={point.id}
                className="absolute w-4 h-4 rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-125 transition-transform"
                style={{
                  left: `${relativeLng}%`,
                  top: `${relativeLat}%`,
                  backgroundColor: point.layers[0]?.pH < 6.5 ? '#f97316' : point.layers[0]?.pH < 7.5 ? '#22c55e' : '#3b82f6',
                }}
                title={`${point.code} - ${point.fieldName}\npH: ${point.layers[0]?.pH}`}
              />
            );
          })}

          {/* 图例 */}
          <div className="absolute bottom-4 right-4 bg-background p-4 rounded-lg shadow-lg border z-10">
            <h4 className="text-sm font-medium mb-2">图例</h4>
            <div className="space-y-2 text-xs">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-orange-500" />
                <span>酸性土壤 (pH &lt; 6.5)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-green-500" />
                <span>中性土壤 (6.5-7.5)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-blue-500" />
                <span>碱性土壤 (pH &gt; 7.5)</span>
              </div>
            </div>
          </div>
        </div>
      </Card>

      {/* 空间分布统计 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card className="p-4">
          <h4 className="font-medium mb-3">采样密度统计</h4>
          <div className="space-y-2 text-sm">
            {Array.from(new Set(samplePoints.map(p => p.fieldName))).map(fieldName => {
              const fieldPoints = samplePoints.filter(p => p.fieldName === fieldName);
              return (
                <div key={fieldName} className="flex justify-between">
                  <span className="text-muted-foreground">{fieldName}:</span>
                  <span>{fieldPoints.length} 个点</span>
                </div>
              );
            })}
          </div>
        </Card>

        <Card className="p-4">
          <h4 className="font-medium mb-3">pH值分布</h4>
          <div className="space-y-2">
            {[
              { label: '酸性', color: 'bg-orange-500', count: samplePoints.filter(p => p.layers[0]?.pH < 6.5).length },
              { label: '中性', color: 'bg-green-500', count: samplePoints.filter(p => p.layers[0]?.pH >= 6.5 && p.layers[0]?.pH < 7.5).length },
              { label: '碱性', color: 'bg-blue-500', count: samplePoints.filter(p => p.layers[0]?.pH >= 7.5).length },
            ].map(item => (
              <div key={item.label} className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className={`w-3 h-3 rounded-full ${item.color}`} />
                  <span className="text-sm">{item.label}</span>
                </div>
                <Badge variant="outline" className="font-light">{item.count}</Badge>
              </div>
            ))}
          </div>
        </Card>

        <Card className="p-4">
          <h4 className="font-medium mb-3">覆盖范围</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">总采样点:</span>
              <span>{samplePoints.length} 个</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">覆盖地块:</span>
              <span>{new Set(samplePoints.map(p => p.fieldName)).size} 个</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">分层数据:</span>
              <span>{samplePoints.reduce((sum, p) => sum + p.layers.length, 0)} 层</span>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}