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

  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月 · 客流规律 × 排班匹配 × 人效优化 · 103家门店</p>
      </div>

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

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