'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 { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Upload } from 'lucide-react';
import { Enterprise } from '../types';

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

export function OtherInfoForm({
  enterprise,
  isEditing,
  formData,
  onFieldChange,
  onImageUpload
}: OtherInfoFormProps) {
  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 ? (
            <Select
              value={formData.companySize || ''}
              onValueChange={(value) => onFieldChange('companySize', value)}
            >
              <SelectTrigger className="mt-2">
                <SelectValue placeholder="选择公司规模" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1-50人">1-50人</SelectItem>
                <SelectItem value="50-200人">50-200人</SelectItem>
                <SelectItem value="200-500人">200-500人</SelectItem>
                <SelectItem value="500-1000人">500-1000人</SelectItem>
                <SelectItem value="1000人以上">1000人以上</SelectItem>
              </SelectContent>
            </Select>
          ) : (
            <div className="field-value">{enterprise.companySize || '-'}</div>
          )}
        </div>

        <div>
          <Label>注册资本</Label>
          {isEditing ? (
            <Input
              value={formData.registeredCapital || ''}
              onChange={(e) => onFieldChange('registeredCapital', e.target.value)}
              placeholder="如：1000万元"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.registeredCapital || '-'}</div>
          )}
        </div>

        <div>
          <Label>成立时间</Label>
          {isEditing ? (
            <Input
              type="date"
              value={formData.establishmentDate || ''}
              onChange={(e) => onFieldChange('establishmentDate', e.target.value)}
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.establishmentDate || '-'}</div>
          )}
        </div>

        <div>
          <Label>发票类型</Label>
          {isEditing ? (
            <Select
              value={formData.invoiceType || ''}
              onValueChange={(value) => onFieldChange('invoiceType', value)}
            >
              <SelectTrigger className="mt-2">
                <SelectValue placeholder="选择发票类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="增值税专用发票">增值税专用发票</SelectItem>
                <SelectItem value="增值税普通发票">增值税普通发票</SelectItem>
                <SelectItem value="电子发票">电子发票</SelectItem>
              </SelectContent>
            </Select>
          ) : (
            <div className="field-value">{enterprise.invoiceType || '-'}</div>
          )}
        </div>

        <div className="md:col-span-2">
          <Label>社会信用代码 *</Label>
          {isEditing ? (
            <Input
              value={formData.socialCreditCode || ''}
              onChange={(e) => onFieldChange('socialCreditCode', e.target.value)}
              placeholder="请输入18位社会信用代码"
              className="mt-2"
              maxLength={18}
            />
          ) : (
            <div className="field-value">
              <code className="text-sm font-mono">
                {enterprise.socialCreditCode}
              </code>
            </div>
          )}
        </div>

        <div className="md:col-span-2">
          <Label>经营范围</Label>
          {isEditing ? (
            <Textarea
              value={formData.businessScope || ''}
              onChange={(e) => onFieldChange('businessScope', e.target.value)}
              placeholder="请输入经营范围"
              className="mt-2"
              rows={4}
            />
          ) : (
            <div className="field-value">{enterprise.businessScope || '-'}</div>
          )}
        </div>

        <div className="md:col-span-2">
          <Label>营业执照</Label>
          <div className="mt-2">
            {enterprise.businessLicense ? (
              <div className="relative inline-block">
                <img
                  src={enterprise.businessLicense}
                  alt="营业执照"
                  className="w-48 h-auto border rounded-lg"
                />
                {isEditing && (
                  <Button
                    size="sm"
                    variant="outline"
                    className="mt-2"
                    onClick={() => onImageUpload('businessLicense')}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    重新上传
                  </Button>
                )}
              </div>
            ) : (
              isEditing ? (
                <Button
                  variant="outline"
                  onClick={() => onImageUpload('businessLicense')}
                >
                  <Upload className="w-4 h-4 mr-2" />
                  上传营业执照
                </Button>
              ) : (
                <span className="text-muted-foreground">未上传</span>
              )
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}