'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Sprout } from 'lucide-react';
import { CheckCircle2, AlertCircle } from 'lucide-react';
import { FieldData } from './multiDimensionReducer';

interface NaturalConditionsProps {
  comparisonFields: FieldData[];
}

export function NaturalConditions({ comparisonFields }: NaturalConditionsProps) {
  const getPhStatus = (ph: number) => {
    if (ph >= 6.0 && ph <= 7.5) return 'optimal';
    return 'deviation';
  };

  const getOrganicStatus = (organic: number) => {
    if (organic >= 25) return 'optimal';
    return 'deviation';
  };

  const getDepthStatus = (depth: number) => {
    if (depth >= 60) return 'optimal';
    return 'deviation';
  };

  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <Sprout className="w-5 h-5 text-green-600" />
        <h3>自然条件对比</h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-muted">
            <tr>
              <th className="px-4 py-3 text-left text-xs">指标项</th>
              {comparisonFields.map(field => (
                <th key={field.id} className="px-4 py-3 text-center text-xs">
                  {field.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">pH值</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-sm">{field.ph}</span>
                    {getPhStatus(field.ph) === 'optimal' ? (
                      <CheckCircle2 className="w-4 h-4 text-green-500" />
                    ) : (
                      <AlertCircle className="w-4 h-4 text-yellow-500" />
                    )}
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: 6.0-7.5
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">有机质 (g/kg)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-sm">{field.organicMatter}</span>
                    {getOrganicStatus(field.organicMatter) === 'optimal' ? (
                      <CheckCircle2 className="w-4 h-4 text-green-500" />
                    ) : (
                      <AlertCircle className="w-4 h-4 text-yellow-500" />
                    )}
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: ≥25
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">全氮 (g/kg)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <span className={field.nitrogen >= 1.5 ? 'text-green-600' : field.nitrogen >= 1.0 ? 'text-yellow-600' : 'text-red-600'}>
                    {field.nitrogen}
                  </span>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: ≥1.5
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">全磷 (g/kg)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <span className={field.phosphorus >= 1.0 ? 'text-green-600' : field.phosphorus >= 0.6 ? 'text-yellow-600' : 'text-red-600'}>
                    {field.phosphorus}
                  </span>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: ≥1.0
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">全钾 (g/kg)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <span className={field.potassium >= 15 ? 'text-green-600' : field.potassium >= 10 ? 'text-yellow-600' : 'text-red-600'}>
                    {field.potassium}
                  </span>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: ≥15
                  </div>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">土层厚度 (cm)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center">
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-sm">{field.soilDepth}</span>
                    {getDepthStatus(field.soilDepth) === 'optimal' ? (
                      <CheckCircle2 className="w-4 h-4 text-green-500" />
                    ) : (
                      <AlertCircle className="w-4 h-4 text-yellow-500" />
                    )}
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    最佳: ≥60
                  </div>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}