'use client'

import { useState } from 'react'
import { useAuth } from '@/components/AuthProvider'
import Sidebar from '@/components/Sidebar'
import LoginPage from '@/components/LoginPage'
import OverviewPage from '@/components/OverviewPage'
import InquiryPage from '@/components/InquiryPage'
import ImagePage from '@/components/ImagePage'
import ProductPage from '@/components/ProductPage'
import ComparisonPage from '@/components/ComparisonPage'
import LeadDetailPage from '@/components/LeadDetailPage'
import ReportCenterPage from '@/components/ReportCenterPage'
import RuleCenterPage from '@/components/RuleCenterPage'
import SystemMonitorPage from '@/components/SystemMonitorPage'
import AdminPage from '@/components/AdminPage'

type Page = 'overview' | 'inquiry' | 'image' | 'product' | 'comparison' | 'lead-detail' | 'report-center' | 'rule-center' | 'system-monitor' | 'admin-tenants' | 'admin-users' | 'admin-stats' | 'admin-configs' | 'admin-plans'

export default function Home() {
  const { user, loading, logout } = useAuth()
  const [page, setPage] = useState<Page>('overview')
  const [leadDetailId, setLeadDetailId] = useState<string | null>(null)

  const handleLeadDetail = (id: string) => {
    setLeadDetailId(id)
    setPage('lead-detail')
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-[#f7f9fb] flex items-center justify-center">
        <div className="text-on-surface-variant">加载中...</div>
      </div>
    )
  }

  if (!user) return <LoginPage />

  return (
    <div className="flex min-h-screen">
      <Sidebar current={page} onNavigate={setPage} user={user} onLogout={logout} />
      <main className="flex-1 ml-64 p-8">
        {page === 'overview' && <OverviewPage onNavigate={(p) => setPage(p as Page)} />}
        {page === 'inquiry' && <InquiryPage onLeadDetail={handleLeadDetail} />}
        {page === 'image' && <ImagePage />}
        {page === 'product' && <ProductPage />}
        {page === 'comparison' && <ComparisonPage />}
        {page === 'lead-detail' && <LeadDetailPage leadId={leadDetailId!} onNavigate={(p) => setPage(p as Page)} />}
        {page === 'report-center' && <ReportCenterPage />}
        {page === 'rule-center' && <RuleCenterPage />}
        {page === 'system-monitor' && <SystemMonitorPage />}
        {page.startsWith('admin-') && <AdminPage section={page.replace('admin-', '') as any} />}
      </main>
    </div>
  )
}