'use client';

import { Card } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { SamplePoint, getPHLevel, getOrganicMatterLevel } from './soilDataReducer';

interface ProfileInformationProps {
  samplePoints: SamplePoint[];
}

export default function ProfileInformation({ samplePoints }: ProfileInformationProps) {
  const selectedPoint = samplePoints[0]; // 默认选择第一个采样点

  if (!selectedPoint) {
    return (
      <Card className="p-8 text-center">
        <div className="text-muted-foreground">
          <p>暂无采样点数据</p>
          <p className="text-sm mt-1">请先添加采样点数据</p>
        </div>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card className="p-4">
        <div className="flex gap-4">
          <div className="flex-1">
            <label className="text-sm font-medium text-muted-foreground">选择采样点</label>
            <Select defaultValue={selectedPoint.id}>
              <SelectTrigger className="w-[300px] mt-1">
                <SelectValue placeholder="选择采样点" />
              </SelectTrigger>
              <SelectContent>
                {samplePoints.map((point) => (
                  <SelectItem key={point.id} value={point.id}>
                    {point.code} - {point.fieldName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </Card>

      {/* 剖面可视化 */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">土壤剖面可视化</h3>
        <div className="flex flex-col lg:flex-row gap-6">
          {/* 左侧剖面图 */}
          <div className="w-full lg:w-1/3">
            <div className="border-2 border-border rounded-lg overflow-hidden">
              {selectedPoint.layers.map((layer, index) => (
                <div
                  key={index}
                  className="relative border-b last:border-b-0"
                  style={{
                    height: '120px',
                    background: `linear-gradient(to bottom,
                      ${index === 0 ? '#8b7355' : index === 1 ? '#6b5344' : '#4a3829'},
                      ${index === 0 ? '#6b5344' : index === 1 ? '#4a3829' : '#2a1810'}
                    )`,
                  }}
                >
                  <div className="absolute left-4 top-4 text-white">
                    <div className="text-sm font-medium">{layer.depth}</div>
                  </div>
                  <div className="absolute right-4 top-4 text-white text-xs bg-black/30 px-2 py-1 rounded">
                    pH: {layer.pH}
                  </div>
                </div>
              ))}
            </div>
            <div className="text-center text-sm text-muted-foreground mt-2">深度剖面图</div>
          </div>

          {/* 右侧数据表格 */}
          <div className="flex-1">
            <div className="border rounded-lg overflow-hidden">
              <table className="w-full">
                <thead className="bg-muted">
                  <tr>
                    <th className="px-4 py-3 text-left text-sm font-medium">深度</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">pH值</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">有机质(g/kg)</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">全氮(g/kg)</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">有效磷(mg/kg)</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">速效钾(mg/kg)</th>
                    <th className="px-4 py-3 text-center text-sm font-medium">含水量(%)</th>
                  </tr>
                </thead>
                <tbody>
                  {selectedPoint.layers.map((layer, index) => (
                    <tr key={index} className="border-t">
                      <td className="px-4 py-3 font-medium">{layer.depth}</td>
                      <td className="px-4 py-3 text-center">
                        <Badge className={`${getPHLevel(layer.pH || 0).color} text-white`}>
                          {layer.pH}
                        </Badge>
                      </td>
                      <td className="px-4 py-3 text-center">
                        <span className={getOrganicMatterLevel(layer.organicMatter || 0).color}>
                          {layer.organicMatter}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">{layer.nitrogen}</td>
                      <td className="px-4 py-3 text-center">{layer.phosphorus}</td>
                      <td className="px-4 py-3 text-center">{layer.potassium}</td>
                      <td className="px-4 py-3 text-center">{layer.moisture}%</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* 趋势分析 */}
            <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
              <h4 className="mb-2 text-blue-900 dark:text-blue-100 font-medium">剖面特征分析</h4>
              <ul className="space-y-1 text-sm text-blue-800 dark:text-blue-200">
                <li>• <strong>pH值</strong>: 随深度增加{selectedPoint.layers[0]?.pH > (selectedPoint.layers[selectedPoint.layers.length - 1]?.pH || 0) ? '下降' : '上升'}，表层为{getPHLevel(selectedPoint.layers[0]?.pH || 0).label}</li>
                <li>• <strong>有机质</strong>: 表层含量高，向下递减，符合正常分布规律</li>
                <li>• <strong>养分</strong>: 氮磷钾含量表层最高，20cm以下显著降低</li>
                <li>• <strong>水分</strong>: 随深度增加含水量上升，底层保水性好</li>
              </ul>
            </div>
          </div>
        </div>
      </Card>

      {/* 分层数据详情 */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">分层数据详细记录</h3>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {selectedPoint.layers.map((layer, index) => (
            <div key={index} className="border rounded-lg p-4 bg-card">
              <div className="flex items-center justify-between mb-4">
                <h4 className="font-medium text-lg">第 {index + 1} 层</h4>
                <Badge variant="outline" className="font-light">{layer.depth}</Badge>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">pH值:</span>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{layer.pH}</span>
                      <div className={`w-2 h-2 rounded-full ${getPHLevel(layer.pH || 0).color}`} />
                    </div>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">有机质:</span>
                    <span className="font-medium">{layer.organicMatter} g/kg</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">全氮:</span>
                    <span className="font-medium">{layer.nitrogen} g/kg</span>
                  </div>
                </div>

                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">有效磷:</span>
                    <span className="font-medium">{layer.phosphorus} mg/kg</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">速效钾:</span>
                    <span className="font-medium">{layer.potassium} mg/kg</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">含水量:</span>
                    <span className="font-medium">{layer.moisture}%</span>
                  </div>
                </div>
              </div>

              {/* 营养状况评估 */}
              <div className="mt-4 pt-4 border-t">
                <div className="text-sm">
                  <span className="text-muted-foreground">营养状况: </span>
                  <span className="font-medium text-green-600">
                    {layer.organicMatter && layer.organicMatter > 25 ? '营养丰富' :
                     layer.organicMatter && layer.organicMatter > 15 ? '营养中等' : '营养偏低'}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}