import { Key, ExternalLink } 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 { IntegrationsBlockProps } from '../types/user-settings.types'

export const IntegrationsBlock = memo<IntegrationsBlockProps>(({ formData, setFormData, isEditing }) => {
  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-indigo-500/20 rounded-lg flex items-center justify-center">
          <Key className="w-5 h-5 text-indigo-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="wildberriesApiKey" className="text-sm font-medium text-foreground">
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-purple-600 rounded-sm" />
              <span>Wildberries API ключ</span>
              <ExternalLink className="w-3 h-3 text-muted-foreground" />
            </div>
          </Label>
          <Input
            id="wildberriesApiKey"
            type="password"
            placeholder="Введите API ключ Wildberries"
            value={formData.wildberriesApiKey}
            onChange={(e) => handleInputChange('wildberriesApiKey', e.target.value)}
            disabled={!isEditing}
            className="w-full font-mono"
          />
          <p className="text-xs text-muted-foreground">
            Получить ключ можно в личном кабинете Wildberries → Настройки → Доступ к API
          </p>
        </div>

        <div className="space-y-2">
          <Label htmlFor="ozonApiKey" className="text-sm font-medium text-foreground">
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-blue-600 rounded-sm" />
              <span>Ozon API ключ</span>
              <ExternalLink className="w-3 h-3 text-muted-foreground" />
            </div>
          </Label>
          <Input
            id="ozonApiKey"
            type="password"
            placeholder="Введите API ключ Ozon"
            value={formData.ozonApiKey}
            onChange={(e) => handleInputChange('ozonApiKey', e.target.value)}
            disabled={!isEditing}
            className="w-full font-mono"
          />
          <p className="text-xs text-muted-foreground">
            Получить ключ можно в кабинете продавца Ozon → Настройки → Ключи API
          </p>
        </div>
      </div>

      <div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
        <div className="flex items-start space-x-3">
          <Key className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
          <div className="space-y-2">
            <h4 className="text-sm font-medium text-blue-600 dark:text-blue-400">Зачем нужны API ключи?</h4>
            <ul className="text-xs text-blue-600 dark:text-blue-400 space-y-1">
              <li>• Автоматическая синхронизация товаров</li>
              <li>• Обновление остатков и цен</li>
              <li>• Получение заказов и отчетов</li>
              <li>• Управление рекламными кампаниями</li>
            </ul>
          </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">
          🔐 API ключи хранятся в зашифрованном виде и используются только для интеграции с маркетплейсами
        </p>
      </div>
    </Card>
  )
})

IntegrationsBlock.displayName = 'IntegrationsBlock'
