import { Phone, Mail, MessageCircle } 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 { ContactsBlockProps } from '../types/user-settings.types'

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

    return (
      <Card className="glass-card p-6">
        <div className="flex items-center space-x-3 mb-6">
          <div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
            <Phone className="w-5 h-5 text-blue-500" />
          </div>
          <h3 className="text-lg font-semibold text-foreground">Контактные данные</h3>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-2">
            <Label htmlFor="orgPhone" className="text-sm font-medium text-foreground">
              Телефон организации *
            </Label>
            <Input
              id="orgPhone"
              ref={phoneInputRef}
              type="tel"
              placeholder="+7 (999) 999-99-99"
              value={formData.orgPhone}
              onChange={(e) => handleInputChange('orgPhone', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="managerName" className="text-sm font-medium text-foreground">
              Имя управляющего *
            </Label>
            <Input
              id="managerName"
              type="text"
              placeholder="Иван Иванов"
              value={formData.managerName}
              onChange={(e) => handleInputChange('managerName', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="email" className="text-sm font-medium text-foreground">
              <div className="flex items-center space-x-2">
                <Mail className="w-4 h-4" />
                <span>Email *</span>
              </div>
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="example@company.com"
              value={formData.email}
              onChange={(e) => handleInputChange('email', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="telegram" className="text-sm font-medium text-foreground">
              <div className="flex items-center space-x-2">
                <MessageCircle className="w-4 h-4" />
                <span>Telegram</span>
              </div>
            </Label>
            <Input
              id="telegram"
              type="text"
              placeholder="@username"
              value={formData.telegram}
              onChange={(e) => handleInputChange('telegram', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>

          <div className="space-y-2 md:col-span-2">
            <Label htmlFor="whatsapp" className="text-sm font-medium text-foreground">
              WhatsApp
            </Label>
            <Input
              id="whatsapp"
              ref={whatsappInputRef}
              type="tel"
              placeholder="+7 (999) 999-99-99"
              value={formData.whatsapp}
              onChange={(e) => handleInputChange('whatsapp', e.target.value)}
              disabled={!isEditing}
              className="w-full"
            />
          </div>
        </div>

        <div className="mt-4 text-xs text-muted-foreground">* — обязательные поля</div>
      </Card>
    )
  },
)

ContactsBlock.displayName = 'ContactsBlock'
