import { useMyState } from '@/common';
import {
  BuildOutlined,
  ImportOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import QuickActionCard from './components/QuickActionCard';

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

  const quickActions = [
    {
      icon: <BuildOutlined />,
      title: '添加机构',
      description: '快速创建新的机构',
      themeColor: '#1890ff',
      path: '/company/list',
    },
    {
      icon: <ImportOutlined />,
      title: '导入项目',
      description: '批量导入项目数据',
      themeColor: '#52c41a',
      path: '/asset/list',
    },
    {
      icon: <TeamOutlined />,
      title: '导入员工',
      description: '批量导入员工数据',
      themeColor: '#fa8c16',
      path: '/company/employees',
    },
  ];

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

        {/* 快捷操作卡片区域 */}
        <div
          className="quick-actions-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 24,
            maxWidth: 900,
            margin: '0 auto',
          }}
        >
          {quickActions.map((action) => (
            <QuickActionCard
              key={action.path}
              icon={action.icon}
              title={action.title}
              description={action.description}
              themeColor={action.themeColor}
              to={action.path}
            />
          ))}
        </div>

        {/* 移动端响应式样式 */}
        <style>{`
          @media (max-width: 768px) {
            .quick-actions-grid {
              grid-template-columns: 1fr !important;
            }
          }
        `}</style>
      </div>
    </div>
  );
}