/**
 * БЛОК МОДАЛЬНОГО ОКНА ПОСТАВЩИКА
 *
 * Выделен из direct-supply-creation.tsx
 * Форма создания нового поставщика с валидацией
 */

'use client'

import { User, Phone, MapPin, Building } from 'lucide-react'
import React from 'react'

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { PhoneInput } from '@/components/ui/phone-input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

import type { SupplierModalBlockProps } from '../types/direct-supply.types'

const markets = [
  { value: 'sadovod', label: 'Садовод' },
  { value: 'tyak-moscow', label: 'ТЯК Москва' },
]

export const SupplierModalBlock = React.memo(function SupplierModalBlock({
  showSupplierModal,
  newSupplier,
  supplierErrors,
  creatingSupplier,
  onClose,
  onSupplierChange,
  onCreateSupplier,
}: SupplierModalBlockProps) {
  return (
    <Dialog open={showSupplierModal} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <User className="h-5 w-5" />
            <span>Добавить поставщика</span>
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {/* Название поставщика */}
          <div>
            <Label htmlFor="supplier-name" className="text-white/80">
              <Building className="h-4 w-4 inline mr-2" />
              Название поставщика *
            </Label>
            <Input
              id="supplier-name"
              type="text"
              value={newSupplier.name}
              onChange={(e) => onSupplierChange('name', e.target.value)}
              placeholder="ООО 'Поставщик'"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
            {supplierErrors.name && <p className="text-red-400 text-xs mt-1">{supplierErrors.name}</p>}
          </div>

          {/* Контактное лицо */}
          <div>
            <Label htmlFor="contact-name" className="text-white/80">
              <User className="h-4 w-4 inline mr-2" />
              Контактное лицо *
            </Label>
            <Input
              id="contact-name"
              type="text"
              value={newSupplier.contactName}
              onChange={(e) => onSupplierChange('contactName', e.target.value)}
              placeholder="Иван Иванов"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
            {supplierErrors.contactName && <p className="text-red-400 text-xs mt-1">{supplierErrors.contactName}</p>}
          </div>

          {/* Телефон */}
          <div>
            <Label htmlFor="phone" className="text-white/80">
              <Phone className="h-4 w-4 inline mr-2" />
              Телефон *
            </Label>
            <PhoneInput
              id="phone"
              value={newSupplier.phone}
              onChange={(value) => onSupplierChange('phone', value)}
              placeholder="+7 (999) 123-45-67"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
            {supplierErrors.phone && <p className="text-red-400 text-xs mt-1">{supplierErrors.phone}</p>}
          </div>

          {/* Рынок */}
          <div>
            <Label htmlFor="market" className="text-white/80">
              <MapPin className="h-4 w-4 inline mr-2" />
              Рынок
            </Label>
            <Select value={newSupplier.market} onValueChange={(value) => onSupplierChange('market', value)}>
              <SelectTrigger className="bg-white/10 border-white/20 text-white">
                <SelectValue placeholder="Выберите рынок" />
              </SelectTrigger>
              <SelectContent>
                {markets.map((market) => (
                  <SelectItem key={market.value} value={market.value}>
                    {market.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Адрес */}
          <div>
            <Label htmlFor="address" className="text-white/80">
              Адрес
            </Label>
            <Input
              id="address"
              type="text"
              value={newSupplier.address}
              onChange={(e) => onSupplierChange('address', e.target.value)}
              placeholder="Адрес поставщика"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
          </div>

          {/* Место (павильон) */}
          <div>
            <Label htmlFor="place" className="text-white/80">
              Место/Павильон
            </Label>
            <Input
              id="place"
              type="text"
              value={newSupplier.place}
              onChange={(e) => onSupplierChange('place', e.target.value)}
              placeholder="Павильон 123, место 45"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
          </div>

          {/* Telegram */}
          <div>
            <Label htmlFor="telegram" className="text-white/80">
              Telegram
            </Label>
            <Input
              id="telegram"
              type="text"
              value={newSupplier.telegram}
              onChange={(e) => onSupplierChange('telegram', e.target.value)}
              placeholder="@username"
              className="bg-white/10 border-white/20 text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40"
            />
            {supplierErrors.telegram && <p className="text-red-400 text-xs mt-1">{supplierErrors.telegram}</p>}
          </div>
        </div>

        {/* Кнопки */}
        <div className="flex justify-end space-x-3 pt-4">
          <Button
            onClick={onClose}
            variant="outline"
            className="text-white border-white/20 hover:bg-white/10"
            disabled={creatingSupplier}
          >
            Отмена
          </Button>
          <Button
            onClick={onCreateSupplier}
            disabled={creatingSupplier}
            className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white"
          >
            {creatingSupplier ? (
              <div className="flex items-center space-x-2">
                <div className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></div>
                <span>Создание...</span>
              </div>
            ) : (
              'Создать поставщика'
            )}
          </Button>
        </div>

        {/* Информация */}
        <div className="mt-4 p-3 bg-blue-500/10 border border-blue-400/30 rounded-lg">
          <p className="text-blue-300 text-xs">
            <strong>Обязательные поля:</strong> название, контактное лицо, телефон.
            <br />
            <strong>Telegram:</strong> формат @username (5-32 символа).
          </p>
        </div>
      </DialogContent>
    </Dialog>
  )
})
