'use client';

import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Land } from '@/app/(app)/land-information/archive/manage/page';

interface LandBasicInfoProps {
  formData: Partial<Land>;
  onChange: (data: Partial<Land>) => void;
  isEdit?: boolean;
}

export function LandBasicInfo({ formData, onChange, isEdit = false }: LandBasicInfoProps) {
  const handleFieldChange = (field: keyof Land, value: any) => {
    onChange({ ...formData, [field]: value });
  };

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-2">地块编号</label>
          <Input
            value={formData.code || ''}
            onChange={(e) => handleFieldChange('code', e.target.value)}
            placeholder="系统自动生成"
            disabled={isEdit}
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">地块名称 *</label>
          <Input
            value={formData.name || ''}
            onChange={(e) => handleFieldChange('name', e.target.value)}
            placeholder="如：东大田1号地"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">所在位置 *</label>
          <Input
            value={formData.location || ''}
            onChange={(e) => handleFieldChange('location', e.target.value)}
            placeholder="如：江苏省南京市浦口区"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">面积(亩)</label>
          <Input
            type="number"
            step="0.1"
            value={formData.area || ''}
            onChange={(e) => handleFieldChange('area', parseFloat(e.target.value) || 0)}
            placeholder="请输入面积"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">周长(米)</label>
          <Input
            type="number"
            step="0.1"
            value={formData.perimeter || ''}
            onChange={(e) => handleFieldChange('perimeter', parseFloat(e.target.value) || 0)}
            placeholder="请输入周长"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">地块状态</label>
          <Select
            value={formData.status}
            onValueChange={(value) => handleFieldChange('status', value)}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="active">使用中</SelectItem>
              <SelectItem value="maintenance">维护中</SelectItem>
              <SelectItem value="inactive">停用</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium mb-2">备注说明</label>
        <Textarea
          value={formData.remarks || ''}
          onChange={(e) => handleFieldChange('remarks', e.target.value)}
          placeholder="其他说明信息"
          rows={3}
        />
      </div>
    </div>
  );
}