'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Enterprise } from '../types';

interface BasicInfoFormProps {
  enterprise: Enterprise;
  isEditing: boolean;
  formData: Partial<Enterprise>;
  onFieldChange: (field: keyof Enterprise, value: any) => void;
}

export function BasicInfoForm({
  enterprise,
  isEditing,
  formData,
  onFieldChange
}: BasicInfoFormProps) {
  return (
    <Card className="p-6">
      <h3 className="mb-6 pb-4 border-b">企业基本信息</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <Label>企业名称 *</Label>
          {isEditing ? (
            <Input
              value={formData.name || ''}
              onChange={(e) => onFieldChange('name', e.target.value)}
              placeholder="请输入企业名称"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.name}</div>
          )}
        </div>

        <div>
          <Label>企业类型 *</Label>
          {isEditing ? (
            <Select
              value={formData.type || ''}
              onValueChange={(value) => onFieldChange('type', value)}
            >
              <SelectTrigger className="mt-2">
                <SelectValue placeholder="选择企业类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="个体工商户">个体工商户</SelectItem>
                <SelectItem value="有限责任公司">有限责任公司</SelectItem>
                <SelectItem value="股份有限公司">股份有限公司</SelectItem>
                <SelectItem value="合伙企业">合伙企业</SelectItem>
                <SelectItem value="其他">其他</SelectItem>
              </SelectContent>
            </Select>
          ) : (
            <div className="field-value">{enterprise.type}</div>
          )}
        </div>

        <div>
          <Label>所在地区 *</Label>
          {isEditing ? (
            <div className="grid grid-cols-2 gap-2 mt-2">
              <Input
                value={formData.province || ''}
                onChange={(e) => onFieldChange('province', e.target.value)}
                placeholder="省份"
              />
              <Input
                value={formData.city || ''}
                onChange={(e) => onFieldChange('city', e.target.value)}
                placeholder="城市"
              />
            </div>
          ) : (
            <div className="field-value">{enterprise.province} {enterprise.city}</div>
          )}
        </div>

        <div>
          <Label>详细地址 *</Label>
          {isEditing ? (
            <Input
              value={formData.address || ''}
              onChange={(e) => onFieldChange('address', e.target.value)}
              placeholder="请输入详细地址"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.address}</div>
          )}
        </div>

        <div>
          <Label>登记人</Label>
          {isEditing ? (
            <Input
              value={formData.registrant || ''}
              onChange={(e) => onFieldChange('registrant', e.target.value)}
              placeholder="请输入登记人姓名"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.registrant}</div>
          )}
        </div>

        <div>
          <Label>联系电话 *</Label>
          {isEditing ? (
            <Input
              value={formData.contactPhone || ''}
              onChange={(e) => onFieldChange('contactPhone', e.target.value)}
              placeholder="请输入联系电话"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.contactPhone}</div>
          )}
        </div>
      </div>
    </Card>
  );
}