import { useState } from 'react'
import { Tabs } from '@/components/Tabs'
import { MonthPicker } from '@/components/MonthPicker'
import { ExpenseOverviewTab } from '@/components/store-expense/ExpenseOverviewTab'
import { StoreRankingTab } from '@/components/store-expense/StoreRankingTab'
import { ContributionTab } from '@/components/store-expense/ContributionTab'
import { RentRiskTab } from '@/components/store-expense/RentRiskTab'
import { DeliveryTab } from '@/components/store-expense/DeliveryTab'
import { EfficiencyTab } from '@/components/store-expense/EfficiencyTab'
import { FixedVariableTab } from '@/components/store-expense/FixedVariableTab'
import { BreakEvenTab } from '@/components/store-expense/BreakEvenTab'
import { LossDiagnosisTab } from '@/components/store-expense/LossDiagnosisTab'
import { StoreEvaluationTab } from '@/components/store-expense/StoreEvaluationTab'

const TABS = [
  { key: 'overview', label: '费用总览' },
  { key: 'ranking', label: '门店费用率排名' },
  { key: 'contribution', label: '门店贡献利润' },
  { key: 'rent', label: '房租及租约风险' },
  { key: 'delivery', label: '外卖佣金分析' },
  { key: 'efficiency', label: '人效坪效' },
  { key: 'fixed-variable', label: '固定/变动费用' },
  { key: 'break-even', label: '盈亏平衡分析' },
  { key: 'loss-diagnosis', label: '亏损门店诊断' },
  { key: 'evaluation', label: '关停/续租/改造评估' },
]

export function StoreExpensePage() {
  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-2xl font-bold">门店营业费用分析</h1>
          <p className="text-sm text-muted-foreground mt-1">{month} · 费用结构与贡献分析</p>
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>

      <Tabs tabs={TABS} active={activeTab} onChange={setActiveTab} />

      <div>
        {activeTab === 'overview' && <ExpenseOverviewTab month={month} />}
        {activeTab === 'ranking' && <StoreRankingTab month={month} />}
        {activeTab === 'contribution' && <ContributionTab month={month} />}
        {activeTab === 'rent' && <RentRiskTab month={month} />}
        {activeTab === 'delivery' && <DeliveryTab month={month} />}
        {activeTab === 'efficiency' && <EfficiencyTab month={month} />}
        {activeTab === 'fixed-variable' && <FixedVariableTab month={month} />}
        {activeTab === 'break-even' && <BreakEvenTab month={month} />}
        {activeTab === 'loss-diagnosis' && <LossDiagnosisTab month={month} />}
        {activeTab === 'evaluation' && <StoreEvaluationTab month={month} />}
      </div>
    </div>
  )
}
