'use client'

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

import { Sidebar } from '@/components/dashboard/sidebar'
import { Card } from '@/components/ui/card'
import { GET_MY_CART } from '@/graphql/queries'

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

export function CartDashboard() {
  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-screen flex overflow-hidden">
        <Sidebar />
        <main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
          <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>
        </main>
      </div>
    )
  }

  if (error) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
          <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>
        </main>
      </div>
    )
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
        <div className="h-full w-full flex flex-col">
          {/* Заголовок */}
          <div className="flex items-center space-x-3 mb-6">
            <ShoppingCart className="h-6 w-6 text-purple-400" />
            <div>
              <h1 className="text-2xl 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">
                {/* Товары в корзине */}
                <div className="lg:col-span-2">
                  <Card className="glass-card h-full overflow-hidden">
                    <CartItems cart={cart} />
                  </Card>
                </div>

                {/* Сводка заказа */}
                <div className="lg:col-span-1">
                  <Card className="glass-card h-fit">
                    <CartSummary cart={cart} />
                  </Card>
                </div>
              </div>
            ) : (
              <Card className="glass-card h-full overflow-hidden p-8">
                <div className="h-full flex flex-col items-center justify-center text-center">
                  <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">Добавьте товары из маркета, чтобы оформить заказ</p>
                  <button
                    onClick={() => (window.location.href = '/market')}
                    className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white px-6 py-3 rounded-lg font-medium transition-all"
                  >
                    Перейти в маркет
                  </button>
                </div>
              </Card>
            )}
          </div>
        </div>
      </main>
    </div>
  )
}
