"use client"

import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card } from '@/components/ui/card'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { SalesTab } from '@/components/seller-statistics/sales-tab'
import { AdvertisingTab } from '@/components/seller-statistics/advertising-tab'
import { DateRangePicker } from '@/components/ui/date-picker'
import { BarChart3, PieChart, TrendingUp, Calendar } from 'lucide-react'

export function SellerStatisticsDashboard() {
  const { getSidebarMargin } = useSidebar()
  const [selectedPeriod, setSelectedPeriod] = useState('week')
  const [useCustomDates, setUseCustomDates] = useState(false)
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-4 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="sales" className="h-full flex flex-col">
              <TabsList className="grid w-full grid-cols-3 bg-white/5 backdrop-blur border border-white/10 rounded-xl flex-shrink-0 h-11">
                <TabsTrigger 
                  value="sales" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
                >
                  <BarChart3 className="h-4 w-4" />
                  Продажи
                </TabsTrigger>
                <TabsTrigger 
                  value="advertising" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
                >
                  <TrendingUp className="h-4 w-4" />
                  Реклама
                </TabsTrigger>
                <TabsTrigger 
                  value="other" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
                >
                  <PieChart className="h-4 w-4" />
                  Иное
                </TabsTrigger>
              </TabsList>

              {/* Контент вкладок */}
              <div className="flex-1 overflow-hidden mt-3">
                <TabsContent value="sales" className="h-full m-0 overflow-hidden">
                  <SalesTab 
                    selectedPeriod={selectedPeriod} 
                    useCustomDates={useCustomDates}
                    startDate={startDate}
                    endDate={endDate}
                    onPeriodChange={setSelectedPeriod}
                    onUseCustomDatesChange={setUseCustomDates}
                  />
                </TabsContent>
                
                <TabsContent value="advertising" className="h-full m-0 overflow-hidden">
                  <AdvertisingTab
                    selectedPeriod={selectedPeriod} 
                    useCustomDates={useCustomDates}
                    startDate={startDate}
                    endDate={endDate}
                  />
                </TabsContent>
                
                <TabsContent value="other" className="h-full m-0 overflow-hidden">
                  <Card className="glass-card h-full overflow-hidden p-6">
                    <div className="flex items-center justify-center h-full">
                      <div className="text-center">
                        <PieChart className="h-12 w-12 text-white/40 mx-auto mb-4" />
                        <h3 className="text-lg font-semibold text-white mb-2">Прочая статистика</h3>
                        <p className="text-white/60">Раздел в разработке</p>
                      </div>
                    </div>
                  </Card>
                </TabsContent>
              </div>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}