import { Search } from 'lucide-react'
import React from 'react'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

import { TableHeader } from '../components/TableHeader'
import type { TableHeadersBlockProps, StoreDataField } from '../types'

/**
 * Блок заголовков таблицы дашборда склада
 * 
 * Содержит:
 * - Строку поиска по магазинам
 * - Кнопку переключения дополнительных значений
 * - Заголовки колонок с сортировкой
 */
export const TableHeadersBlock = React.memo<TableHeadersBlockProps>(({
  searchTerm,
  sortField,
  sortOrder,
  showAdditionalValues,
  onSearchChange,
  onSort,
  onToggleAdditionalValues,
}) => {
  return (
    <div className="space-y-4">
      {/* Панель управления */}
      <div className="flex items-center justify-between gap-4 mb-3">
        {/* Поиск */}
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
          <input
            placeholder="Поиск магазинов..."
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="w-full pl-9 pr-3 py-1.5 bg-white/10 border border-white/20 rounded text-white placeholder-white/40 focus:outline-none focus:bg-white/20 text-sm"
          />
        </div>

        {/* Переключатель дополнительных значений */}
        <button
          onClick={onToggleAdditionalValues}
          className={`px-3 py-1.5 rounded text-xs transition-colors ${
            showAdditionalValues 
              ? 'bg-blue-500/20 text-blue-300 border border-blue-500/30' 
              : 'bg-white/10 text-white/60 border border-white/20 hover:bg-white/20'
          }`}
        >
          {showAdditionalValues ? 'Скрыть изменения' : 'Показать изменения'}
        </button>
      </div>

      {/* Заголовки таблицы */}
      <div className="bg-white/5 rounded-lg border border-white/10">
        <div className="grid grid-cols-8 gap-4 p-3 font-medium text-xs text-blue-100 uppercase tracking-wider border-b border-white/10">
          {/* Название магазина */}
          <TableHeader
            title="Магазин"
            field="name"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            className="col-span-2"
          />

          {/* Товары */}
          <TableHeader
            title="Товары"
            field="products"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            showAdditional={showAdditionalValues}
            additionalTitle="±24ч"
          />

          {/* Готовые товары */}
          <TableHeader
            title="Готовые"
            field="goods"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            showAdditional={showAdditionalValues}
            additionalTitle="±24ч"
          />

          {/* Брак */}
          <TableHeader
            title="Брак"
            field="defects"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            showAdditional={showAdditionalValues}
            additionalTitle="±24ч"
          />

          {/* Расходники селлера */}
          <TableHeader
            title="Расходники"
            field="sellerSupplies"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            showAdditional={showAdditionalValues}
            additionalTitle="±24ч"
          />

          {/* Возвраты с ПВЗ */}
          <TableHeader
            title="Возвраты ПВЗ"
            field="pvzReturns"
            sortField={sortField}
            sortOrder={sortOrder}
            onSort={onSort}
            showAdditional={showAdditionalValues}
            additionalTitle="±24ч"
          />

          {/* Действия */}
          <div className="text-center">
            Действия
          </div>
        </div>
      </div>
    </div>
  )
})

TableHeadersBlock.displayName = 'TableHeadersBlock'