'use client';

import { Card } from '@/components/ui/card';
import { Map, Layers, MapPin, FileJson } from 'lucide-react';
import { MapLayer } from '@/lib/gisMapEngine';
import { Field } from './gisMapReducer';

interface MapInfoPanelProps {
  currentLayer: MapLayer;
  fields: Field[];
}

export function MapInfoPanel({ currentLayer, fields }: MapInfoPanelProps) {
  const getLayerName = (layer: MapLayer): string => {
    const names: Record<MapLayer, string> = {
      satellite: '卫星影像',
      street: '电子地图',
      terrain: '地形图',
      hybrid: '混合图层',
    };
    return names[layer];
  };

  return (
    <div className="grid grid-cols-4 gap-4">
      <Card className="p-4 bg-card hover:bg-muted transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-green-50 dark:bg-green-950 rounded-lg">
            <Map className="w-5 h-5 text-green-600 dark:text-green-400" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">地图引擎</div>
            <div className="mt-1">Leaflet + OSM</div>
          </div>
        </div>
      </Card>

      <Card className="p-4 bg-card hover:bg-muted transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-blue-50 dark:bg-blue-950 rounded-lg">
            <Layers className="w-5 h-5 text-blue-600 dark:text-blue-400" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">当前图层</div>
            <div className="mt-1">{getLayerName(currentLayer)}</div>
          </div>
        </div>
      </Card>

      <Card className="p-4 bg-card hover:bg-muted transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-purple-50 dark:bg-purple-950 rounded-lg">
            <MapPin className="w-5 h-5 text-purple-600 dark:text-purple-400" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">显示地块</div>
            <div className="mt-1">{fields.length} 个</div>
          </div>
        </div>
      </Card>

      <Card className="p-4 bg-card hover:bg-muted transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-orange-50 dark:bg-orange-950 rounded-lg">
            <FileJson className="w-5 h-5 text-orange-600 dark:text-orange-400" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">总面积</div>
            <div className="mt-1">
              {fields.reduce((sum, f) => sum + f.area, 0).toFixed(1)} 亩
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}