import { FileText, Calendar } 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 { LegalBlockProps } from '../types/user-settings.types'

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

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

  return (
    <Card className="glass-card p-6">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
          <FileText className="w-5 h-5 text-purple-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="fullName" className="text-sm font-medium text-foreground">
            Полное наименование
          </Label>
          <Input
            id="fullName"
            type="text"
            placeholder="Общество с ограниченной ответственностью..."
            value={formData.fullName}
            onChange={(e) => handleInputChange('fullName', 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="ogrn" className="text-sm font-medium text-foreground">
              ОГРН
            </Label>
            <Input
              id="ogrn"
              type="text"
              placeholder="1234567890123"
              value={formData.ogrn}
              onChange={(e) => handleOgrnChange(e.target.value)}
              disabled={!isEditing}
              className="w-full"
              maxLength={15}
            />
            {isEditing && formData.ogrn && (formData.ogrn.length < 13 || formData.ogrn.length > 15) && (
              <p className="text-xs text-muted-foreground">ОГРН должен содержать от 13 до 15 цифр</p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="registrationPlace" className="text-sm font-medium text-foreground">
              <div className="flex items-center space-x-2">
                <Calendar className="w-4 h-4" />
                <span>Место регистрации</span>
              </div>
            </Label>
            <Input
              id="registrationPlace"
              type="text"
              placeholder="г. Москва"
              value={formData.registrationPlace}
              onChange={(e) => handleInputChange('registrationPlace', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>
        </div>
      </div>

      <div className="mt-4 p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg">
        <p className="text-xs text-amber-600 dark:text-amber-400">
          ℹ️ Эти данные могут быть автоматически заполнены при вводе ИНН в разделе &quot;Данные организации&quot;
        </p>
      </div>
    </Card>
  )
})

LegalBlock.displayName = 'LegalBlock'
