import { CreditCard, Building } from 'lucide-react'
import React, { memo } from 'react'

import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

import type { FinancialBlockProps } from '../types/user-settings.types'

export const FinancialBlock = memo<FinancialBlockProps>(({ formData, setFormData, isEditing }) => {
  const handleInputChange = (field: keyof typeof formData, value: string) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

  const handleBikChange = (value: string) => {
    // Удаляем все кроме цифр и ограничиваем длину до 9
    const cleanBik = value.replace(/\D/g, '').slice(0, 9)
    handleInputChange('bik', cleanBik)
  }

  const handleAccountChange = (field: 'accountNumber' | 'corrAccount', value: string) => {
    // Удаляем все кроме цифр и ограничиваем длину до 20
    const cleanAccount = value.replace(/\D/g, '').slice(0, 20)
    handleInputChange(field, cleanAccount)
  }

  return (
    <Card className="glass-card p-6">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center">
          <CreditCard className="w-5 h-5 text-emerald-500" />
        </div>
        <h3 className="text-lg font-semibold text-foreground">Банковские реквизиты</h3>
      </div>

      <div className="grid grid-cols-1 gap-6">
        <div className="space-y-2">
          <Label htmlFor="bankName" className="text-sm font-medium text-foreground">
            <div className="flex items-center space-x-2">
              <Building className="w-4 h-4" />
              <span>Название банка *</span>
            </div>
          </Label>
          <Input
            id="bankName"
            type="text"
            placeholder="ПАО Сбербанк"
            value={formData.bankName}
            onChange={(e) => handleInputChange('bankName', e.target.value)}
            disabled={!isEditing}
            className="w-full"
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="bik" className="text-sm font-medium text-foreground">
              БИК *
            </Label>
            <Input
              id="bik"
              type="text"
              placeholder="044525225"
              value={formData.bik}
              onChange={(e) => handleBikChange(e.target.value)}
              disabled={!isEditing}
              className="w-full"
              maxLength={9}
            />
            {isEditing && formData.bik && formData.bik.length > 0 && formData.bik.length !== 9 && (
              <p className="text-xs text-muted-foreground">БИК должен состоять из 9 цифр</p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="corrAccount" className="text-sm font-medium text-foreground">
              Корреспондентский счет *
            </Label>
            <Input
              id="corrAccount"
              type="text"
              placeholder="30101810400000000225"
              value={formData.corrAccount}
              onChange={(e) => handleAccountChange('corrAccount', e.target.value)}
              disabled={!isEditing}
              className="w-full"
              maxLength={20}
            />
            {isEditing &&
              formData.corrAccount &&
              formData.corrAccount.length > 0 &&
              formData.corrAccount.length !== 20 && (
                <p className="text-xs text-muted-foreground">Корр. счет должен состоять из 20 цифр</p>
              )}
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="accountNumber" className="text-sm font-medium text-foreground">
            Расчетный счет *
          </Label>
          <Input
            id="accountNumber"
            type="text"
            placeholder="40702810138000000001"
            value={formData.accountNumber}
            onChange={(e) => handleAccountChange('accountNumber', e.target.value)}
            disabled={!isEditing}
            className="w-full"
            maxLength={20}
          />
          {isEditing &&
            formData.accountNumber &&
            formData.accountNumber.length > 0 &&
            formData.accountNumber.length !== 20 && (
              <p className="text-xs text-muted-foreground">Расчетный счет должен состоять из 20 цифр</p>
            )}
        </div>
      </div>

      <div className="mt-4 text-xs text-muted-foreground">* — обязательные поля для проведения финансовых операций</div>

      <div className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
        <p className="text-xs text-red-600 dark:text-red-400">
          ⚠️ Банковские реквизиты заполняются вручную и должны быть указаны точно
        </p>
      </div>
    </Card>
  )
})

FinancialBlock.displayName = 'FinancialBlock'
