'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 } from 'lucide-react';
import { Enterprise } from '../types';

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

export function BankInfoForm({
  enterprise,
  isEditing,
  formData,
  onFieldChange,
  onImageUpload
}: BankInfoFormProps) {
  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.bankAccount || ''}
              onChange={(e) => onFieldChange('bankAccount', e.target.value)}
              placeholder="请输入银行账号"
              className="mt-2"
            />
          ) : (
            <div className="field-value">
              {enterprise.bankAccount ? (
                <code className="text-sm font-mono">
                  {enterprise.bankAccount}
                </code>
              ) : '-'}
            </div>
          )}
        </div>

        <div>
          <Label>开户行</Label>
          {isEditing ? (
            <Input
              value={formData.bankName || ''}
              onChange={(e) => onFieldChange('bankName', e.target.value)}
              placeholder="如：中国工商银行"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.bankName || '-'}</div>
          )}
        </div>

        <div className="md:col-span-2">
          <Label>开户行全称</Label>
          {isEditing ? (
            <Input
              value={formData.bankFullName || ''}
              onChange={(e) => onFieldChange('bankFullName', e.target.value)}
              placeholder="如：中国工商银行股份有限公司北京中关村支行"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.bankFullName || '-'}</div>
          )}
        </div>

        <div className="md:col-span-2">
          <Label>开户行地址</Label>
          {isEditing ? (
            <Input
              value={formData.bankAddress || ''}
              onChange={(e) => onFieldChange('bankAddress', e.target.value)}
              placeholder="请输入开户行地址"
              className="mt-2"
            />
          ) : (
            <div className="field-value">{enterprise.bankAddress || '-'}</div>
          )}
        </div>

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