import { useState, lazy, Suspense } from 'react'
import { Layers, Wallet, LayoutTemplate, Clock, Receipt, Loader2 } from 'lucide-react'

const BatchManager = lazy(() => import('./money/BatchTab').then(m => ({ default: m.BatchManager })))
const TemplateManager = lazy(() => import('./money/TemplateTab').then(m => ({ default: m.TemplateManager })))
const OvertimeCalculator = lazy(() => import('./money/OvertimeTab').then(m => ({ default: m.OvertimeCalculator })))
const PayslipManager = lazy(() => import('./money/PayslipTab').then(m => ({ default: m.PayslipManager })))

type Tab = 'batch' | 'template' | 'overtime' | 'payslip'

export default function Money() {
  const [tab, setTab] = useState<Tab>('batch')

  const tabs: { key: Tab; label: string; icon: React.ReactNode }[] = [
    { key: 'batch', label: '发薪批次', icon: <Layers className="w-4 h-4" /> },
    { key: 'template', label: '薪酬模版', icon: <LayoutTemplate className="w-4 h-4" /> },
    { key: 'overtime', label: '加班费计算', icon: <Clock className="w-4 h-4" /> },
    { key: 'payslip', label: '工资条管理', icon: <Receipt className="w-4 h-4" /> },
  ]

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Wallet className="w-5 h-5 text-primary" />
        <div>
          <h1 className="text-base font-semibold">薪税管理</h1>
          <p className="mt-1 text-sm text-gray-500">统一管理发薪批次、工资条及加班薪酬</p>
        </div>
      </div>

      <div className="flex gap-1 border-b overflow-x-auto">
        {tabs.map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
              tab === t.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
          >
            {t.icon}
            {t.label}
          </button>
        ))}
      </div>

      <Suspense fallback={<div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-gray-400" /></div>}>
        {tab === 'batch' && <BatchManager />}
        {tab === 'template' && <TemplateManager />}
        {tab === 'overtime' && <OvertimeCalculator />}
        {tab === 'payslip' && <PayslipManager />}
      </Suspense>
    </div>
  )
}