import { useState } from 'react'
import { Tabs } from '@/components/Tabs'
import { MonthPicker } from '@/components/MonthPicker'
import { OverviewTab } from '@/components/cost-analysis/OverviewTab'
import { ProfitabilityTab } from '@/components/cost-analysis/ProfitabilityTab'
import { MaterialTab } from '@/components/cost-analysis/MaterialTab'
import { BomTab } from '@/components/cost-analysis/BomTab'
import { SupplyTab } from '@/components/cost-analysis/SupplyTab'
import { PackagingTab } from '@/components/cost-analysis/PackagingTab'
import { QualityTab } from '@/components/cost-analysis/QualityTab'
import { StoreTab } from '@/components/cost-analysis/StoreTab'
import { ExploreTab } from '@/components/cost-analysis/ExploreTab'
import { AdjustmentTab } from '@/components/cost-analysis/AdjustmentTab'

const TABS = [
  { key: 'overview', label: '成本总览' },
  { key: 'profitability', label: '菜品盈利' },
  { key: 'material', label: '原料差异' },
  { key: 'bom', label: 'BOM与配方' },
  { key: 'supply', label: '供应链与精简' },
  { key: 'packaging', label: '包装耗材' },
  { key: 'quality', label: '数据质量' },
  { key: 'store', label: '门店成本' },
  { key: 'explore', label: '可视化探索' },
  { key: 'adjustment', label: '调整管理' },
]

export function CostAnalysisPage() {
  const [activeTab, setActiveTab] = useState('overview')
  const [month, setMonth] = useState('2026-04')

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold">菜品成本</h1>
          <p className="mt-0.5 text-xs text-muted-foreground">基于BOM与成本报表的多维度运营分析</p>
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>
      <Tabs tabs={TABS} active={activeTab} onChange={setActiveTab} />
      <div className="mt-4">
        {activeTab === 'overview' && <OverviewTab month={month} />}
        {activeTab === 'profitability' && <ProfitabilityTab month={month} />}
        {activeTab === 'material' && <MaterialTab month={month} />}
        {activeTab === 'bom' && <BomTab month={month} />}
        {activeTab === 'supply' && <SupplyTab month={month} />}
        {activeTab === 'packaging' && <PackagingTab month={month} />}
        {activeTab === 'quality' && <QualityTab month={month} />}
        {activeTab === 'store' && <StoreTab month={month} />}
        {activeTab === 'explore' && <ExploreTab month={month} />}
        {activeTab === 'adjustment' && <AdjustmentTab month={month} />}
      </div>
    </div>
  )
}
