'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { MapIcon, MapPin } from 'lucide-react';
import { FieldData } from './chartComparisonReducer';

interface MapComparisonProps {
  comparisonFields: FieldData[];
}

export function MapComparison({ comparisonFields }: MapComparisonProps) {
  const getGradeColor = (grade: string) => {
    switch (grade) {
      case '高度适宜': return 'bg-green-500 text-white';
      case '一般适宜': return 'bg-yellow-500 text-white';
      case '不适宜': return 'bg-red-500 text-white';
      default: return 'bg-gray-500 text-white';
    }
  };

  return (
    <Card className="p-6">
      <h3 className="mb-4 flex items-center gap-2">
        <MapIcon className="w-5 h-5 text-blue-600" />
        地块空间分布对比
      </h3>
      <div className="grid grid-cols-2 gap-4">
        {comparisonFields.map((field) => (
          <div key={field.id} className="space-y-2">
            <h4 className="text-sm font-medium">{field.name}</h4>
            <div className="h-48 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 rounded-lg flex items-center justify-center relative overflow-hidden">
              <div className="absolute inset-0 opacity-20">
                <div className="grid grid-cols-8 grid-rows-8 h-full w-full">
                  {Array.from({ length: 64 }).map((_, i) => (
                    <div
                      key={i}
                      className="border border-green-300 dark:border-green-600"
                      style={{
                        backgroundColor: `rgba(34, 197, 94, ${0.1 + (field.suitabilityScore / 100) * 0.6})`,
                      }}
                    />
                  ))}
                </div>
              </div>
              <div className="relative text-center">
                <MapPin className="w-12 h-12 text-green-600 dark:text-green-400 mx-auto mb-2" />
                <p className="text-sm font-medium">{field.location}</p>
                <Badge className={`mt-2 ${getGradeColor(field.suitabilityGrade)}`}>
                  {field.suitabilityGrade}
                </Badge>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}