'use client'

import { useQuery } from '@apollo/client'
import { ShoppingCart, Package, ArrowLeft } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { GET_MY_CART } from '@/graphql/queries'

import { CartItems } from '../cart/cart-items'
import { CartSummary } from '../cart/cart-summary'

interface MarketRequestsProps {
  onBackToCategories?: () => void
}

export function MarketRequests({ onBackToCategories }: MarketRequestsProps) {
  const { data, loading, error } = useQuery(GET_MY_CART)

  const cart = data?.myCart
  const hasItems = cart?.items && cart.items.length > 0

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-4 border-white border-t-transparent mx-auto mb-4"></div>
          <p className="text-white/70">Загружаем заявки...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <ShoppingCart className="h-16 w-16 text-red-400/40 mx-auto mb-4" />
          <p className="text-red-400">Ошибка загрузки заявок</p>
          <p className="text-white/40 text-sm mt-2">{error.message}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="h-full w-full flex flex-col">
      {/* Заголовок */}
      <div className="flex items-center space-x-3 p-6 border-b border-white/10">
        {onBackToCategories && (
          <Button
            onClick={onBackToCategories}
            variant="ghost"
            size="sm"
            className="text-white/70 hover:text-white hover:bg-white/10 p-2"
          >
            <ArrowLeft className="h-5 w-5" />
          </Button>
        )}
        <ShoppingCart className="h-6 w-6 text-purple-400" />
        <div>
          <h1 className="text-xl font-bold text-white">Мои заявки</h1>
          <p className="text-white/60">
            {hasItems
              ? `${cart.totalItems} заявок на сумму ${new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(cart.totalPrice)}`
              : 'У вас пока нет заявок'}
          </p>
        </div>
      </div>

      {/* Основной контент */}
      <div className="flex-1 overflow-hidden">
        {hasItems ? (
          <div className="h-full grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
            {/* Заявки */}
            <div className="lg:col-span-2">
              <div className="glass-card h-full overflow-hidden">
                <CartItems cart={cart} />
              </div>
            </div>

            {/* Сводка заявок */}
            <div className="lg:col-span-1">
              <div className="glass-card h-fit">
                <CartSummary cart={cart} />
              </div>
            </div>
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center text-center p-8">
            <Package className="h-24 w-24 text-white/20 mb-6" />
            <h2 className="text-xl font-semibold text-white mb-2">Нет заявок</h2>
            <p className="text-white/60 mb-6 max-w-md">
              Добавьте товары в заявки из раздела &quot;Товары&quot;, чтобы создать заявку для поставщика
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
