'use client'

import { useState } from 'react'

import { Sidebar } from '@/components/dashboard/sidebar'
import { Card } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useSidebar } from '@/hooks/useSidebar'

import { FavoritesDashboard } from '../favorites/favorites-dashboard'

import { MarketCategories } from './market-categories'
import { MarketProducts } from './market-products'
import { MarketRequests } from './market-requests'

export function MarketDashboard() {
  const { getSidebarMargin } = useSidebar()
  const [productsView, setProductsView] = useState<'categories' | 'products' | 'cart' | 'favorites'>('categories')
  const [selectedCategory, setSelectedCategory] = useState<{ id: string; name: string } | null>(null)

  const handleSelectCategory = (categoryId: string, categoryName: string) => {
    setSelectedCategory({ id: categoryId, name: categoryName })
    setProductsView('products')
  }

  const handleBackToCategories = () => {
    setProductsView('categories')
    setSelectedCategory(null)
  }

  const handleShowCart = () => {
    setProductsView('cart')
    setSelectedCategory(null)
  }

  const handleShowFavorites = () => {
    setProductsView('favorites')
    setSelectedCategory(null)
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        <div className="h-full w-full flex flex-col">
          {/* Основной контент с табами */}
          <div className="flex-1 overflow-hidden">
            <Tabs
              defaultValue="products"
              className="h-full flex flex-col"
              onValueChange={(value) => {
                if (value === 'products') {
                  // Сбрасываем состояние когда переходим на вкладку товаров
                  setProductsView('categories')
                  setSelectedCategory(null)
                }
              }}
            >
              <TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0">
                <TabsTrigger
                  value="products"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Товары
                </TabsTrigger>
                <TabsTrigger
                  value="requests"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Заявки
                </TabsTrigger>
              </TabsList>

              <TabsContent value="requests" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketRequests />
                </Card>
              </TabsContent>

              <TabsContent value="products" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-0">
                  {productsView === 'categories' ? (
                    <MarketCategories
                      onSelectCategory={handleSelectCategory}
                      onShowCart={handleShowCart}
                      onShowFavorites={handleShowFavorites}
                    />
                  ) : productsView === 'products' ? (
                    <MarketProducts
                      selectedCategoryId={selectedCategory?.id}
                      selectedCategoryName={selectedCategory?.name}
                      onBackToCategories={handleBackToCategories}
                    />
                  ) : productsView === 'cart' ? (
                    <MarketRequests onBackToCategories={handleBackToCategories} />
                  ) : (
                    <FavoritesDashboard onBackToCategories={handleBackToCategories} />
                  )}
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}
