import { useMyState } from '@/common';
import QuickActionsGrid from './components/QuickActionsGrid';
import StatisticsPlaceholder from './components/StatisticsPlaceholder';

export default function Index() {
  const { snap } = useMyState();
  const username = snap.session?.user?.username || '用户';

  return (
    <div
      style={{
        padding: '24px',
        minHeight: '100vh',
        background: '#f0f2f5',
      }}
    >
      {/* 欢迎语区域 */}
      <div
        style={{
          marginBottom: '32px',
          textAlign: 'center',
        }}
      >
        <h1
          style={{
            fontSize: '32px',
            fontWeight: 600,
            color: '#262626',
            marginBottom: '12px',
          }}
        >
          欢迎回来，{username}！
        </h1>
        <p
          style={{
            fontSize: '16px',
            color: '#8c8c8c',
            marginBottom: 0,
          }}
        >
          这里是您的快捷工作台，点击下方卡片快速开始常用操作
        </p>
      </div>

      {/* 快捷操作区域 */}
      <QuickActionsGrid />

      {/* 统计数据预留区域 */}
      <StatisticsPlaceholder />
    </div>
  );
}