'use client'

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 { ExchangeBusinessTab } from './tabs/business-tab'
import { ExchangeInvestmentsTab } from './tabs/investments-tab'
import type { ExchangeDashboardProps } from './types/exchange.types'

export function ExchangeDashboard({ userRole = 'SELLER' }: ExchangeDashboardProps) {
  const { getSidebarMargin } = useSidebar()

  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 items-center space-x-3 mb-6 flex-shrink-0">
            <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
              <span className="text-white font-bold text-xl">₿</span>
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">Биржа</h1>
              <p className="text-white/60">Инвестиции и бизнес-возможности</p>
            </div>
          </div>

          {/* Основной контент с табами */}
          <div className="flex-1 overflow-hidden">
            <Tabs defaultValue="investments" className="h-full flex flex-col">
              <TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0">
                <TabsTrigger
                  value="investments"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Инвестиции
                </TabsTrigger>
                <TabsTrigger
                  value="business"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Бизнес
                </TabsTrigger>
              </TabsList>

              <TabsContent value="investments" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <ExchangeInvestmentsTab userRole={userRole} />
                </Card>
              </TabsContent>

              <TabsContent value="business" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <ExchangeBusinessTab userRole={userRole} />
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}