import { useState } from 'react'
import { Tabs } from '@/components/Tabs'
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')

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold">门店营业费用分析</h1>
        <p className="text-sm text-muted-foreground mt-1">2026年4月 · 89家经营门店 · 费用合计 ¥31,811,801</p>
      </div>

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

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