import styles from './apps.module.css'

interface AppItem {
  id: string
  icon: string
  label: string
  path: string
  color: string
  description?: string
}

const apps: AppItem[] = [
  { id: '1', icon: '✈️', label: '出差申请', path: '/business-trip/apply', color: '#1677ff', description: '提交出差申请' },
  { id: '2', icon: '📝', label: '采购申请', path: '/purchase/apply', color: '#52c41a', description: '物品采购审批' },
  { id: '3', icon: '🏠', label: '会议室', path: '/meeting-room', color: '#faad14', description: '会议室预定' },
  { id: '4', icon: '📅', label: '日程管理', path: '/schedule', color: '#722ed1', description: '个人日程安排' },
  { id: '5', icon: '💰', label: '报销申请', path: '/expense/apply', color: '#eb2f96', description: '费用报销审批' },
  { id: '6', icon: '📋', label: '请假申请', path: '/leave/apply', color: '#13c2c2', description: '请假审批' },
  { id: '7', icon: '🚗', label: '用车申请', path: '/car/apply', color: '#f759ab', description: '公车使用申请' },
  { id: '8', icon: '🎁', label: '礼品申请', path: '/gift/apply', color: '#ff7a45', description: '礼品采购申请' },
  { id: '9', icon: '📊', label: '数据报表', path: '/reports', color: '#1890ff', description: '业务数据统计' },
  { id: '10', icon: '👥', label: '通讯录', path: '/contacts', color: '#096dd9', description: '内部通讯录' },
  { id: '11', icon: '📁', label: '文件中心', path: '/files', color: '#595959', description: '文件共享管理' },
  { id: '12', icon: '⚙️', label: '系统设置', path: '/settings', color: '#8c8c8c', description: '系统偏好设置' },
]

export default function Apps() {
  const handleAppClick = (app: AppItem) => {
    // TODO: 跳转到应用页面
    console.log('点击应用:', app)
  }

  return (
    <div className={styles.apps}>
      <div className={styles.header}>
        <h1>应用中心</h1>
        <p>选择你需要的功能</p>
      </div>

      <div className={styles.grid}>
        {apps.map((app) => (
          <div
            key={app.id}
            className={styles.appCard}
            onClick={() => handleAppClick(app)}
          >
            <div className={styles.appIcon} style={{ backgroundColor: `${app.color}15` }}>
              <span style={{ fontSize: 32, color: app.color }}>{app.icon}</span>
            </div>
            <div className={styles.appInfo}>
              <span className={styles.appLabel}>{app.label}</span>
              {app.description && (
                <span className={styles.appDesc}>{app.description}</span>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* 底部安全区域 */}
      <div className={styles.safeArea} />
    </div>
  )
}