'use client'

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

import { formatCurrency } from '@/lib/utils'

// Интерфейс рецептуры согласно GraphQL схеме
interface RecipeData {
  services: Array<{ 
    id: string
    name: string
    price: number 
  }>
  fulfillmentConsumables: Array<{ 
    id: string
    name: string
    pricePerUnit: number 
  }>
  sellerConsumables: Array<{ 
    id: string
    name: string
    price: number 
  }>
  marketplaceCardId?: string
}

interface RecipeDisplayProps {
  recipe: RecipeData
  variant?: 'compact' | 'detailed'
  className?: string
}

// Компонент для отображения рецептуры товара
export function RecipeDisplay({ recipe, variant = 'compact', className = '' }: RecipeDisplayProps) {
  const totalServicesPrice = recipe.services.reduce((sum, service) => sum + service.price, 0)

  if (variant === 'compact') {
    return (
      <div className={`space-y-1 text-sm ${className}`}>
        {recipe.services.length > 0 && (
          <div>
            <span className="font-medium text-white/80">Услуги:</span>{' '}
            <span className="text-white/60">
              {recipe.services.map(s => s.name).join(', ')}
              {' '}(+{formatCurrency(totalServicesPrice)})
            </span>
          </div>
        )}
        {recipe.fulfillmentConsumables.length > 0 && (
          <div>
            <span className="font-medium text-white/80">Расходники ФФ:</span>{' '}
            <span className="text-white/60">
              {recipe.fulfillmentConsumables.map(c => c.name).join(', ')}
            </span>
          </div>
        )}
        {recipe.sellerConsumables.length > 0 && (
          <div>
            <span className="font-medium text-white/80">Расходники селлера:</span>{' '}
            <span className="text-white/60">
              {recipe.sellerConsumables.map(c => c.name).join(', ')}
            </span>
          </div>
        )}
      </div>
    )
  }

  // Детальный вариант с ценами и разбивкой
  return (
    <div className={`space-y-3 ${className}`}>
      <div className="flex items-center gap-2 text-white/80 font-medium">
        <DollarSign className="h-4 w-4 text-yellow-400" />
        <span>Рецептура товара</span>
      </div>
      
      {recipe.services.length > 0 && (
        <div className="bg-white/5 rounded-lg p-3">
          <h5 className="font-medium text-white/90 mb-2">Услуги фулфилмента</h5>
          <div className="space-y-1">
            {recipe.services.map((service) => (
              <div key={service.id} className="flex justify-between items-center text-sm">
                <span className="text-white/70">{service.name}</span>
                <span className="text-green-400 font-mono">
                  +{formatCurrency(service.price)}
                </span>
              </div>
            ))}
            <div className="border-t border-white/10 pt-1 mt-2">
              <div className="flex justify-between items-center text-sm font-medium">
                <span className="text-white/80">Итого услуги:</span>
                <span className="text-green-400 font-mono">
                  +{formatCurrency(totalServicesPrice)}
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      {recipe.fulfillmentConsumables.length > 0 && (
        <div className="bg-white/5 rounded-lg p-3">
          <h5 className="font-medium text-white/90 mb-2">Расходники фулфилмента</h5>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {recipe.fulfillmentConsumables.map((consumable) => (
              <div key={consumable.id} className="flex justify-between items-center text-sm">
                <span className="text-white/70">{consumable.name}</span>
                <span className="text-blue-400 font-mono text-xs">
                  {formatCurrency(consumable.pricePerUnit)}/шт
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {recipe.sellerConsumables.length > 0 && (
        <div className="bg-white/5 rounded-lg p-3">
          <h5 className="font-medium text-white/90 mb-2">Расходники селлера</h5>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {recipe.sellerConsumables.map((consumable) => (
              <div key={consumable.id} className="flex justify-between items-center text-sm">
                <span className="text-white/70">{consumable.name}</span>
                <span className="text-purple-400 font-mono text-xs">
                  {formatCurrency(consumable.price)}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {recipe.marketplaceCardId && (
        <div className="text-xs text-white/50">
          Связана с карточкой маркетплейса: {recipe.marketplaceCardId}
        </div>
      )}
    </div>
  )
}

// Компонент-обертка для использования в таблицах
export function TableRecipeDisplay({ recipe }: { recipe: RecipeData }) {
  return (
    <div className="text-white/60 text-sm space-y-1">
      {recipe.services.length > 0 && (
        <div>
          <span className="font-medium">Услуги:</span>{' '}
          {recipe.services.map(s => s.name).join(', ')}
          {' '}(+{formatCurrency(recipe.services.reduce((sum, s) => sum + s.price, 0))})
        </div>
      )}
      {recipe.fulfillmentConsumables.length > 0 && (
        <div>
          <span className="font-medium">Расходники ФФ:</span>{' '}
          {recipe.fulfillmentConsumables.map(c => c.name).join(', ')}
        </div>
      )}
      {recipe.sellerConsumables.length > 0 && (
        <div>
          <span className="font-medium">Расходники селлера:</span>{' '}
          {recipe.sellerConsumables.map(c => c.name).join(', ')}
        </div>
      )}
    </div>
  )
}