'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 { Button } from '@/components/ui/button';
import { Upload, Image as ImageIcon } from 'lucide-react';
import { Enterprise } from '../types';

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

export function LegalInfoForm({
  enterprise,
  isEditing,
  formData,
  onFieldChange,
  onImageUpload
}: LegalInfoFormProps) {
  return (
    <Card className="p-6">
      <h3 className="mb-6 pb-4 border-b">法人信息</h3>
      <div className="grid grid-cols-1 gap-6">
        <div>
          <Label>法人名称</Label>
          {isEditing ? (
            <Input
              value={formData.legalPerson || ''}
              onChange={(e) => onFieldChange('legalPerson', e.target.value)}
              placeholder="请输入法人姓名"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.legalPerson || '-'}</div>
          )}
        </div>

        <div>
          <Label>身份证正面</Label>
          <div className="mt-2">
            {enterprise.idCardFront ? (
              <div className="relative inline-block">
                <img
                  src={enterprise.idCardFront}
                  alt="身份证正面"
                  className="w-64 h-auto border rounded-lg"
                />
                {isEditing && (
                  <Button
                    size="sm"
                    variant="outline"
                    className="mt-2"
                    onClick={() => onImageUpload('idCardFront')}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    重新上传
                  </Button>
                )}
              </div>
            ) : (
              isEditing ? (
                <Button
                  variant="outline"
                  onClick={() => onImageUpload('idCardFront')}
                >
                  <ImageIcon className="w-4 h-4 mr-2" />
                  上传身份证正面
                </Button>
              ) : (
                <span className="text-muted-foreground">未上传</span>
              )
            )}
          </div>
        </div>

        <div>
          <Label>身份证反面</Label>
          <div className="mt-2">
            {enterprise.idCardBack ? (
              <div className="relative inline-block">
                <img
                  src={enterprise.idCardBack}
                  alt="身份证反面"
                  className="w-64 h-auto border rounded-lg"
                />
                {isEditing && (
                  <Button
                    size="sm"
                    variant="outline"
                    className="mt-2"
                    onClick={() => onImageUpload('idCardBack')}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    重新上传
                  </Button>
                )}
              </div>
            ) : (
              isEditing ? (
                <Button
                  variant="outline"
                  onClick={() => onImageUpload('idCardBack')}
                >
                  <ImageIcon className="w-4 h-4 mr-2" />
                  上传身份证反面
                </Button>
              ) : (
                <span className="text-muted-foreground">未上传</span>
              )
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}