import { useState } from 'react'
import { Tabs } from '@/components/Tabs'
import { MonthPicker } from '@/components/MonthPicker'
import { OverallAnalysisTab } from '@/components/smart-scheduling/OverallAnalysisTab'
import { StaffingForecastTab } from '@/components/smart-scheduling/StaffingForecastTab'
import { TrafficHeatmapTab } from '@/components/smart-scheduling/TrafficHeatmapTab'
import { StaffingMatchTab } from '@/components/smart-scheduling/StaffingMatchTab'
import { EfficiencyBenchmarkTab } from '@/components/smart-scheduling/EfficiencyBenchmarkTab'
import { SchedulingSuggestionTab } from '@/components/smart-scheduling/SchedulingSuggestionTab'
import { AttendanceAlertTab } from '@/components/smart-scheduling/AttendanceAlertTab'
import { EmployeeAnalysisTab } from '@/components/smart-scheduling/EmployeeAnalysisTab'

const TABS = [
  { key: 'overall', label: '总体智能分析' },
  { key: 'forecast', label: '人员预测' },
  { key: 'traffic', label: '客流热力图' },
  { key: 'match', label: '排班匹配度' },
  { key: 'efficiency', label: '人效对标' },
  { key: 'suggestion', label: '排班建议' },
  { key: 'alert', label: '考勤预警' },
  { key: 'employee', label: '员工分析' },
]

export function SmartSchedulingPage() {
  const [activeTab, setActiveTab] = useState('overall')
  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">客流规律 × 排班匹配 × 人效优化 · 103家门店</p>
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>

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

      <div>
        {activeTab === 'overall' && <OverallAnalysisTab month={month} />}
        {activeTab === 'forecast' && <StaffingForecastTab month={month} />}
        {activeTab === 'traffic' && <TrafficHeatmapTab month={month} />}
        {activeTab === 'match' && <StaffingMatchTab month={month} />}
        {activeTab === 'efficiency' && <EfficiencyBenchmarkTab month={month} />}
        {activeTab === 'suggestion' && <SchedulingSuggestionTab month={month} />}
        {activeTab === 'alert' && <AttendanceAlertTab month={month} />}
        {activeTab === 'employee' && <EmployeeAnalysisTab month={month} />}
      </div>
    </div>
  )
}
