import { Settings, Store } from 'lucide-react'
import React, { memo } from 'react'

import { Card } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

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

export const MarketBlock = memo<MarketBlockProps>(({ formData, setFormData, isEditing }) => {
  const handleMarketChange = (value: string) => {
    setFormData({
      ...formData,
      market: value,
    })
  }

  const getMarketInfo = (market: string) => {
    switch (market) {
      case 'wildberries':
        return {
          name: 'Wildberries',
          description: 'Крупнейший российский маркетплейс',
          color: 'bg-purple-500',
          features: ['Автоматическая обработка заказов', 'Синхронизация остатков', 'Аналитика продаж'],
        }
      case 'ozon':
        return {
          name: 'Ozon',
          description: 'Ведущий российский e-commerce маркетплейс',
          color: 'bg-blue-500',
          features: ['Интеграция с FBO/FBS', 'Управление ценами', 'Отчеты по продажам'],
        }
      case 'yandex':
        return {
          name: 'Яндекс.Маркет',
          description: 'Маркетплейс от Яндекса',
          color: 'bg-red-500',
          features: ['Быстрая загрузка товаров', 'Аналитика конверсий', 'Продвижение товаров'],
        }
      case 'avito':
        return {
          name: 'Авито',
          description: 'Платформа объявлений и продаж',
          color: 'bg-green-500',
          features: ['Размещение объявлений', 'Автоподъем', 'Статистика просмотров'],
        }
      case 'multiple':
        return {
          name: 'Мультимаркетплейс',
          description: 'Работа с несколькими площадками',
          color: 'bg-gradient-to-r from-purple-500 to-blue-500',
          features: ['Единая панель управления', 'Синхронизация между площадками', 'Сводная аналитика'],
        }
      default:
        return {
          name: 'Не выбран',
          description: 'Выберите основной маркетплейс для работы',
          color: 'bg-gray-500',
          features: [],
        }
    }
  }

  const marketInfo = getMarketInfo(formData.market)

  return (
    <Card className="glass-card p-6">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
          <Store className="w-5 h-5 text-orange-500" />
        </div>
        <h3 className="text-lg font-semibold text-foreground">Рабочий маркетплейс</h3>
      </div>

      <div className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="market" className="text-sm font-medium text-foreground">
            <div className="flex items-center space-x-2">
              <Settings className="w-4 h-4" />
              <span>Основной маркетплейс</span>
            </div>
          </Label>
          <Select value={formData.market} onValueChange={handleMarketChange} disabled={!isEditing}>
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Выберите маркетплейс" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">Не выбран</SelectItem>
              <SelectItem value="wildberries">Wildberries</SelectItem>
              <SelectItem value="ozon">Ozon</SelectItem>
              <SelectItem value="yandex">Яндекс.Маркет</SelectItem>
              <SelectItem value="avito">Авито</SelectItem>
              <SelectItem value="multiple">Несколько площадок</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {formData.market && formData.market !== 'none' && (
          <div className="p-4 border border-border rounded-lg">
            <div className="flex items-center space-x-3 mb-3">
              <div className={`w-3 h-3 rounded-full ${marketInfo.color}`} />
              <h4 className="font-medium text-foreground">{marketInfo.name}</h4>
            </div>
            <p className="text-sm text-muted-foreground mb-4">{marketInfo.description}</p>

            {marketInfo.features.length > 0 && (
              <div>
                <h5 className="text-sm font-medium text-foreground mb-2">Доступные возможности:</h5>
                <ul className="space-y-1">
                  {marketInfo.features.map((feature, index) => (
                    <li key={index} className="text-xs text-muted-foreground flex items-center space-x-2">
                      <div className="w-1.5 h-1.5 bg-green-500 rounded-full" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        )}
      </div>

      <div className="mt-6 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
        <p className="text-xs text-blue-600 dark:text-blue-400">
          💡 Выбор маркетплейса влияет на доступные функции и настройки интерфейса
        </p>
      </div>
    </Card>
  )
})

MarketBlock.displayName = 'MarketBlock'
