'use client'

import { ArrowLeft, ShoppingCart, Users, Check } from 'lucide-react'
import React from 'react'

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

interface TabsHeaderProps {
  activeTab: 'cards' | 'wholesaler'
  onTabChange: (tab: 'cards' | 'wholesaler') => void
  onBack: () => void
  cartInfo?: {
    itemCount: number
    totalAmount: number
    formatCurrency: (amount: number) => string
  }
  onCartClick?: () => void
  onCreateSupply?: () => void
  canCreateSupply?: boolean
  isCreatingSupply?: boolean
}

export function TabsHeader({
  activeTab,
  onTabChange,
  onBack,
  cartInfo,
  onCartClick,
  onCreateSupply,
  canCreateSupply = false,
  isCreatingSupply = false,
}: TabsHeaderProps) {
  return (
    <div className="flex items-center justify-between mb-4">
      <div className="flex items-center space-x-4">
        <Button variant="ghost" size="sm" onClick={onBack} className="text-white/60 hover:text-white hover:bg-white/10">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Назад
        </Button>
        <h1 className="text-2xl font-bold text-white">Создание поставки</h1>

        {/* Кнопка корзины */}
        {cartInfo && cartInfo.itemCount > 0 && onCartClick && (
          <Button
            onClick={onCartClick}
            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
          >
            <ShoppingCart className="h-4 w-4 mr-2" />
            Корзина ({cartInfo.itemCount})
            {activeTab === 'supplier' && ` • ${cartInfo.formatCurrency(cartInfo.totalAmount)}`}
          </Button>
        )}

        {/* Кнопка создания поставки для таба карточек */}
        {activeTab === 'cards' && onCreateSupply && (
          <Button
            onClick={onCreateSupply}
            disabled={!canCreateSupply || isCreatingSupply}
            className="bg-white/20 hover:bg-white/30 text-white border-0"
          >
            <Check className="h-4 w-4 mr-2" />
            {isCreatingSupply ? 'Создание...' : 'Создать поставку'}
          </Button>
        )}
      </div>

      <div>
        <div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
          <button
            onClick={() => onTabChange('cards')}
            className={`px-4 py-2 text-sm rounded transition-all ${
              activeTab === 'cards' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white hover:bg-white/10'
            }`}
          >
            <ShoppingCart className="h-4 w-4 mr-1 inline" />
            Карточки
          </button>
          <button
            onClick={() => onTabChange('wholesaler')}
            className={`px-4 py-2 text-sm rounded transition-all ${
              activeTab === 'wholesaler' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white hover:bg-white/10'
            }`}
          >
            <Users className="h-4 w-4 mr-1 inline" />
            Поставщики
          </button>
        </div>
      </div>
    </div>
  )
}
