import React from 'react'
import { useTheme } from '@/hooks/useTheme'

function App() {
  const { theme, setTheme } = useTheme()

  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* 头部导航 */}
      <header className="nav-agriculture">
        <div className="container-agriculture mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <h1 className="text-2xl font-bold text-white">
                🌾 智慧农业生产管理系统
              </h1>
            </div>

            <div className="flex items-center space-x-4">
              {/* 主题切换按钮 */}
              <button
                onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
                className="px-3 py-2 rounded-md bg-white/20 hover:bg-white/30 text-white transition-colors"
              >
                {theme === 'light' ? '🌙' : '☀️'}
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="container-agriculture mx-auto px-4 py-8">
        {/* 欢迎页面 */}
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold mb-4 text-agriculture-green">
            欢迎使用智慧农业生产管理系统
          </h2>
          <p className="text-xl text-muted-foreground mb-8">
            基于 React 18 + Vite 6 + TypeScript + shadcn/ui 构建的现代化农业管理平台
          </p>
        </div>

        {/* 系统状态卡片 */}
        <div className="grid-agriculture mb-12">
          <div className="card-agriculture p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                🚜
              </div>
              <div>
                <h3 className="text-lg font-semibold">农机管理</h3>
                <p className="text-sm text-muted-foreground">9个模块，20个子功能</p>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>档案管理</span>
                <span className="text-green-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>运行监控</span>
                <span className="text-green-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>调度管理</span>
                <span className="text-green-600">✅ 已配置</span>
              </div>
            </div>
          </div>

          <div className="card-agriculture p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                🌾
              </div>
              <div>
                <h3 className="text-lg font-semibold">地块管理</h3>
                <p className="text-sm text-muted-foreground">土壤、作物、种植计划</p>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>地块档案</span>
                <span className="text-blue-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>作物管理</span>
                <span className="text-blue-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>种植计划</span>
                <span className="text-blue-600">✅ 已配置</span>
              </div>
            </div>
          </div>

          <div className="card-agriculture p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mr-4">
                📊
              </div>
              <div>
                <h3 className="text-lg font-semibold">数据统计</h3>
                <p className="text-sm text-muted-foreground">实时数据与分析</p>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>农机总数</span>
                <span className="text-amber-600">0 台</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>地块面积</span>
                <span className="text-amber-600">0 亩</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>今日作业</span>
                <span className="text-amber-600">0 项</span>
              </div>
            </div>
          </div>

          <div className="card-agriculture p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                ⚙️
              </div>
              <div>
                <h3 className="text-lg font-semibold">系统设置</h3>
                <p className="text-sm text-muted-foreground">配置与权限管理</p>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>用户管理</span>
                <span className="text-purple-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>权限设置</span>
                <span className="text-purple-600">✅ 已配置</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>系统配置</span>
                <span className="text-purple-600">✅ 已配置</span>
              </div>
            </div>
          </div>
        </div>

        {/* 技术栈展示 */}
        <div className="card-agriculture p-8 mb-12">
          <h3 className="text-2xl font-bold mb-6 text-center">🛠️ 技术栈</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="text-center">
              <div className="text-3xl mb-2">⚛️</div>
              <h4 className="font-semibold">React 18</h4>
              <p className="text-sm text-muted-foreground">现代化UI框架</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">🚀</div>
              <h4 className="font-semibold">Vite 6</h4>
              <p className="text-sm text-muted-foreground">极速构建工具</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">📘</div>
              <h4 className="font-semibold">TypeScript</h4>
              <p className="text-sm text-muted-foreground">类型安全</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">🎨</div>
              <h4 className="font-semibold">Tailwind CSS</h4>
              <p className="text-sm text-muted-foreground">原子化CSS</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">🧩</div>
              <h4 className="font-semibold">shadcn/ui</h4>
              <p className="text-sm text-muted-foreground">组件库</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">📊</div>
              <h4 className="font-semibold">Recharts</h4>
              <p className="text-sm text-muted-foreground">数据可视化</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">🔧</div>
              <h4 className="font-semibold">ESLint</h4>
              <p className="text-sm text-muted-foreground">代码检查</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">💅</div>
              <h4 className="font-semibold">Prettier</h4>
              <p className="text-sm text-muted-foreground">代码格式化</p>
            </div>
          </div>
        </div>

        {/* 快速操作按钮 */}
        <div className="text-center">
          <div className="space-x-4">
            <button
              onClick={() => window.location.href = '/machinery'}
              className="btn-agriculture px-6 py-3 rounded-lg font-semibold mr-4"
            >
              🚜 进入农机管理
            </button>
            <button
              onClick={() => window.location.href = '/field'}
              className="btn-agriculture-secondary px-6 py-3 rounded-lg font-semibold"
            >
              🌾 进入地块管理
            </button>
          </div>
        </div>

        {/* 开发工具状态 */}
        <div className="mt-12 p-4 bg-muted rounded-lg">
          <h4 className="font-semibold mb-2">🔧 开发工具状态</h4>
          <div className="text-sm text-muted-foreground">
            <p>✅ 项目依赖已安装</p>
            <p>✅ 开发服务器可正常启动</p>
            <p>✅ 热重载功能已配置</p>
            <p>✅ TypeScript类型检查已配置</p>
            <p>⚙️ ESLint/Prettier可通过开关控制</p>
          </div>
        </div>
      </main>

      {/* 页脚 */}
      <footer className="bg-muted py-8 mt-16">
        <div className="container-agriculture mx-auto px-4 text-center">
          <p className="text-muted-foreground">
            智慧农业生产管理系统 v1.0.0 | 基于 React 18 + Vite 6 + TypeScript 构建
          </p>
          <p className="text-sm text-muted-foreground mt-2">
            🌾 专为现代化农业而生 | 科技赋能农业，智慧创造未来
          </p>
        </div>
      </footer>
    </div>
  )
}

export default App